Develop Reference

HTML Form Value = Javascript variable

I want to display "something" on the HTML forms textbox
this value should be a javascript variable
var paramvalue = "something"
document.getElementById("client_id").value = paramvalue
<form action="login.php" method="post">
<input type="hidden" name="clientID" id="client_id" value="" />
<button>Login</button>
</form>

You have to put the script after the HTML, since when it is run, the input field doesn't exist yet, so it will return an error.
<form action="login.php" method="post">
<input type="hidden" name="clientID" id="client_id" value="" />
<button>Login</button>
</form>
<script type="text/javascript">
var paramvalue = "something";
document.getElementById("client_id").value = paramvalue;
</script>

var textbox = document.getElementById('client_id');,
then
textbox.value = paramvalue;
will work.
Your issue is you have type='hidden' where it should be type='text' because hidden will not be visible. You also need to change it to run onload so you replace the value on page load.
<script type="text/javascript">
function init(){
var paramvalue = "something"
document.getElementById("client_id").value = paramvalue
}
body.addEventListener("load", init);
</script>
<form action="login.php" method="post">
<input type="text" name="clientID" id="client_id" value="" />
<button>Login</button>
</form>
Alternatively, you can keep your code, change input type = "text" and just move your script below your HTML code/ Form, negating the need for the JS function and the event listener
The user could also do :
<input type="text" name="clientID" id="client_id" value="" onload="init()" />

displaytag table together with other page buttons in jsp

I'm writing an application in JSP and I'm trying to use display tag to display a table. I have a couple of buttons on the displayed page and the display tag table. The buttons work when I load up the application, but they stop redirecting to where they are supposed to once I click through the table pages. Here's the HTML code for the buttons:
<form action="index" method="post">
<input type="hidden" name="action" value="add">
<h3>Enter formula:</h3>
<input type="text" name="formula" id="formula"><br>
<label> </label>
<input type="submit" value="Insert" class = "button">
</form>
<br />
<h3>Or press Delete or Modify:</h3>
<form action = "index" method = "post">
<input type="hidden" name="action" value="delete">
<input type="submit" value="Delete" class = "button">
</form>
<label> </label>
<br />
<form action = "index" method = "post">
<input type="hidden" name="action" value="modify">
<input type="submit" value="Modify" class = "button">
</form>
And here's the table html:
<display:table name = "table" sort = "list" pagesize = "10" id = "table1" export = "true" >
<display:column property = "id" title = "ID" group = "1" sortable = "true" headerClass = "sortable" />
<display:column property = "formula" title = "FORMULA" group = "2" sortable = "true" headerClass = "sortable" />
<display:setProperty name = "export.excel.filename" value = "FormulasTable.xls" />
<display:setProperty name = "export.pdf.filename" value="FormulasTable.pdf" />
<display:setProperty name="export.csv.filename" value="FormulasTable.csv" />
<display:setProperty name="export.pdf" value="true" />
</display:table>

Change radio button value to the value of text input

I have this code which has a radio button. I want to get the value of the text box and set it as the value of the selected radio button.
HTML
<form action="add.php" id="registration" method="post" name='registration'
onsubmit="return formValidation();">
Monthly amount of<br>
<input id="300" name="amounts" type="radio" value="300"><label for="300">P
300.00</label><br>
<input id="amntother" name="amounts" type="radio" value="">P
<input disabled="disabled" id="otherAmount" name="amntotherSpecify" type=
"text" value=""><label for="amntother">(please specify)</label><br>
<button name="submit" style="width:305px" type="submit" value=
"Submit">ADD</button>
</form>
Javascript
window.onload = function() {
var promised = document.getElementsByName("amounts");
for (var i = 0; i < promised.length; i++) {
promised[i].onclick = function() {
var rads = this.form[this.name];
for (var i = 0; i < rads.length; i++) {
var textField = this.form[rads[i].value.toLowerCase() + "Amount"];
if (textField) textField.disabled = !rads[i].checked;
}
}
}
}

<form form="view" name='registration' method="POST" action="add.php" onSubmit="return formValidation();">
Monthly amount of</br>
<input type="radio" name="amounts" id="300" value="300" ><label for="300">P 300.00</label><br/>
<input type="radio" name="amounts" id="amntother" value="" >P<br/>
<input type="text" name="amntotherSpecify" id="otherAmount" value="" onchange="addValueToRadioBtn();"/><label for="amntother">(please specify)</label><br/>
<button type="submit" name="submit" value="Submit" style="width:305px">ADD</button>
<script>
function addValueToRadioBtn() {
if (document.getElementById("amntother").checked == true){
document.getElementById("amntother").value = document.getElementById("otherAmount").value;
}
//added an alert box just to test that the value has been updated
alert(document.getElementById("amntother").value);
}
</script>
I have removed the disabled value so that a value can be entered, on change of this value and if the radio button (otheramount) is selected then other amount value will reflect the value that was entered in the textbox.
Just to note that if you disable the text then no user will be able to add a value. If this isn't what you are looking for could you explain in more detail as to how the textbox will be populated and more in what you are trying to achieve.
Anyway hope this script helps

You don't specify formValidation or add.php. If all you want to do is add the specified value as an option, you don't need to call back to the server to do that. Just update the form with the new option:
html
<form form="view" name='registration' method="post" action="add.php" onsubmit="return formValidation();">
<div id="amountOptions">
Monthly amount of</br>
<input type="radio" name="amounts" id="opt300" value="300" ><label for="opt300">P 300.00</label><br/>
</div>
<input type="text" name="amntotherSpecify" id="newvalue" value=""/>
<input type="button" id="btnNewValue" value="Specify your own amount"/>
</form>
javascript
var btnNewValue = document.getElementById('btnNewValue');
btnNewValue.addEventListener('click', function()
{
var div = document.getElementById('amountOptions');
var newAmount = document.forms[0].amntotherSpecify.value;
var optCheck = document.getElementById('opt'+newAmount);
if(optCheck !== null)
return;
var newopt = document.createElement('input');
newopt.type = 'radio';
newopt.id = 'opt'+newAmount;
newopt.name = 'amounts';
newopt.value = newAmount;
var newoptLabel = document.createElement('label');
newoptLabel.for = newopt.id;
newoptLabel.innerHTML = 'P ' + newAmount;
var br = document.createElement('br');
div.appendChild(newopt);
div.appendChild(newoptLabel);
div.appendChild(br);
var newAmount = document.forms[0].amntotherSpecify.value = '';
});
Here's a fiddle to demonstrate it in action. You'll want to add in validation that the new option's value is a number and fits whatever constraints you have.
It's important that you note that according to the html spec, ids cannot start with a number, in fact they must start with a character in the range a-zA-Z.

how about this option...
Slight modification to HTML - extra button, extra label tag
HTML
<form form="view" name='registration' method="POST" action="add.php" onSubmit="return formValidation();">
Monthly amount of</br>
<input type="radio" name="amounts" id="300" value="300" ><label for="300">P 300.00</label><br/>
<input type="radio" name="amounts" id="amntother" value="" ><label id="labelamntother" for="amntother">P</label>
<input type="text" name="amntotherSpecify" id="otherAmount" value="" /><label for="amntother">(please specify)</label><br/>
<button type="button" name="reset" value="Reset Value" style="width:305px" onclick="location.reload(true)">Reset Radio Button Value</button>
<button type="submit" name="submit" value="Submit" style="width:305px">ADD</button>
</form>
Javascript
<script>
document.getElementById("otherAmount").onkeyup = function() {
document.getElementById("labelamntother").innerHTML ="P " + this.value;
}
</script>

Submitting forms and processing

I need to be able to have one submit button for multiple forms. I only took two forms from my coding for the sake of simplicity. Each form has its own unique ID, but each form is very much identical to one another save a few discrepancies. My problem is only the first form is submitted successfully. I realize the reason for that is my input fields have the same name in each and every form so it will not recognize a duplicate input field currently. Is there a way that each field can be submitted successfully even though the input fields are the same, I hope that with help I will be able to submit both 'input_1' values and process it as 'form1:input_1' and 'form2:input_1' respectively.
Thank you very much in advance
<body><form name="form1">
<input type="hidden" name="formID" value="form2"/>
<input type="hidden" name="redirect_to" value=""/>
<INPUT TYPE=TEXT NAME="input_1" SIZE=10 />
<INPUT TYPE=TEXT NAME="input_A" SIZE=15>/<INPUT TYPE=TEXT NAME="input_C"style="width: 1em" maxlength="1"><sup>s</sup>
<INPUT TYPE=TEXT NAME="input_B" SIZE=10 />
<INPUT TYPE="button" VALUE="+" name="SubtractButton" onkeydown="CalculateIMSUB(this.form)">
<INPUT TYPE=TEXT NAME="Answer" SIZE=12>
<input type="hidden" name="val" value="298" />
<INPUT TYPE=TEXT NAME="Answer_2" SIZE=4></form>
<form name="form2">
<input type="hidden" name="formID" value="form2"/>
<input type="hidden" name="redirect_to" value=""/>
<INPUT TYPE=TEXT NAME="input_1" SIZE=10 />
<INPUT TYPE=TEXT NAME="input_A" SIZE=15>/<INPUT TYPE=TEXT NAME="input_C"style="width: 1em" maxlength="1"><sup>s</sup>
<INPUT TYPE=TEXT NAME="input_B" SIZE=10 />
<INPUT TYPE="button" VALUE="+" name="SubtractButton" onkeydown="CalculateIMSUB(this.form)">
<INPUT TYPE=TEXT NAME="Answer" SIZE=12>
<input type="hidden" name="val" value="298" />
<INPUT TYPE=TEXT NAME="Answer_2" SIZE=4></form>
<input type="submit" name="Submit" id="button" value="Submit" onClick="submitAllDocumentForms()"></body>
Javascript code:
<script language="javascript" type="text/javascript">
/* Collect all forms in document to one and post it */
function submitAllDocumentForms() {
var arrDocForms = document.getElementsByTagName('form');
var formCollector = document.createElement("form");
with(formCollector)
{
method = "post";
action = "process.php";
name = "formCollector";
id = "formCollector";
}
for(var ix=0;ix<arrDocForms.length;ix++) {
appendFormVals2Form(arrDocForms[ix], formCollector);
}
document.body.appendChild(formCollector);
formCollector.submit();
}
/* Function: add all elements from ``frmCollectFrom´´ and append them to ``frmCollector´´ before returning ``frmCollector´´*/
function appendFormVals2Form(frmCollectFrom, frmCollector) {
var frm = frmCollectFrom.elements;
var nElems = frm.length;
for(var ix = nElems - 1; ix >= 0 ; ix--)
frmCollector.appendChild(frm[ix]);
return frmCollector;
}
</script>

name is not a standard attribute for the form tag. I suggest that you use id for identiying your forms.
I have not tested the below changes, but I expect them to work:
function appendFormVals2Form(frmCollectFrom, frmCollector) {
var currentEl;
var frm = frmCollectFrom.elements;
var nElems = frm.length;
for(var ix = nElems - 1; ix >= 0 ; ix--) {
currentEl = frm[ix];
currentEl.name = frmCollectFrom.name + ':' + currentEl.name;
frmCollector.appendChild(currentEl);
}
return frmCollector;
}

Disable "Browse" button if the radio button isn't selected

<form action="" method="post" name="site_avatar" id="avatar" enctype="multipart/form-data">
<input type="radio" name="avatar" value="gravatar" />
<input type="radio" name="avatar" value="local" />
<input size="25" name="file" type="file" />
<input name="site_avatar" type="submit" value="Submit" />
</form>
This is my form with two radio buttons and one image upload field. I want to keep the "Browse" button disabled if the second radion button isn't selected (with the value "local").
Can anyone please help?

[See it in action]
Javascript
var form = document.getElementById("avatar");
var second = form.getElementsByTagName("input")[1];
var file = document.getElementById("file");
form.onchange = function() {
if (second.checked) {
file.disabled = false;
} else {
file.disabled = "disabled";
}
};
HTML
<input size="25" name="file" id="file" type="file" />
I would suggest you revisiting the names & ids in the form btw, because they are kinda messed up. :)