Loop through visible input elements in a form in Javascript? - javascript

I'm trying to loop through all visible inputs within a form and set their value to be empty. What I have doesn't seem to work for text inputs, it returns undefined. Any ideas how to do this?

jQuery has a :visible selector as well as an :input selector. In addition, most jQuery methods operate on the entire set. val() can be used directly rather than looping through the set.
currentForm.find(':input:visible').val('');

Textbox inputs would have a tagName of "textarea". Not sure why the other text types aren't working. Have you tried:
childs[i].values = '';
?

Related

I've problems to clear inputs text width jQuery

Well.... i've the next problem and i don't know for why....
I need clear some inputs, the value and text but the text in the input not clear.
My code:
$("#bloque-addDireccion").each(function(){
var input = $(this).find("input[name$='Mia']");
$(input).each(function(){
$(this).text("");
$(this).attr("value","");
});
});
I'm inspect the inputs and the value it's correct ("") but i've the older text always in the input.
What i'm do wrong?
The .text(text) method cannot be used on form inputs. To set the text value of input or textarea elements, use the .val(value) method.
please also check the Difference between val() and text()
try .val(value)
$(this).val("");
As others mentioned to change the value you need to do $(this).val("");.
Me being a beginner as well, my guess why .text() does not work is because as mentioned here: http://www.w3schools.com/tags/tag_input.asp, <input> does not have a text attribute, therefore at this example, $(this).text() seems to point at nothing.
Well... My solution: I chage the value in other javascript using .value("xxxxx"); to change the value and I change this for
.attr("value","xxxx");
And, when I try to reset/change next time the value, i'm using
.attr("value","xxxx");
and it's works....If put .val("xxx"); isn't works!
Thanks for all responses! :D

jQuery .find need to ensure that both requirements are met before proceeding using tab through

So I'm trying to tab between input fields and select fields in a sliding form. However, with the code that I have it skips over the last input field on the current section of the form or the last select field on the current section of the form, regardless of whether there is a select or input field respectively afterwards. I need the tab to make sure that there are no select fields after the last input field and vice versa. This is the code I have so far:
$(this).find('input:last,select:last').bind('keydown',function(e){
But I need to to function more like this:
$(this).find('input:last && select:last').bind('keydown',function(e){
But the above code is not possible. Any ideas?
Instead of using the :last selector, you need to use the .last() method:
$(this).find('input, select').last().bind('keydown',function(e){
Reference for learning: .last()
If I'm following correctly, perhaps jQuery's :input rather than each separately will work?
$(this).find(':input:last').bind('keydown', function(e) {
Try using the .add() method instead.
var $lastInput = $(this).find('input:last');
$lastInput.add($(this).find('select:last').bind('keydown', function(e) {

How to clear all inputs, selects and also hidden fields in a form using jQuery?

I would like to clear all inputs,
selects and also all hidden fields in a form.
Using jQuery is an option if best suited.
What is the easiest way to do this... I mean easy to understand and maintain.
[EDIT]
The solution must not mess with check-boxes (the value must remain, but checked state must be cleared), nor the submit button.
What I am trying to do is a clear button, that clears all the options entered by the user explicitly, plus hidden-fields.
Thanks!
You can use the reset() method:
$('#myform')[0].reset();
or without jQuery:
document.getElementById('myform').reset();
where myform is the id of the form containing the elements you want to be cleared.
You could also use the :input selector if the fields are not inside a form:
$(':input').val('');
To clear all inputs, including hidden fields, using JQuery:
// Behold the power of JQuery.
$('input').val('');
Selects are harder, because they have a fixed list. Do you want to clear that list, or just the selection.
Could be something like
$('option').attr('selected', false);
$('#formID')[0].reset(); // Reset all form fields
If you want to apply clear value to a specific number of fields, then assign id or class to them and apply empty value to them. like this:
$('.all_fields').val('');
where all_fields is class applied to desired input fields for applying empty values.
It will protect other fields to be empty, that you don't want to change.
I had a slightly more specialised case, a search form which had an input which had autocomplete for a person name. The Javascript code set a hidden input which from.reset() does not clear.
However I didn't want to reset all hidden inputs. There I added a class, search-value, to the hidden inputs which where to be cleared.
$('form#search-form').reset();
$('form#search-form input[type=hidden].search-value').val('');
for empty all input tags such as input,select,textatea etc. run this code
$('#message').val('').change();
You can put this inside your jquery code or it can stand alone:
window.onload = prep;
function prep(){
document.getElementById('somediv').onclick = function(){
document.getElementById('inputField').value ='';
}
}

get radio box value in jquery

Am I under the wrong impression that jquery or JS can retrieve the values of radio buttons in a form? The reason i ask is because in my code the script i use to check for all fields in a form, does not seem to recognise the value in id="contact2" in the form, which is a radio group. I have posted my code at jsfiddle.net and would appreciate some feedback as to how I can correct this. Many thanks
Fiddle: http://jsfiddle.net/xGrb9/
You need to do it like this:
$('input:radio[name=bar]:checked').val();
Because of how radio buttons are checked/unchecked and their values are stored. (from the jQuery docs). You also need to make sure that the radio buttons have different IDs, which is a classic gotcha.
Finally, when testing if a radio button has not been selected at all, make sure to test against undefined and not an empty string for compatibility across browsers.
EDIT: looked at your code, and you need to do two things:
1. Change IDs of the buttons, to something like "contact2a" and "contact2b" so they are unique.
2. Change your var customer2 = line to var contact2=$("input[name=contact2]:checked").val();
Change this line:
var contact2=$("#contact2").val();
to:
var contact2=$('input[name="contact2"]:checked').val();
You need the checked because otherwise it finds both inputs.
Also, technically, all IDs should be unique, ie, not used on 2 elements on the page.
You should be able to use .val()
See this: http://api.jquery.com/val/
Both of your radio buttons have the same ID. That doesn't work in HTML. You'll have to refer to the buttons separately and select the one that is checked.
You can simply call
$("[name=contact2]:checked").val()

Getting HTML with the data using jQuery

I have a form which has many elements (e.g. textarea, input, select), after users have entered some data the states of these elements should change.
For example, an input[type="radio"] element will have the attribute checked="checked" if a user has checked it. The value attribute of an input[type="text"] element will contain the text entered by user.
The problem is that the html string returned by $('#form1').html() does not contain these data.
Feel free to take a look at this example:
http://jsfiddle.net/cmNmu/
You can see that no matter what your inputs are, the html returned is still the same (having no attribute data).
Is there any easy way to collect the html including their states?
Thanks in advance.
use below code getting the value of input type text via jQuery
alert($("input:text").val())
Maybe you could use the 'onblur' event handler to set the value of the element when you leave it
You should get the value using :
$('#form1').find(':input').val();
$('#form1').find(':radio[name=gender]:checked').val();
if you have multiple input then you can filter them bu their name or class or even id. Then you will need to select input using .find(':input[name=input_field_name]'). My Suggestion is : use name property instead of other property if you want to use form.
People usually use $('#form1').serialize() to get the values. If html() doesn't return both the source and data, I don't think that there is something you can other than manually constructing the full html by looking at the data.
Live demo: http://jsfiddle.net/cmNmu/6/
By using the jQuery formhtml plugin written by gnarf:
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
The changes in the input elements can be reflected in the html string returned by formhtml().
Thank you very much everyone.

Categories