I am trying to set the value of a hidden form field with the value entered in a textfield when submitting my form.
I have tried combining the answers to various questions but the closest I have come is getting the 'id' of my source field - but not the value.
Text field name = wpcf-available-stock
Hidden field name = wpcf-total-stock
The hidden field simply needs to be set to the same value as the text field on form submit using Jquery?
I cannot seem to find a simple sample in other questions asked... thanks
To achieve expeccted result, use below
HTML:
<input type="hidden" name="wpcf-total-stock">
<input type="text" name="wpcf-available-stock" value="test">
JS:
$("input[name='wpcf-available-stock']").on('keyup',function(){
$("input[name='wpcf-total-stock']").val($(this).val());
alert($("input[name='wpcf-total-stock']").val());
});
Codepen- http://codepen.io/nagasai/pen/RRBwjA
First of all: Why would you fill a hidden form field from a text field when you're going to send it anyway?
Second, the jQuery looks like this:
var fieldValue = $('#wpcf-available-stock').val();
$('#wpcf-total-stock').val(fieldValue);
You can obviously chain that together, but this is pretty clean.
Here's a demo: https://jsfiddle.net/u5Lj8cLz/
Pure JavaScript solution.
updateHidden = function(x) {
document.querySelector("[name=bar]").value = x;
}
<input name="foo" value="" onchange="updateHidden(this.value)" type="text">
<input name="bar" value="sometext" type="hidden">
Update
updateHidden = function() {
document.querySelector("[name=bar]").value = document.querySelector("[name=foo]").value;
}
document.querySelector("[name=foo]").addEventListener("change", updateHidden);
/*
or,
document.querySelector("[name=foo]").addEventListener("keyup", updateHidden);
*/
<input name="foo" type="text">
<input name="bar" type="hidden">
Related
I have a form with many input fields and radio buttons.
Some fields must get the required - attribute. But which fields are required depends on which radio button has clicked.
(If "Company-email" is checked -> input field "Company email" is required, otherwise private email)
Initially all field should be required=false.
But that does not work. No matter which value I give to the required-attribute, required is always true.
So... how can I set an input-field initially to required=false?
EDIT:
Thank you all for your answers.
In fact nothing works.
I made a test html document like this:
function test2()
{
document.getElementById("33").attr("required");
}
<form method="post" action="#">
<input type="text" id="33">
<input type="text">
<input type="text">
<input type="text">
<input type="radio" onclick="test2()">
<input type="submit" value="send">
</form>
It's unbelievable but this very simple example does not work.
The field with id 33 is not a required-field.
I can submit the form and nothing is checked.
What is wrong here?
EDIT 2:
Now I found the solution:
function test2()
{
document.getElementById("33").required = true;
}
This works for me on my example page. I have to check if i really can work with that in my real project.
required is a boolean attribute, so no matter what value you give it will still be required.
Instead of setting attributes you can set the element property
document.getElementById('companyemail').required = false;
Remove the required attribute from the fields that are not required.
In HTML5, this is an example of how to use required:
<input type="text" name="name" required>
So chances are that even when setting it to false (or anything, in fact) would be considered true.
$(document).ready(function() {
$("#privateemail").attr("required");
$("#companyemail").removeAttr("required");
$('#checkbox1').change(function() {
if($(this).is(":checked")) {
$("#companyemail").attr("required");
$("#privateemail").removeAttr("required");
}
else{
$("#privateemail").attr("required");
$("#companyemail").removeAttr("required");
}
});
});
I hope this may help, let me know your feedback...
try to remove the required attributes
your-input.removeAttr( "required" );
I have a html form that has a hidden field. Upon hitting submit, I want the hidden field to be populated with the value entered in another field before it gets to form validation.Is there a way I can do that in Javascript?
HTML code:
<form>
Email: <input type="text" name="email"><br>
<input type="hidden" name="retype-email">
<input type="submit" value="Submit">
</form>
JSfiddle: http://jsfiddle.net/x1r8sunh/
Given the HTML you posted, this should work:
$('form').on('submit', function(e){
$('[name="retype-email"]').val($('[name="email"]').val());
});
Example Here
Pure JS option:
document.forms[0].addEventListener('submit', function(){
document.querySelector('[name="retype-email"]').value = document.querySelector('[name="email"]').value;
});
Example Here
You will probably want to use ids or classes to select the elements. The above JS will probably conflict with other elements - change accordingly.
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?
Another 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.net/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.org/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 become:
...
myform['test.userId'].value=document.getElementById("userIDText").value;
myform['test.password'].value=document.getElementById("passwordText").value;
...
Really new to using jQuery and trying to find an example I need.
1) if I have, say, 5 radio buttons to choose an item, how do I pass the selected item to a hidden form field?
2) same question for a textarea. How do I pass the text written to a hidden form field and make sure it's escaped safely for a form submission?
Thanks for any help.
You can just bind to the change event:
<input type="hidden" id="myradiovalue" />
<input type="radio" name="myradio" value="0" />
<input type="radio" name="myradio" value="1" />
$('input[name=myradio]').change(function() {
$('#myradiovalue').val($(this).val());
});
And almost the same for textarea:
<input type="hidden" id="mytextarevalue" />
<textarea id="mytextareavalue"></textarea>
$('textarea').change(function() {
$('#mytextareavalue').val($(this).val());
});
For both <input type="radio"> and <textarea>, you will want to use jQuery change() method. If you want to sanitize the input before it is inserted into a <input type="hidden"> then you will need to use some regex or a library that does it for you, like jQuery Validation Plugin. Keep in mind that any sanitation/validation you do with javascript/jQuery will need to be double-checked server-side after the form is submitted.
But I don't know why you are copying data from one form input to another, can't you just use the form input as it is? What is the point of having the data in both a <textarea> and a <input type="hidden">?
I have a hidden input in the manner below:
<div id="message">
<input id="hiddeninput" type="hidden">
<span>Message with submit button <input type=button id="confirm" value="Submit"></span>
</div>
The hidden input is given a value after a jQuery POST. I need to retrieve the value that is set, and send it in another jQuery POST.
Interestingly, I get this:
<input id="hiddeninput" type="hidden">34345</input>
after fetching the value from the server in the first jQuery post.
Just $("#hiddeninput").val() does not retrieve the value which I want to send.
What is the correct way to do it in my example?
EDIT: In JQuery, This is how I set the value to the hidden field:
$.post("post.php", function(data){
if(data.length > 0){
var resultObj = eval(data)[0];
if(resultObj.SomeNumber >= 0)
{
$("#hidden").html(resultObj.SomeNumber);
}
});
You have to set the value of the hidden field like this, then it should work
<input id="hiddeninput" type="hidden" value="34345" />
The hidden element
<input id="hiddeninput" type="hidden">
does not have the value attribute. It should be like
<input id="hiddeninput" type="hidden" value="someValue">
$("#hiddeninput").html() would retrieve 34345 from the structure as you show although as stated above the value attribute should be used on a hidden field and then val() will work.
Since <input id="hiddeninput" type="hidden">34345</input> is not the "right" way to format the input tag,a s opposed to <input id="hiddeninput" type="hidden" value="34345"/> you need to use $("#hiddeninput").text()
try explicitly adding the value tag to the input elemeent before the post adds it i.e.
<input id="hiddeninput" type="hidden" value="">
If that doeesn't work have a look at this thread:
jquery selector can't read from hidden field