Method of accessing form elements? 1

[zinja]

I have about pulled my hair out. I am using Dynamic Drive's cool javascript window code and all is well except for my lack of being able to get values from the form elements. If I use a standard

onChange="myfunction(this)"

as part of my html that creates form field (text input field), and then evaluate it using

function myfunction(id)
{
     var description = id.value;
     alert(description);
}

I can get the value entered. However, I am having the hardest time understanding how to access the values of any element on that form (like when a user clicks a submit button - I want to be able to get any value from that form using the form element name or id).

Any ideas?

Thanks!

LJ Wilson

My personal saying - Just remember, it can always get worse, and usually will.

 

[j4606]

document.forms['yourform'].yourinput.value

or give your input tag an id

document.getElementById("yourid").value

Make sure your input elements and forms have the correct ids before ttempting.

 

[zinja]

Thanks for the reply - But ...

I still cannot get it to work. The alert I am calling displays no value and I would still like to be able to pass a form name and then use that to reference any element on that form. Is that something that can be done in Javascript?

Here is the complete function I am using...

function reprint(id)
{
	if (workspace[ws_index].transaction_status == 1)  // Not a sale in process
	{
		if (!id)
		{
			winparameters = {
								divid:		"dialogdiv",
								title:		"Reprint Receipt",
								text:		"Enter Trans # (L for last transaction)",
								width:		250,
								height:		200,
								center:		1,
								resize:		0,
								scrolling:	0,
								html:		'<input type="text" size="10" name="text1" id="text1" maxlength="10" tabindex="0"><p>' +
											'Sig Line?<input type="checkbox" id="sig" name="sig" value="checkbox" tabindex="1" /><p>' +
											'<input type="button" value="OK" style="margin-right: 20px" onClick="reprint(this)" />' +
											'<input type="button" value="Cancel" style="margin-right: 20px" onClick="killwindow();" />',
											
								firstinput:	"text1"
							}
		
			createwindow(winparameters);
		}
		else
		{
		//var reprinttransid = prompt( "Enter transaction # (L for last transaction)", "" );
		var reprinttransid = document.getElementById("text1").value
		alert(reprinttransid);
        }
}

Thanks for all the help,



LJ Wilson

My personal saying - Just remember, it can always get worse, and usually will.

 

[j4606]

where is the html for your text input with the id="text1". If your trying to reference the javascript input that was created by your reprint id function then you won't see the element cause your code doesn't create it for some reason as it is structured like this.

if (!id)
        {
 	    //create the input     
            createwindow(winparameters);
        }
        else 
        {
	    //your trying to alert something that wasn't created	
        var reprinttransid = document.getElementById("text1").value
        alert(reprinttransid);
        }

 

[j4606]

I'm guessing your createwindow function opens a new window?
You can no longer access the elements via document.menthod if your open a new window your going to have to use something like
{code] newWin.document.forms[0].fieldname.value[/code]

 

[zinja]

Some of the html is specified in the code I have posted (2nd post), the rest of it is in the createwindow function:

// @createwindow
function createwindow(parameters)
{
	var divid = parameters['divid'];
	var html = parameters['html'];
	var title = parameters['title'];
	var text = parameters['text'];
	var width = "width=" + parameters['width'] + "px";
	var height = "height=" + parameters['height'] + "px";
	var resize = "resize=" + parameters['resize'];
	var scrolling = "scrolling=" + parameters['scrolling'];
	var center = "center=" + parameters['center'];
	var settings = "'" + width + "," + height + "," + resize + "," + scrolling + "," + center + "'";
	var mydiv = document.getElementById(divid);	
	var firstinput = parameters['firstinput'];

	mydiv.innerHTML = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional ' +
					'//EN" "[URL unfurl="true"]http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">[/URL] ' +
					'<html> ' +
					'<head> ' +
					'<title></title>' +
					'<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">' +
					'</head>' +
					'<body>' +
					'<b>'+title+'</b>' +
					'<p>' +text+'</p>' +
					'<form id="dialogform">';
	
	mydiv.innerHTML += html;				  
				  
	mydiv.innerHTML +=	'</form>' +
						'</body>' +
						'</html>';
	dialogopen=true;
	dialog=dhtmlwindow.open('mywin', 'div', divid, title, settings);
	if (firstinput)
	{
		document.getElementById(firstinput).focus();
	}
}

What happens is:
When the reprint function is first called, there is no value passed to it so it creates and displays a div with my form on it. The createwindow function then creates a window with the div on it and shows it. When the user clicks OK, I want to pass on the id of the form to the reprint function and then get the values from the elements. That is why there is an if/else that evaluates whether the function was passed anything. Does this help? If this is totally the wrong way to do things - please tell me. I am still relatively new to javascript.

Also, why you are so gracious to help me, can you tell me why my forms textbox is not getting the focus when the div is shown?

Thanks so much,

LJ Wilson

My personal saying - Just remember, it can always get worse, and usually will.

 

[zinja]

I don't think that createwindow actually creates another browser window (or tab), it just shows a div that is formatted to look like a popup window.

See dynamicdrive.com

Thanks,

LJ Wilson

My personal saying - Just remember, it can always get worse, and usually will.

 

[zinja]

I have tried all kinds of things all with no success. If I pass the text field onto the function (using onChange="reprint(this);" and then do an alert(id.value), where id is the passed argument in the reprint function - it works fine. I just want to be able to get the value from any and all fields in that form. Any other ideas?

Thanks!

LJ Wilson

My personal saying - Just remember, it can always get worse, and usually will.

 

[j4606]

with out your full code or at least a link to the script you got from dynamic drive, so i can see what its doing. I can't offer any solution but general best practice guidelines.

The code your posted

mydiv.innerHTML = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional ' +
                    '//EN" "[URL unfurl="true"]http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">[/URL] ' +
                    '<html> ' +
                    '<head> ' +
                    '<title></title>' +
                    '<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">' +
                    '</head>' +
                    '<body>' +
                    '<b>'+title+'</b>' +
                    '<p>' +text+'</p>' +
                    '<form id="dialogform">';
    
    mydiv.innerHTML += html;

If it really does not create a new window and just changes the innerhtml property of a div should be more like

mydiv.innerHTML = '<form id="dialogform">'+html+'</form>

Then you should be able to access your form elements via

document.myforms['dialogform']

Make sure your forms have unique names and elements in your forms have unique ids.

 

[j4606]

mydiv.innerHTML = '<form name="dialogform" id="dialogform" >'+html+'</form>';
var forms = document.forms['dialogform'];

egh its friday:<

 

[zinja]

Thanks for the response - you helped me realize that I was creating another page and shouldn't have been. I am still having issues but I think I am closer. Here is what I have got:

The revised createwindow() function

// @createwindow
function createwindow(parameters)
{
	var divid = parameters['divid'];
	var html = parameters['html'];
	var title = parameters['title'];
	var text = parameters['text'];
	var width = "width=" + parameters['width'] + "px";
	var height = "height=" + parameters['height'] + "px";
	var resize = "resize=" + parameters['resize'];
	var scrolling = "scrolling=" + parameters['scrolling'];
	var center = "center=" + parameters['center'];
	var settings = "'" + width + "," + height + "," + resize + "," + scrolling + "," + center + "'";
	var mydiv = document.getElementById(divid);	
	var firstinput = parameters['firstinput'];

	mydiv.innerHTML = '<form name="dialogform" id="dialogform">';
	
	mydiv.innerHTML += html;				  
				  
	mydiv.innerHTML +=	'</form>';
	dialogopen=true;
	dialog=dhtmlwindow.open('mywin', 'div', divid, title, settings);
}

And the reprint() function

// @reprint
function reprint(id)
{
	if (workspace[ws_index].transaction_status == 1)  // Not a sale in process
	{
		if (!id)
		{
			winparameters = {
								divid:		"dialogdiv",
								title:		"Reprint Receipt",
								text:		"Enter Trans # (L for last transaction)",
								width:		250,
								height:		200,
								center:		1,
								resize:		0,
								scrolling:	0,
								html:		'<input type="text" size="10" name="text1" id="text1" maxlength="10" tabindex="0" onChange="reprint(this);"><p>' +
											'Sig Line?<input type="checkbox" id="sig" name="sig" onChange="reprint(this);" tabindex="1" /><p>' +
											'<input type="Submit" value="OK" style="margin-right: 20px" onClick="reprint(this);" />' +
											'<input type="button" value="Cancel" style="margin-right: 20px" onClick="killwindow();" />',
											
								firstinput:	"text1"
							}
		
			createwindow(winparameters);
		}
		else
		{
		//var reprinttransid = prompt( "Enter transaction # (L for last transaction)", "" );
		var form = document.forms['dialogform'];
		var value=form.text1.value;
		alert(value);

When I change the value in the textbox (text1), I get an error:
form.text1 has no properties

And here is a link to the dynamic drive site:

http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm

What am I doing wrong?

Thanks so much!

LJ Wilson

My personal saying - Just remember, it can always get worse, and usually will.

 

[j4606]

Im sorry i think form is a javascript keyword. I was trying to give you an example not working code. Change the var form to something that is not a keyword.

 

[zinja]

I changed it to myform and am getting the same error. I can't believe I am having so much trouble with this. Any other ideas on what I am doing wrong? I just think I have a fundamental misunderstanding about how to access DOM elements. I have used document.getElementById many other times and no issues. But with this, it just doesn't work the way I think it should.

Thanks,

LJ

BTW - here is my revised code to get that value:

var myform = document.forms['dialogform'].text1;
		
		var value=myform.text1.value;
		alert(value);

Thanks,

LJ Wilson

My personal saying - Just remember, it can always get worse, and usually will.

 

[j4606]

your methods of accessing dom elements arn't the issue i think. It could be a number of other things though. For example this works fine for me.

<html>
	<head>
		<script type="text/javascript">
			function myfunction(){
				alert(document.forms['myform'].input1.value);
				alert(document.getElementById('input1').value);
			}
		</script>
	</head>
	<body>
		<div>
			form 1 example<br>
			<form name="myform" action="#" method="get">
				<input type="text" name="input1" id="input1">
				<button type="button" onclick="myfunction()">test</button>
			</form>
		</div>
	</body>
</html>

Your problem could be anywhere else on your page. As I said before you maybe have to make sure your form elements are unique and that your ids are also unique and that your html validates. Can't really help much more cause I can't test your code.

 

[zinja]

I finally figured out what the problem was. I was not rendering the html properly in my php script. When I included the standard page header stuff like Doc Type, etc - it all worked properly.

Hopefully, this will be helpful to remind all who render html with php (or anything else) to include the html page header information. Correctly this also fixed an issue I had with inconsistent json responses.

Thanks for all the help!


LJ Wilson

My personal saying - Just remember, it can always get worse, and usually will.