CODEWITHSUNDEEP
jqueryhtmlforms
MAO
MAO

Reputation: 81

Jquery Does not submit the form

Here is my form 

<form method="post" accept-charset="utf-8" id="ProductReg">
       <div class="card-body">
          <div class="row">
              <div class="col-lg-4">
                   <div class="sub-title">Name of Product</div>
                   <div><input type="text" name="ProductName" class="form-  control" placeholder="This field is required" required>
                   </div>
              </div>
                  <div><input type="button" class="btn btn-primary btn-block" name="submit" Value="Register" data-toggle="modal" data-target="#modalPrimary"></div>
          </div>
     </div>
</form>

And Here is the modal Which triggers when I Click The Above input Button

<div class="modal fade modal-primary" id="modalPrimary" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Product Registration</h4>
        </div>
        <div class="modal-body">
            Do You Really Want To Register This Product????
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" id="SumitTheForm" class="btn btn-primary">Yes</button>
        </div>
    </div>
</div>

When I Click The Modals' No Button It cancels but the thing which I want is TO SUBMIT THE FORM WHEN I CLICK THE MODALs' YES BUTTON I Tried This By using jquery But It didn't work

$('#SumitTheForm').click(function() {
    $('#ProductReg').submit();
});

NOTE: I placed the modal at the end of my document, even After The script links (I think It is The right place, If not tell me plzz)

Upvotes: 1

Views: 80

Answers (3)

Marvin Medeiros
Marvin Medeiros

Reputation: 252

You can atatch the event to the document, so you dont need to wait for the document is ready.

$(document).on('click', '#SumitTheForm', function() {
  $('#ProductReg').submit();
});

Upvotes: 0

daniellalasa
daniellalasa

Reputation: 529

Use document ready :

$('document').ready(fucntion(){
     $('#SumitTheForm').click(function() {
         $('#ProductReg').submit();
     });
});

Or you can try AJAX for submitting your data .

Upvotes: 0

mhodges
mhodges

Reputation: 11116

As per my comment. Try wrapping your jQuery code in the document ready function. This makes sure to wait until the DOM is loaded before trying to bind events handlers to elements. Not doing this can cause issues because if the javascript tries to bind the event to an element before it exists, it will not work.

$(function () {
  $("#SubmitTheForm").on("click", function () {
    $("#ProductReg").submit();
  });
});

Upvotes: 3

Related Questions