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

Recommended Answers

All 8 Replies

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>

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

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>

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

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"

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?

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

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

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.