Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 264
  • 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 DeveloperCommented:
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 DeveloperCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

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