Solved

form submit not happening correctly

Posted on 2011-09-09
4
249 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
  • 2
4 Comments
 
LVL 40

Assisted Solution

by:RQuadling
RQuadling earned 100 total points
Comment Utility
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
Comment Utility
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:RQuadling
Comment Utility
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
Comment Utility
Good catch...
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jQuery or CSS 9 37
JQuery & CSS Tab Issues 7 26
SharePoint Online Adding A People Picker to Search 14 20
Jquery autocomplete 10 17
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…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
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)

728 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now