accessing form fields inside javascript

Question

yopirates 0 Light Poster

14 Years Ago

hello guys i am facing a problem in accessing form elements and returing them.. can u please help me.. ?

Here the problem goes:

<script language="javascript" type="text/javascript">

function pop() {
              newwindow2=window.open('','name','height=500,width=500');
    var tmp = newwindow2.document;
    tmp.write('<html><head><title>popup</title>');
    tmp.write('<body><form action ="hello.html" value="somthing" method="post">');
tmp.write('<b>Date</b>')
tmp.write('<input type="text" name="date"><br>');
tmp.write('<b>Event Title</b>')
tmp.write('<input type="text" name="title"><br>');
var title = document.getElementById('title')
tmp.write('<b>Event Desc</b>');
tmp.write('<input type="text" name="event1"><br>');
tmp.write('<b>start time</b>');
tmp.write('<input type="text" name="start"><br>');
tmp.write('<b> end time </b>');
tmp.write('<input type="text" name="end"><br>');
tmp.write('<input type="submit" name="ADD" onclick="javascript:self.close()"><br>');
tmp.write('<input type="reset" name="CLEAR">');
//name = oForm.elements["title"].value;
tmp.write('</form>') 
tmp.write('</body></html>');
tmp.close();

}

</script>

Here i have created a pop up (html page) inside one html page which uses javascript inside it. On clicking submit in the popup i want the values of form elements (& also return those values to other html page ) so can u ppl help in this regard
Thank you

javascript

Edited 11 Years Ago by Nick Evan because: Fixed formatting

2 Contributors
8 Replies
165 Views
5 Days Discussion Span
Latest Post 14 Years Ago Latest Post by yopirates

hielo 65 Veteran Poster

14 Years Ago

copy and paste the following and give it a try:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var data=null;
function gatherData(f)
{
	var str={};
	var i=-1, limit=f.elements.length;
	while( ++i < limit)
	{
		str[ f.elements[i].name ] = f.elements[i].value;
	}
	data=str;
	alert( data['title'] );
}


function pop() {
newwindow2=window.open('','name','height=500,width=500');
var tmp = newwindow2.document;
tmp.write('<html><head><title>popup</title>');
tmp.write('<body><form action ="hello.html" method="post" onsubmit="return self.opener.gatherData(this);">');
tmp.write('<b>Date</b>')
tmp.write('<input type="text" name="date"><br>');
tmp.write('<b>Event Title</b>')
tmp.write('<input type="text" name="title"><br>');
var title = document.getElementById('title')
tmp.write('<b>Event Desc</b>');
tmp.write('<input type="text" name="event1"><br>');
tmp.write('<b>start time</b>');
tmp.write('<input type="text" name="start"><br>');
tmp.write('<b> end time </b>');
tmp.write('<input type="text" name="end"><br>');
tmp.write('<input type="submit" name="ADD"><br>');
tmp.write('<input type="reset" name="CLEAR">');
//name = oForm.elements["title"].value;
tmp.write('</form>')
tmp.write('</body></html>');
tmp.close();

}

</script>
</head>
<body>
	<span onclick="pop()">Popup</span>
</body>
</html>

hielo 65 Veteran Poster

14 Years Ago

This is a far as I go:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<base href="http://arshaw.com/js/fullcalendar/examples/" />
<link rel='stylesheet' type='text/css' href='../fullcalendar.css' /> 
<script type='text/javascript' src='../jquery/jquery.js'></script> 
<script type='text/javascript' src='../jquery/jquery-ui-custom.js'></script> 
<script type='text/javascript' src='../fullcalendar.min.js'></script> 
<script type='text/javascript'> 
var data=null;
var newwindow2=null;
var calendar=null;
	$(document).ready(function() {
	
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		calendar = $('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			selectable: true,
			selectHelper: true,
			select:pop,
			/*
			select: function(start, end, allDay) {
				var title = prompt('Event Title:');
				if (title) {
					calendar.fullCalendar('renderEvent',
						{
							title: title,
							start: start,
							end: end,
							allDay: allDay
						},
						true // make the event "stick"
					);
				}
				calendar.fullCalendar('unselect');
			},
			*/
			editable: true,
			events: [
				{
					title: 'All Day Event',
					start: new Date(y, m, 1)
				},
				{
					title: 'Long Event',
					start: new Date(y, m, d-5),
					end: new Date(y, m, d-2)
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d-3, 16, 0),
					allDay: false
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d+4, 16, 0),
					allDay: false
				},
				{
					title: 'Meeting',
					start: new Date(y, m, d, 10, 30),
					allDay: false
				},
				{
					title: 'Lunch',
					start: new Date(y, m, d, 12, 0),
					end: new Date(y, m, d, 14, 0),
					allDay: false
				},
				{
					title: 'Birthday Party',
					start: new Date(y, m, d+1, 19, 0),
					end: new Date(y, m, d+1, 22, 30),
					allDay: false
				},
				{
					title: 'Click for Google',
					start: new Date(y, m, 28),
					end: new Date(y, m, 29),
					url: 'http://google.com/'
				}
			]
		});
		
	});

function trim(s)
{
	if(typeof(s)=="undefined")
		return "";
return String(s).replace(/^\s+|\s+$/g,'');
}
function gatherData(f)
{
	var str={};
	var i=-1, limit=f.elements.length;
	while( ++i < limit)
	{
		str[ f.elements[i].name ] = trim(f.elements[i].value);
	}
	data=str;
//	document.getElementById("title").innerHTML=data["title"];
//	document.getElementById("date").innerHTML=data["date"];
	var errs=[];
	if(!data.title)
		errs[errs.length]="Title is required";		

	if(!data.start)
		errs[errs.length]="Start Time is required";		

	if(!data.end)
		errs[errs.length]="End Time is required";		

				if (!errs.length) 
				{
					calendar.fullCalendar('renderEvent',
						{
							'title': data.title,
							'start': new Date( Date.parse( data.date + " " + data.start) ),
							'end': new Date( Date.parse( data.date + " " + data.end) ),
							'allDay': false
						},
						true // make the event "stick"
					);
					calendar.fullCalendar('unselect');
					newwindow2.close();
				}
				else
				{
					alert( "The information you submitted contains errors, specifically: \n\t" + errs.join("\n\t"));
					setTimeout(function(){newwindow2.focus();},50);
				}
return false;
}


function pop(s) {
	newwindow2=window.open('','name','height=500,width=500');
	newwindow2.onload=function(){
		var strD=(s.getMonth()+1) + '/' + s.getDate() + '/'+ s.getFullYear();
		newwindow2.document.getElementById("date").value=strD;
	}

	var tmp = newwindow2.document;
	tmp.write('<html><head><title>popup</title>');
	tmp.write('<body><form action ="hello.html" method="post" onsubmit="return self.opener.gatherData(this);">');
	tmp.write('<b>Date</b>')
	tmp.write('<input type="text" id="date" name="date" readonly="readonly"><br>');
	tmp.write('<b>Event Title</b>')
	tmp.write('<input type="text" name="title"><br>');
	//var title = document.getElementById('title')
	tmp.write('<b>Event Desc</b>');
	tmp.write('<input type="text" name="event1"><br>');
	tmp.write('<b>start time</b>');
	tmp.write('<input type="text" name="start"><br>');
	tmp.write('<b> end time </b>');
	tmp.write('<input type="text" name="end"><br>');
	tmp.write('<input type="submit" name="ADD"><br>');
	tmp.write('<input type="reset" name="CLEAR">');
	//name = oForm.elements["title"].value;
	tmp.write('</form>')
	tmp.write('</body></html>');
	tmp.close();
}

</script> 
<style type='text/css'> 
 
	body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}
 
	#calendar {
		width: 900px;
		margin: 0 auto;
		}
 
</style> 
</head> 
<body> 
<div id='calendar'></div> 
</body> 
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

yopirates 0 Light Poster · Answer 1 · 2010-09-06T12:10:17+00:00

hi hielo
thanks for the reply in the thread "accessing form fields inside javascript"
actually iam using a fullcalander for my work.
The solution which u gave helped me to display the current event which i typle in an alert box ..but i want that event to be putup onto calendar..
it would be very greatfull if u help me regarding this problem
click here to see the original

http://arshaw.com/js/fullcalendar/examples/selectable.html

Here they have used a promt box!! what ever they enter its being listed on the calendar page.. but in my case what i want is that i got a promt box with form fields.. when i give the title n submit that particular evnt mst be updated on to the calander ..
Thanks
Regards
Yopirates

yopirates 0 Light Poster · Answer 2 · 2010-09-07T13:58:01+00:00

hi hielo thanks so much for the reply.. when i click on the slot on i got the popup msg with the fields .. but when i give the date , event title, event desc ,start time and end time and click submit.. i am not getting the event on the calander..but when i dont enter any fields in the popup and if i give sumbit i am getting the error msgs which u hav builtin into the code.. could u send me the modified code so that what ever event, start time and endtime which i give must be updated on to the calander
Thank you
Regards
Yopirates

hielo 65 Veteran Poster · Answer 3 · 2010-09-07T22:18:04+00:00

Did you copy and paste the above code onto a BLANK document and saved it as test.html?
It worked for me in Chrome and FF. Hence my comment, "This is a far as I go"

hielo 65 Veteran Poster · Answer 4 · 2010-09-07T22:21:07+00:00

Be sure to test it by opening it directly from the browser, not through the preview option of your editor. If it still does not work, then would expect you to be getting some error message. Are you? What browser are you using?

yopirates 0 Light Poster · Answer 5 · 2010-09-08T10:50:28+00:00

HI hielo i copied n pasted ur code in a new file called test.html n opened from the browser [google chrome] but when i click on the slot[in the day view] i am able to get the popup window but when i enter event title , start time, end time and click submit ,the popup window is getting closed but other than that event updating is not taking place .So could you see to dis problem n help me in this regard
thankyou

yopirates 0 Light Poster · Answer 6 · 2010-09-08T11:17:13+00:00

Hielo for me it worked!!! in FF:) but in chrome didnt:( thanks so.. much!!So nice that u got me a solution. N Hielo i wanted one more feature to be added that is when i click an already added event i have to get an edit button n should edit the details n upon submit again it has to be saved .
Thankyou
Yopirates