CODEWITHSUNDEEP
javascriptjqueryajaxforms
adamdehaven
adamdehaven

Reputation: 5920

HTML Form Action - "Order of Operation"

I have an HTML form on my site that submits via Ajax to a php file after it is validated using jQuery. Here's the opening form tag:

<form action="#" method="post">

I was thinking of putting the path_to_process_file.php in the form action (as seen below) so that if they have JavaScript disabled in their browser, they will still be able to fill out and submit the form.

<form action="../path_to_process_file.php" method="post">

My QUESTION:

**UPDATE: Here's my JS used to submit via Ajax. 

$( document ).bind( "pageinit", function( event, data ) {
    $("#rackback-quote-request-form").validate({
        // Custom validation messages
        messages: { quote_name: "Please enter your full name."},
        errorElement: "p",
        submitHandler: function(form){

            //Get the data from the form fields and format correctly
            var product = $("#rackback-quote-request-form #product").val();


            var data = 'product=' + product;
            $.ajax({
              type: "POST",
              url: "../php/QR-rackback.php",
              data: data,
              success: function(data) { 
                      $("#rackback-quote-request-wrapper").hide();
                      $("#rackback-quote-request-success").append("<center><h3>Thanks! Your quote request has been sent.</h3></center>" );
                   },
              error: function(){
                  alert("Javascript error, please try again");
              }
            });
            return false;
         }
    });
});

Where would I put the event.preventDefault();?**

Upvotes: 2

Views: 826

Answers (2)

Nicol&#225;s Ozimica
Nicol&#225;s Ozimica

Reputation: 9758

JavaScript is first executed, and with it you have the possibility to supress the normal (HTML way) of sending the form.

There are many ways to do this depending on the framework you use, but with simple plain JavaScript you can follow these steps:

  • Attach a 'onSubmit' event to the form.
  • If you want to supress the "normal submission" (HTML way) of the Form, simply return false.

Upvotes: 2

Steve
Steve

Reputation: 8640

Well, your JS will need to attach to the submit event. In that event, you can prevent it from doing what it would naturally do, like this:

$('#form_id').submit(function(event) {
    event.preventDefault();
    // use jQuery's ajax() method here to do what you want
});

Upvotes: 4

Related Questions