Prevent form submission and get all the elements with a specific class in jquery

StackOverflow https://stackoverflow.com/questions/20115028

Question

I have a form something like below

<html>
  <script>
     $(document).ready(function(){
         // find all the hidden input elements with error_check class
         var error_elements = $('.error_check')

         // Loop through each element find if the value equals 'california'
             error_elements.each(function(){
                      if (element.value == 'california')
                             // prevent for submission and display alert
                             alert("cannot submit tax for this state")
                      else 
                          // submit form

               });
     )};
  </script> 
  <body>
    <form action="{% url 'collect_salextax' %}" method="POST" id="states_form"  class="form-horizontal">
      <div class="control-group">
         {% for state in states %} 
           <p>
                <input id="error_{{state.0}}" type="hidden" name="{{state.0}} value="{{state.name}}" class="error_check"/>
                <input id="{{state.0}}" type="text" name="{{state.0}}" class="value_check"/>
           </p>
         {% endfor %} 
      </div>
      <div class="span11 pagination-centered marg_tp38">
           <input name="" type="submit" class="btn btn-large big_btn " value="Submit">
      </div>                          
    </form>
  <body>
</html>

So from the above as u can see i am generating the fields in a paragraph using a loop, and the value of hidden field will be state name from the array/list

So when i click on the submit button, its successfully going to form action attribute and returning the result

So can anyone please let me know how to do this very clearly in jquery ?

But what i am trying is, when a user clicks on submit button

  1. I need to get all the hidden input elements with class error_check
  2. Loop through the elements and find the value of each element, if the element value name is equal to "California", then display an alert like "You cannot submit tax for california"
  3. Else submit the form to action attribute
Was it helpful?

Solution

you can do it like this:

$("#states_form").submit(function(event) {
    $(".error_check").each(function(idx, obj) {
        if ($(obj).val() == 'california') {
            alert("cannot submit tax for this state");
            event.preventDefault();
            return false;
        }
        else {
            // submit form
            return true;
        }
    });
});

OTHER TIPS

You should apply a submit even handler to your form. If something doesn't validate add a event.preventDefault() to make sure the form does not submit.

van $form = $('#myForm');
$form.on('submit', function () {
    // handle submit
});

you can try this

$('#myForm').on('submit', function (e) {
    var allInputs = $('.error_check');
    for(var i=0; i<allInputs.length; i++) {
        if(allInputs[i].value == "California") {
            e.preventDefault();
            return;
        }
    }
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top