Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 261
  • Last Modified:

form submit not happening correctly

Got this form:
      <div id="checkout-step-billing" class="step a-item">
        <h4>Enter the name and email of a person you'd like<br/>to purchase a registration for:</h4>
        <form class="voucher_form" id="voucher_form">
          <fieldset>
              <ul class="form-list">
                <li class="field">
                  <div class="field">
                    <label class="l1">Student Member #:</label>
                    <div class="input-box">
                      <input type="text" id="customer_id" name="customer_id" class="oblSomeoneElseCustID"/>
                    </div>
                  </div>
                </li>
                <Other form fields...>
                <li class="field">
                  <div class="field">
                    <label class="l1">Student Email:<em>*</em></label>
                    <div class="input-box">
                      <input type="text" id="SomeoneElseEmail" name="SomeoneElseEmail" class="validate[required,custom[email] oblSomeoneElseEmail"/>
                    </div>
                  </div>
                </li>
              </ul>
            </fieldset>
          <a href="#" class="btn btncenter oblsomeoneelsenext">Next</a>
          <div class='spinner'><img src='/images/grey_spinner.gif'></div>
        </form>

Open in new window

Now. I am submitting by clicking the Next button (anchor) like this:
    $('#checkout-step-billing a').click(function(){
      $('#checkout-step-billing .voucher_form').submit();
    });

Open in new window

And also have a submit function like this:
  $('#checkout-step-billing .voucher_form').submit(function(event){
    event.preventDefault();
    var email          = $('#checkout-step-billing .oblSomeoneElseEmail').val();
    var ParticipantID  = $('#checkout-step-billing .oblSomeoneElseCustID').val();
    /*
      Other form fields are assigned to variables here.
    */
    if (ParticipantID == ''){
      ParticipantID = '-1';
    }
    if (Last4SSN == ''){
      Last4SSN = '-1';
    }
    var valid = $('#checkout-step-billing .voucher_form').validationEngine('validate');
    if (valid){
      var url = AJAX_URL_ADDVOUCHER + '?&email=' + doUrlEncode(email)
        /*
          Other form fields are added to the URL here
        */
        + '&ParticipantID=' + doUrlEncode(ParticipantID);

      // AJAX call sends the data to the cart to add the voucher values.
      $.ajax({async: false, type:'POST',url: url, dataType: 'json', success: function(data){
        if(data.result=='success'){
          window.location = CART_URL; // const define at top of file
        } else {
          //display error
          $('#checkout-step-billing .error_message').html(data.message);
        }
      }});
    }
  });

Open in new window


The problem is that it never goes into the submit function AND, after the submit is called in the button's click() function,
the page refreshes with the values in the query string in the address bar.

What am I doing wrong here?
0
Eddie Shipman
Asked:
Eddie Shipman
  • 2
2 Solutions
 
Richard QuadlingSenior Software DeverloperCommented:
You are calling the submit event of the form. It is submitting. Just as if you had pressed an <input type="submit"> button.

From memory, calling the form's submit() method isn't the same as the onSubmit event fired by the form when a submit button is pressed.


0
 
leakim971PluritechnicianCommented:
replace you both jQuery code by the following :

$('#checkout-step-billing a').click(function(event){


    event.preventDefault();
    var email          = $('#checkout-step-billing .oblSomeoneElseEmail').val();
    var ParticipantID  = $('#checkout-step-billing .oblSomeoneElseCustID').val();
    /*
      Other form fields are assigned to variables here.
    */
    if (ParticipantID == ''){
      ParticipantID = '-1';
    }
    if (Last4SSN == ''){
      Last4SSN = '-1';
    }
    var valid = $('#checkout-step-billing .voucher_form').validationEngine('validate');
    if (valid){
      var url = AJAX_URL_ADDVOUCHER + '?&email=' + doUrlEncode(email)
        /*
          Other form fields are added to the URL here
        */
        + '&ParticipantID=' + doUrlEncode(ParticipantID);

      // AJAX call sends the data to the cart to add the voucher values.

// would be good to put a please wait animated gif in your page body <img id='pleasewait' src='http://sina16.book.cnhintl.com/images/wait.gif' style='position:absolute;top:100px:left:100px' />
// and use $("#pleasewait").fadeIn();

      $.ajax({async: false, type:'POST',url: url, dataType: 'json', success: function(data){
// and use $("#pleasewait").fadeOut();
        if(data.result=='success'){
          window.location = CART_URL; // const define at top of file
        } else {
          //display error
          $('#checkout-step-billing .error_message').html(data.message);
        }
      }});
    }



});

Open in new window


0
 
Richard QuadlingSenior Software DeverloperCommented:
What I didn't say was the calling the submit() method doesn't fire an onSubmit event, so you can't watch for the onSubmit event.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Good catch...
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now