Getting value of input field on form

@ctreptowOct 02.2009

Hi. I am having trouble getting the value of an input field and don’t understand why. Here is a snippet of what I’m working on (inside a JSP):

[CODE]<% List nodes = (List)request.getAttribute(FileListServlet.NODELIST_ATTRIBUTE); ResourceBundle bundle = ResourceBundle.getBundle(“com.corp.custom.strings”, request.getLocale()); String vpathParam = “list_files_portlet-vpath”;

//Create the data needed for a path cookie-crumb. CSVPath curPath = (CSVPath)session.getAttribute(FileListServlet.VPATH_SESSION_KEY); Stack pathStack = new Stack();

for (CSVPath parentPath = curPath.getParentPath(); !parentPath.toString().equals(CSVPath.SERVER_SLASH); parentPath = parentPath.getParentPath()) { pathStack.push(parentPath); } %>

<script language=”javascript”> //This JavaScript function does the actual posting back to our //FileList servlet. It sets the vpath parameter based on what //the user selected. function submit_to_list_file_portlet(path) { alert(document.getElementById(“<%=vpathParam%>”).value); alert(document.forms[‘corp_customer_list_files_portlet_form’].elements[‘<%=vpathParam%>’].value);

var form = document.forms.corp_customer_list_files_portlet_form; form.elements[‘<%=vpathParam%>’].value = path; form.submit(); } </script> <form name=”corp_customer_list_files_portlet_form” method=”post”> <input type=”hidden” id=”<%=vpathParam%>” name=”<%=vpathParam%>”> </form>[/CODE]

The first alert shows a blank alert. The second gives me an error:

Line: 3236
Char: 17
Error: ‘elements.list_files_portlet-vpath’ is null or not an object
Code: 0

I don’t understand: why can’t I access the value of the input field on the form?

Secondly, what is that line number referring to? My JSP doesn’t have that many lines.

to post a comment

JavaScript

12 Comments(s) _↴

@slaughtersOct 02.2009 — #1) It's hard to help know why you cant get to a form field when you did not show us the form

2) Line numbers like that come from the interpreted page source, not the server side source code. Do a view source then count down (Firefox tends to be better at this than IE).

3) Dashes are not valid characters for HTML id values (get's interpeted as a minus sign in most languages I know). So document.getElementById("<%=vpathParam%>").value will fail since you've set vpathParam to be "list_files_portlet-vpath"

@ctreptowauthorOct 02.2009 — #1) It's hard to help know why you cant get to a form field when you did not show us the form[/QUOTE]

I believe I did:

[CODE]        <form name="corp_customer_list_files_portlet_form" method="post">
 <input type="hidden" id="<%=vpathParam%>" name="<%=vpathParam%>">
 </form>[/CODE]

2) Line numbers like that come from the interpreted page source, not the server side source code. Do a view source then count down (Firefox tends to be better at this than IE).[/QUOTE]

Ahhh...thanks.

3) Dashes are not valid characters for HTML id values (get's interpeted as a minus sign in most languages I know). So document.getElementById("<%=vpathParam%>").value will fail since you've set vpathParam to be "list_files_portlet-vpath"[/QUOTE]

Interesting, I'll change that and give it a test.

Thanks for the help!

@ctreptowauthorOct 02.2009 — #
Interesting, I'll change that and give it a test.
[/QUOTE]

Didn't seem to help.

[CODE]String vpathParam = "list_files_portlet_vpath";
 ...
 
 alert(document.getElementById("<%=vpathParam%>").value);
 alert(document.corp_customer_list_files_portlet_form.<%= vpathParam %>);
 alert(document.forms['corp_customer_list_files_portlet_form'].elements['<%=vpathParam%>'].value);
 [/CODE]

Now I get:

1) Blank

2) undefined

3) Error: 'elements.list_files_portlet_vpath' is null or not an object

@ctreptowauthorOct 02.2009 — #Ok, now I'm confused even more. This:

[CODE]        <script language="javascript">
 //This JavaScript function does the actual posting back to our
 //FileList servlet.  It sets the vpath parameter based on what
 //the user selected.
 function submit_to_list_file_portlet(path)
 {
 var vpathValue = document.getElementById("<%=vpathParam%>").value;
 if (vpathValue == null) {
 alert("vpathValue was null");
 } else {
 alert("vpathValue was NOT null");
 alert(vpathValue);
 }
 //alert(document.getElementById("<%=vpathParam%>").value);
 //alert(document.corp_customer_list_files_portlet_form.<%= vpathParam %>);
 //alert(document.forms['corp_customer_list_files_portlet_form'].elements['<%=vpathParam%>'].value);
 
   //alert(document.getElementById("list_files_portlet_vpath").value);
   //alert(document.corp_customer_list_files_portlet_form.list_files_portlet_vpath);
   //alert(document.forms['corp_customer_list_files_portlet_form'].elements['list_files_portlet_vpath'].value);
 
   //var form = document.forms.corp_customer_list_files_portlet_form;
   //form.elements['<%=vpathParam%>'].value = path;
   //form.submit();
   } 
   </script>
   <form name="corp_customer_list_files_portlet_form" method="post">
   <input type="hidden" id="<%=vpathParam%>" name="<%=vpathParam%>">
   </form>[/CODE]

Produces the alert with "vpathValue was NOT null" followed by a blank alert.

@slaughtersOct 02.2009 — #It's a hidden field with no value assigned to it. Shouldn't its value be blank ?

@ctreptowauthorOct 02.2009 — #It's a hidden field with no value assigned to it. Shouldn't its value be blank ?[/QUOTE]

Yeah, I think you've got a point, but I'm not sure you're correct.

In the rest of the page, the function is actually called via clicking on a link:

[CODE]%>
 <a href="javascript:submit_to_list_file_portlet('<%=path.toString()%>')"
 class="iw-base-link"><%=path.getName()%></a><%=pathDelim%>
 <%[/CODE]

So, when the click happens, the function is called and there should be a value defined at that time, right?

@slaughtersOct 02.2009 — #

[CODE]            function submit_to_list_file_portlet(path)
 {
 var vpathValue = document.getElementById("<&#37;=vpathParam%>").value;
 [/CODE]

At this point you've not assigned the "path" parameter value to the hidden field, so vpathValue will be empty

First you need to do a[CODE]document.getElementById("<%=vpathParam%>").value = path;[/CODE]Your whole function should really only be:

[CODE]            function submit_to_list_file_portlet(path)
 {
 document.getElementById("<%=vpathParam%>").value = path;
 
   var form = document.form.corp_customer_list_files_portlet_form;
   form.submit();
   } [/CODE]

@ctreptowauthorOct 02.2009 — #

[CODE]            function submit_to_list_file_portlet(path)
 {
 var vpathValue = document.getElementById("<%=vpathParam%>").value;
 [/CODE]

[CODE]            function submit_to_list_file_portlet(path)
 {
 document.getElementById("<%=vpathParam%>").value = path;
 
   var form = document.form.corp_customer_list_files_portlet_form;
   form.submit();
   } [/CODE]

[/QUOTE]

Thanks for the help. Using your suggested function produces this in IE:

Error: 'document.form.corp_customer_list_files_portlet_form' is null or not an object

In FF, clicking doesn't seem to do anything.

@slaughtersOct 02.2009 — #I should not have left the ".form" in when I did the copy/paste

Try:

var form = document.corp_customer_list_files_portlet_form;

or

var form = document.form['corp_customer_list_files_portlet_form']

@ctreptowauthorOct 02.2009 — #I should not have left the ".form" in when I did the copy/paste

Try:

var form = document.corp_customer_list_files_portlet_form;

or

var form = document.form['corp_customer_list_files_portlet_form'][/QUOTE]

Whoa...didn't make it out here quickly enough. document.form needed to be document.forms.

At least that allows it to work in FF.

IE still tells me "Object doesn't support this property or method" on the form.submit(); line.

@slaughtersOct 02.2009 — #Just realized - "form" is a reserved word. Calling your variable "form" may be what is causing your submit problem. Change it to something like "myForm", or "thisForm", or just delete that whole line and just do a document.corp_customer_list_files_portlet_form.submit();

P.S.

I typically just avoid all the confusion by assigning the form tag an ID and use that

<form id="blahblah"...>

</form>

var myForm = document.getElementById('blahblah');

myForm.submit();

@ctreptowauthorOct 02.2009 — #Odd. IE still complains about the submit line:

[CODE]            function submit_to_list_file_portlet(path)
 {
 document.getElementById("list_files_portlet_vpath").value = path;
 
   //var myForm = document.forms.corp_customer_list_files_portlet_form;
   //myForm.submit();
   corp_customer_list_files_portlet_form.submit();
   return false;
   }[/CODE]

FF still works.

Perhaps there is some weird issue with IE6?

Also in #JavaScript _↴

I'm a bit lost with javascript : )Link Properties Update name with 2 selection lists

Success!

Help @ctreptow spread the word by sharing this article on Twitter...

Tweet This

Getting value of input field on form

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Getting value of input field on form

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴