Prevent page refresh and submit form data

Question

So I am trying to submit form data but do not want the page to change/refresh. At the sametime I want a jquery dialog to pop up when it has completed.

This is my original:

 <script>
  $( function() {
    $('#dialog-message').dialog({
      autoOpen: false,
      title: 'Basic Dialog'
    });



 $( "#subbutton" ).click(function( event ) {
       event.preventDefault();

       $.post("formaction.php",function(){
         $('#dialog-message').dialog('open');
         return false;
     });
 });
  });
  </script>

This submits blank data to the DB but it does insert a new row. Removing event.preventDefault(); submits all data but the page changes to formaction.php .

I tried to do polling but I am not really sure how to do it right. I will supply that code in a few as its on a different computer.

$( function() {
    $('#dialog-message').dialog({
      autoOpen: false,
      title: 'Basic Dialog'
    });

  });

    $( "#subbutton" ).click(function( event ) {
      $('#dialog-message').dialog('open');

      event.preventDefault();

      $(function poll(){

        setTimeout( function(){

          $.ajax({
            type:'POST',
            dataType: 'json',
            url:'formaction.php',
            success: function(data){

            },
            complete: poll
          }),
        },
        5000);

      })


      /*
      $.post("formaction.php",function(){
      return false;
    });
    event.preventDefault();
    */
  });
  poll();

Adding form for more detail

<div id="lostForm">
      <form name="lostForm" method="post" action="formaction.php" enctype="multipart/form-data">
        <h1> Owner Information</h1>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="firstname"  placeholder="First name" required>
        <br>  <br>
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lastname"  placeholder="Last name" required>
        <br>  <br>
        <label for="mnumber">Mobile</label>
        <input id="mnumber" name="mobilenumber"  placeholder=" (###)###-####" required>
        <br>  <br>
        <label for="email">Email</label>
        <input type="text" id="email" name="email"  placeholder="email@example.com" required>
        <br>
        <br>
        <hr>
        <h1> Pet Information </h1>

        <br>
        <label for="pname">Pet Name</label>
        <input type="text" id="pname" name="petname" placeholder="Pet Name" required>
        <br> <br>
        <label for="petgen">Pet Gender</label>
        <select name="petgen" id="petgen" required>
          <option value="male"> Male </option>
          <option value="female"> Female </option>
        </select>
        <br> <br>
        <label for="pname">Pet Age</label>
        <input type="text" id="page" name="petage" placeholder="How old is your pet?" required>
        <br> <br>
        <label for="primary">Primary Color</label>
        <select name="color1" id="primary" required>
          <option value="black"> Black </option>
          <option value="brindle"> Brindle </option>
          <option value="cream"> Cream </option>
          <option value="red"> Red </option>
          <option value="white"> White </option>
          <option selected="selected" value="none"> --none-- </option>
        </select>
        <br> <br>
        <label for="secondary">Second Color</label>
        <select name="color2" id="secondary" required>
          <option value="black"> Black </option>
          <option value="brindle"> Brindle </option>
          <option value="cream"> Cream </option>
          <option value="red"> Red </option>
          <option value="white"> White </option>
          <option selected="selected" value="none"> --none-- </option>
        </select>
        <br> <br>
        <label for="markings">Markings</label>
        <input type="text" id="markings" name="marking" placeholder="Indetifiable Markings" optional>

        <br><br>

        <label for="fileToUpload">Upload Image:</label>
        <br>

        <input id="fileToUpload" type="file" name="fileToUpload">
        <br>
        <br>
        <hr>
        <h1> Location Lost </h1>
        <div id="locationField">
          <input id="autocomplete" placeholder="Enter your address"
          onFocus="geolocate()" type="text"></input>
        </div>

        <table id="address">
          <tr>
            <td class="label">Street address</td>
            <td class="slimField"><input class="field" id="street_number"
              disabled="true" name="streetAdd"></input></td>
              <td class="wideField" colspan="2"><input class="field" id="route"
                disabled="true"></input></td>
              </tr>
              <tr>
                <td class="label">City</td>
                <td class="wideField" colspan="3"><input class="field" id="locality"
                  disabled="true" name="city"></input></td>
                </tr>
                <tr>
                  <td class="label">State</td>
                  <td class="slimField"><input class="field"
                    id="administrative_area_level_1" disabled="true" name="state"></input></td>
                    <td class="label">Zip code</td>
                    <td class="wideField"><input class="field" id="postal_code"
                      disabled="true" name="zip"></input></td>
                    </tr>
                    <tr>
                      <td class="label">Country</td>
                      <td class="wideField" colspan="3"><input class="field"
                        id="country" disabled="true"></input></td>
                      </tr>
                    </table>


                    <button type="submit" value="Submit" name="submitbtn" id="subbutton">Submit </button>

                  </form>

You're asking for two different things: "Submit the form", but "don't refresh the page". In order to do this, you MUST use AJAX, otherwise you cannot send form data without refreshing the page. — random_user_name, Sep 07 '16 at 16:24
I tried following a tutorial and have been playing around with ajax. updating the original post now — Squeakasaur, Sep 07 '16 at 16:27

score 2 · Answer 1 · answered Sep 07 '16 at 16:27

2

Your ajax $.post() function is missing the data that you want to insert.

The easiest way to add that, is to serialize the form:

...
event.preventDefault();

$.post("formaction.php", $('form').serialize(), function(){
     $('#dialog-message').dialog('open');
});

Now all fields in the form element will be added to the post. If you have multiple forms, you can use the form's id to get the right one:

$.post("formaction.php", $('#your_form').serialize(), function(){
     $('#dialog-message').dialog('open');
});

answered Sep 07 '16 at 16:27

jeroen

91,079
21
114
132

I will give that a try (: – Squeakasaur Sep 07 '16 at 16:31
I tried this but it is still doing the same thing as before. Dialog box comes up, new row added in database, but no actual data. – Squeakasaur Sep 07 '16 at 16:46
I have added the form to the original post – Squeakasaur Sep 07 '16 at 16:51
@Squeakasaur This should work for a normal form. However, file uploads in ajax are a bit more complicated, see for example http://stackoverflow.com/a/10899796/42139 – jeroen Sep 07 '16 at 17:50
It only works if I remove event.preventDefault(); . If I do this, the popup appears but then goes to the php page which I dont want it to. – Squeakasaur Sep 07 '16 at 17:59

score 0 · Answer 2 · answered Sep 07 '16 at 16:28

0

Use ajax for this.

$.ajax({
          type: "POST",
          url:"<?php yourpage.php;?> ",
          data:your data,
          success: function(html){
           //show your message
          }
    });

answered Sep 07 '16 at 16:28

Ankneema

45
5

The OP is already using ajax, `$.post()` is a shorthand method for `$.ajax()`. – jeroen Sep 07 '16 at 16:29
so for the Success part, I want a jquery dialog box to pop up, but doing success: function(data){ $('#dialog-message').dialog('open'); } didn't work. I must be missing something – Squeakasaur Sep 07 '16 at 16:30
Maybe the function does not go through `sucess : function(data) { /* ... */ }`. Try putting an additionnal attribute after `success` like following : `error : function() { console.log('error'); }`. If it passes through error, you might want to debug your php file. – Anwar Sep 07 '16 at 16:40
From what I can tell, the php file is fine. The issue is that with preventDefault() the data doesn't actually make it. This is what a friend said :"so with prevent default, it basically makes it so you can't redirect. without it, what's occuring is your page is submitting before the AJAX call executes because it's Asynchronous what you need to do is, is submit your DB call and implement a polling action that queries your DB on every interval. Once it sees the record there. Redirect" but I am not sure how to do polling – Squeakasaur Sep 07 '16 at 16:57

score 0 · Answer 3 · answered Sep 07 '16 at 16:29

0

your going to need to use the :success callback function.

$.post( "test.php", { name: "John", time: "2pm" })
  .done(function( data ) {
    alert( "Data Loaded: " + data );
  });

answered Sep 07 '16 at 16:29

WhiskyTangoFoxtrot

1
1

score 0 · Answer 4 · answered Sep 07 '16 at 16:32

0

There's a simple solution to stop the redirection. Change the type of the button(#subbutton) add an attribute type="button"

answered Sep 07 '16 at 16:32

Salil Momin

361
3
11

Prevent page refresh and submit form data

4 Answers4