Solved

form submit not happening correctly

Posted on 2011-09-09
4
256 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 100 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 400 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

Monthly Recap

May was a big month for new releases from Linux Academy! Take a look at what our team built recently in our blog. You can access the newest releases from our blog.

Question has a verified solution.

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

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
The viewer will learn how to dynamically set the form action using jQuery.
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…

705 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