Asked  7 Months ago    Answers:  5   Viewed   112 times

Can anyone tell me why this bit of code isn't working?

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      $(function () {
        $('form').bind('submit', function () {
          $.ajax({
            type: 'post',
            url: 'post.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
          return false;
        });
      });
    </script>
  </head>
  <body>
    <form>
      <input name="time" value="00:00:00.00"><br>
      <input name="date" value="0000-00-00"><br>
      <input name="submit" type="button" value="Submit">
    </form>
  </body>
</html>

When I push submit nothing happens. In the receiving php file I'm using $_POST['time'] and $_POST['date'] to put the data in a mysql query but it's just not getting the data. Any suggestions? I'm assuming it's something to do with the submit button but I can't figure it out

 Answers

24

The form is submitting after the ajax request.

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      $(function () {

        $('form').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
            type: 'post',
            url: 'post.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });

        });

      });
    </script>
  </head>
  <body>
    <form>
      <input name="time" value="00:00:00.00"><br>
      <input name="date" value="0000-00-00"><br>
      <input name="submit" type="submit" value="Submit">
    </form>
  </body>
</html>
Tuesday, June 1, 2021
 
OMGKurtNilsen
answered 7 Months ago
89

you have two issues.

  1. Ajax and serialize upload doesn't work with file upload. (Read this question and answer for async upload)

  2. jquery form serialize needs a name attribute. your select box (form-field-select-3) doesn't have a name attribute.

following is a note in jquery serialize documentation page -

Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

Wednesday, March 31, 2021
 
Pupil
answered 9 Months ago
87

As @David Knipe already said, you should wait for the DOM to be ready before trying to access one of its elements. Moreover, you likely have an e is undefined error, since you're not passing the event reference to the click handler:

<script>   //no need to specify the language
 $(function(){
  $("#submitbutton").click(function(e){  // passing down the event 

    $.ajax({
       url:'http://localhost:8888/index.php/trial/insert_into_db',
       type: 'POST',
       data: $("#myForm1").serialize(),
       success: function(){
           alert("success");
           $('#email').val('');
           $('#qText').val('');
       },
       error: function(){
           alert("Fail")
       }
   });
   e.preventDefault(); // could also use: return false;
 });
});
</script>

To be more complete, your query is vulnerable, and you might be getting an error there. Make use of the advantage of having a framework beneath you:

function insertQ(){
    $email = $this->input->post('email');
    $qText = $this->input->post('qText');
    $this->db->insert('questions', array('email' =>$email, 'text' => $text));
}

^_ I'm guessing the column names since you didn't specify them

Wednesday, March 31, 2021
 
redrom
answered 9 Months ago
84

If you have no option to use server-side programming, such as PHP, you could use the query string, or GET parameters.

In the form, add a method="GET" attribute:

<form action="display.html" method="GET">
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit" />
</form>

When they submit this form, the user will be directed to an address which includes the serialNumber value as a parameter. Something like:

http://www.example.com/display.html?serialNumber=XYZ

You should then be able to parse the query string - which will contain the serialNumber parameter value - from JavaScript, using the window.location.search value:

// from display.html
document.getElementById("write").innerHTML = window.location.search; // you will have to parse
                                                                     // the query string to extract the
                                                                     // parameter you need

See also JavaScript query string.


The alternative is to store the values in cookies when the form is submit and read them out of the cookies again once the display.html page loads.

See also How to use JavaScript to fill a form on another page.

Wednesday, June 2, 2021
 
KingCrunch
answered 6 Months ago
80

serialize() effectively turns the form values into a valid querystring, as such you can simply append to the string:

$.ajax({
    type : 'POST',
    url : 'url',
    data : $('#form').serialize() + "&par1=1&par2=2&par3=232"
}
Friday, June 4, 2021
 
ShadowZzz
answered 6 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share