?
Solved

form submit not happening correctly

Posted on 2011-09-09
4
Medium Priority
?
257 Views
Last Modified: 2012-05-12
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
Comment
Question by:EddieShipman
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 40

Assisted Solution

by:Richard Quadling
Richard Quadling earned 400 total points
ID: 36511525
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 1600 total points
ID: 36511621
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
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 36511704
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
 
LVL 26

Author Closing Comment

by:EddieShipman
ID: 36512025
Good catch...
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question