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">?
Related
I am trying to data bind a form element in knockout.js. However I don't want the element to be editable in the form, or even display the element to the user.
I'm able to correctly data-bind the value to an input element. But I would prefer if I could just pull the value from the HTML or a labels text, or a span. So the below works, but I'm not able to change it so it's not an input that the user can change.
<input id="txtProvider" name="txtProvider" type="text" data-bind="value: $root.session().Resource().provider" />
I tried just using a hidden element with a placeholder, but this didn't work.
<input id="txtProvider" name="txtProvider" type="hidden" placeholder="WebEx" data-bind="value: $root.session().Resource().provider" />
Any suggestions?
Thanks in advance for the help.
What you're doing works, or should work, fine:
<form>
<input type="hidden" data-bind="value: myHiddenVal" />
</form>
function ViewModel() {
self.myHiddenVal = ko.observable('Foo');
}
ko.applyBindings(new ViewModel());
This will yield:
<input type="hidden" data-bind="value: myHiddenVal" value="Foo">
Example: https://jsfiddle.net/thebluenile/myves32x/
Though I have to say, I of course don't know your exact use case, but "pulling values from HTML elements" is sort of antithetical to how Knockout, or any other data binding framework, works. If the user doesn't have to edit the field you can just keep it out of the UI altogether. The only valid use case for hidden elements I can think of would be if you were submitting the form to a server side script for processing, instead of sending its contents via AJAX.
I have these inputs that take the values of a from a in my table when I click on a row. I want to make it so that the user cannot change the input themselves but want to bring values into them when a user clicks a table row. I will be passing these inputs in as a form. I know that when the input is like this:
that it will not be updated. Is there any other way to do it with an input. Is there a different type of tag I can use that can be passed through a form?
Rather than a read-only <input>, I'd go with a combination of a display element and a hidden form element. Something like:
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="hidden" />
And in the code update both:
$('#my-display').text(yourValue);
$('#my-input').val(yourValue);
You can style the display to the user however you like and don't have to worry about whether or not it "de-activates" the form input.
If you really want it to be an inactive input, you can use the same approach:
<input class="my-input" type="text" disabled />
<input class="my-input" type="hidden" name="my-input" />
Which may even save you a line of code here, since both can now use .val():
$('.my-input').val(yourValue);
Try disabled keyword as here
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="text" disabled/>
You can change the value by javascript as below:
document.querySelector('#my-input').value = 'the value you want to enter by javascript';
I have a checkbox and a few input elements related to this checkbox as shown below
<input name="balanceFeaturesOn" id="balanceFeaturesOn" type="checkbox" disabled="disabled" checked="" />Control
<input name="IntervalDays26566521" type="Text" onclick="" onchange="" value=" 31 ">
<input name="IntervalHours26566521" type="Text" onclick="" onchange="" value=" 12 ">
For some reasons, I will have to keep my checkbox always disabled.
On the submit of above form (Say that the checkbox and inputs are inside a form), in the server code, I want to grab the text inputs based on if the checkbox was checked/unchecked. However since the checkbox is disabled, the request parameter does not contain the balanceFeaturesOn property.
So when I execute the below line:
String[] balanceFeatArr = request.getParameterValues("balanceFeaturesOn");
I am not getting any value...
So my question is how do I be able to get the value of the checkbox while still keeping it disabled on the UI?
Try the following code,
In the form use javascript function to submit the form,
<input type='submit' onclick='javascript:submitMe()' />
Javascript function,
function submitMe(){
$('#balanceFeaturesOn').removeAttr('disabled');
$('#formId').submit(); //Replace with the actual id of the form
}
Make sure you have included jquery library in your code.
Use Hidden Fields.
Hidden fields are similar to text fields, with one very important difference!
The difference is that the hidden field does not show on the page. Therefore the visitor can't type anything into a hidden field, which leads to the purpose of the field:
To submit information that is not entered by the visitor.
http://www.echoecho.com/htmlforms07.htm
<input type="radio" name="radiobutton" id="1_1 value="1. Жетоны" "/>
<select id="1_1" onchange="document.GetElementById(this.id).checked=true;">
How come when I change option of select, radio isn't checked?
Thanks for carefuly!
But there is something else wrong, because it does not work too:
<input type="radio" name="radiobutton" id="1_1" value="1. Жетоны" "/>
<select name="1_1" onchange="document.GetElementById(this.name).checked=true;">
Thanks to shashi!
There are two things wrong:
- Your input tag is invalid HTML - it's missing a closing double-quote on the id attribute's value, and you have an out-of-place double-quote at the end of the tag.
- It looks like you're trying to use the same id for both the input and select tag. You can't do that; their ids must be different.
Replace,
document.GetElementById(this.id) with document.getElementById(this.id);
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById
Element IDs must be unique in a page, however element names can be repeated. Also, form controls must have a name to be successful (i.e. be submitted to the server).
So you can fix the problem by using references to form controls (and fixing the markup):
<form>
<input type="radio" name="radiobutton" id="1_1" value="1.blah">
<select name="whatever" id="1_1" onchange="this.form.radiobutton.checked=true;">
<option>0
<option>1
</select>
<input type="reset">
</form>
Note that you need a reset button, otherwise it's impossible to uncheck the radio button without reloading the page (or the user running a script).
I'm new at JavaScript and I need some help to submit my form when anyone select anything from the dropdown list. Here is the sample code :
<form action="" method="post">
<select name="car" onChange="this.form.submit()">
<option value="car1">car1</option>
<option value="car1">car1</option>
<option value="car1">car1</option>
</select>
<!-- Some other code -->
<input type="submit" name="sentvalue">
</form>
This is my form and when anyone selects the dropdown, the form automatic submit but I also need the sentvalue when automatic submit the form. So can anyone help me to capture the sentvalue when anyone select the dropdown.
If you want to send any other data with the form submit you can send it in hidden inputs
<input type='hidden' name='data1' value='Test1' />
<input type='hidden' name='data2' value='Test2' />
//etc
And if you want the value of submit button with the form just set the value attribute into your code for submit button every this else seems fine,
<input type="submit" name="sentvalue" value="Test1" />
Hope this answers your question
Just give the <input> tag a name
<input name="submitbtn" type="submit" value="sentvalue" />
then you can get it by $_POST['submitbtn'] in case of PHP which value is "sentValue"
It sounds like you want the value of the input field (sentvalue) to be submitted as well. But how do you guarantee that the value was specified by the user? Is this supposed to be a hidden input field?
Either way your input tag is incomplete. This sounds better:
<input type="text" name="sentvalue"></input>
Also, when you submit, the value of this field (sentvalue) will be passed in too. As long as your tags are right you don't need to worry.
You will have to create a hidden input element
<input type='hidden' id='sentvalue' value='' />
and call a function on submit instead of directly submitting
Use this in the function to set the values and submit
var e = document.getElementByName("car");
document.getElementById("sentvalue").value = e.options[e.selectedIndex].value;
this.form.submit();