How to iterate through only the text box elements in the form using jquery

Question

I have a form which contains 4 text fields when the button is clicked we should see that atleast one of the textfield should contain the value and the form should get submitted and the form also contains the Button which of input type too .I want only textbox field values

$("#mybutton").click(function(){

$(":input").each(function(){
  if($(this).value!=''){
    $("#myform").submit();

 }

});
});

Answer 1

Try this out. I've replaced your :input selector with :text to only get textboxes. Also you were calling .value on the jquery object rather than using the .val() method.

$("#mybutton").click(function() {
    $(":text").each(function() {
        if($(this).val() !='') {
            $("#myform").submit();
            return false;
        }
    });
});

Answer 2

Use the input:text selector to get all the textboxes.

$("input:text")

Answer 3

You can use :text for the selector, .filter() down to ones that have a value and check the .length, like this:

$("#mybutton").click(function(){
  if($(":text").filter(function(){ return this.value!=''; }).length)
    $("#myform").submit();
});

this checks if any aren't empty, and if that's the case, submits the form once.

---

And here's an alternative that checks on <form> submit, compliments of doug's comment:

$("#myform").submit(function(){
  if(!$(":text").filter(function(){ return this.value!=''; }).length)
    return false;
});

Answer 4

First, bind to form submit not button click. If a user hits enter/return in a field, it will submit your form without the checks:

$("form").submit(function (e) {
  var fields = $(this).find(':text'),
      cancel = true;

  fields.each(function (i, el) {
    if (el.value) {
      cancel = false;
      return false; // exit this loop
    }
  });

  if (cancel) {
    e.preventDefault(); // cancel submit since all fields are blank
  }      
});