I have the following HTML:
<body>
<form action="/test/interop/InteropServlet" method="post" id="formTester" name="formTester">
<input type="hidden" name="ApiName" value=""/>
<input type="hidden" name="test.userId" value="admin"/>
<input type="hidden" name="test.password" value="admin"/>
<input type="hidden" name="test.progId" value="CustomTester"/>
<input type="hidden" name="InteropApiData" value=""/>
<input type="hidden" name="TemplateData" value=""/>
and I would like to use Javascript to get these hidden values and set them on clicking a button. I have the following Javscript method:
function callAPI(myform) {
saveCookies();
myform.ApiName.value=document.getElementById("traceName").value;
myform.TemplateData.value=document.getElementById("templateXMLText").value;
myform.test.userId.value=document.getElementById("userIDText").value;
myform.test.password.value=document.getElementById("passwordText").value;
myform.action="http://"+document.getElementById("urlText").value + "/test/interop/InteropHttpServlet";
myform.submit();
}
and this works for the hidden inputs that do not have a period in the name (ie test.userId, test.password) as I get the error "Error: TypeError: myform.test is undefined". I am unable to rename these hidden inputs due to the fact I do not maintain the code I am calling out to and the variables must be named this.
Is there any way I can read hidden inputs that have a period in the name from a form?
I have the following HTML:
<body>
<form action="/test/interop/InteropServlet" method="post" id="formTester" name="formTester">
<input type="hidden" name="ApiName" value=""/>
<input type="hidden" name="test.userId" value="admin"/>
<input type="hidden" name="test.password" value="admin"/>
<input type="hidden" name="test.progId" value="CustomTester"/>
<input type="hidden" name="InteropApiData" value=""/>
<input type="hidden" name="TemplateData" value=""/>
and I would like to use Javascript to get these hidden values and set them on clicking a button. I have the following Javscript method:
function callAPI(myform) {
saveCookies();
myform.ApiName.value=document.getElementById("traceName").value;
myform.TemplateData.value=document.getElementById("templateXMLText").value;
myform.test.userId.value=document.getElementById("userIDText").value;
myform.test.password.value=document.getElementById("passwordText").value;
myform.action="http://"+document.getElementById("urlText").value + "/test/interop/InteropHttpServlet";
myform.submit();
}
and this works for the hidden inputs that do not have a period in the name (ie test.userId, test.password) as I get the error "Error: TypeError: myform.test is undefined". I am unable to rename these hidden inputs due to the fact I do not maintain the code I am calling out to and the variables must be named this.
Is there any way I can read hidden inputs that have a period in the name from a form?
Share Improve this question asked May 15, 2013 at 14:11 MattMatt 2,6734 gold badges32 silver badges46 bronze badges 1-
You should look into
.querySelector(). It would much easier to just use:myform.querySelector('input[name="test.userId"]').value="whatever";for example. developer.mozilla/en-US/docs/DOM/Element.querySelector – Ian Commented May 15, 2013 at 14:15
2 Answers
Reset to default 3Another option, preferable in my opinion, is to use querySelector() to get the specific element:
myform.querySelector('input[name="test.userId"]').value="whatever";
DEMO: http://jsfiddle/xjG6W/
For visual purposes, in the demo I changed test.userId to be type="text". Type in the second textbox and click the button - it will change the first textbox's value (really, it's a hidden input).
References:
- https://developer.mozilla/en-US/docs/DOM/Element.querySelector
Use the square bracket notation for accessing elements with a period in the name. For ex:
myform['test.userId'].value
In your case, this would bee:
...
myform['test.userId'].value=document.getElementById("userIDText").value;
myform['test.password'].value=document.getElementById("passwordText").value;
...