Modal form Submission to PHP using Jquery .ajax

Question

I am trying to post a modal form to a table using php, jquery .ajax but it never works.. tried debugging using firebug and i don't see any errors. i tested the form by using form action="notes_functions.php" and it worked fine.

Profile.php

    <div class="modal-body">

        <form class="noteform" id="notesmodal" method="post">
           <fieldset>      
          <label>Title</label>
                <input type="text" class="form-control" name="note_title" placeholder="Enter a title for your note">
                <label>Note</label>
                <textarea rows="4" cols="50" class="form-control" name="note_content" placeholder="note"></textarea>
                <label>Note type</label>
                <div class="panel-body">
                    <input type="tagsinput" id="teetete" class="tagsinput" value="" />
                </div>                                                  
                <label for="exampleInputFile">Attach a document</label>
                <input type="file" id="exampleInputFile3">
                <p class="help-block">PDF, DOCX and image files are supported.</p>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Check me out
                    <input type="label" name="note_account" value="<?php echo $acctname ?>"/> 
                </label>
            </div>
            <input type="hidden" name="note_creator" value="<?php echo $_SESSION['username'];?>"/>
              </fieldset>
             <button class="btn btn-default" id="submitnote" >ADD</button>
        </form>
    </div>

this is my js code

$(function(){
  $("button#submitnote").click(function(){
    $.ajax ({
      type:"POST",
      url:"notes_functions.php",
      data: $('form.noteform').serialize(),
      success: function(msg){
        $("#thanks").html(msg)
        $("form.noteform").modal('hide');
      },
      error: function(){
        alert("failure");
      }
    });
  });
});

notes_functions.php

<?php

include_once 'dbconnect.php';

if (isset($_POST['note_title'])) {



        $notetitle = strip_tags($_POST['note_title']);
        $noteContent = strip_tags($_POST['note_content']);
        $noteAccount = strip_tags($_POST['note_account']);
        $noteCreator = strip_tags($_POST['note_creator']);

        mysql_query("INSERT INTO account_notes (note_title, note_contents, note_account, note_creator) 
            VALUES ('$notetitle','$noteContent', '$noteAccount', '$noteCreator') ");

        echo "Name = ".$notetitle;
        echo $noteCreator;




 }

?>

Check that $('form.noteform').serialize() works correctly. Add some debug in your php script : is the ajax calls makes it's way to the script or it fails for another reason? Check the network debug in firebug to check that your ajax call works correctly. — Nico
– Nico, Commented Nov 26, 2013 at 19:57

AlliterativeAlice · Accepted Answer · 2013-11-26 22:08:48Z

7

You should really be using .submit() rather than click (for submit-by-enter, etc.) and returning false to block conventional submits. You also need to make sure the code to bind the events runs after the form element is created. The easiest way to do this is to put it in the document ready handler.

jQuery(document).ready(function ($) {
    $("#notesmodal").submit(function () {
        $.ajax({
            type: "POST",
            url: "notes_functions.php",
            data: $('form.noteform').serialize(),
            success: function (msg) {
                $("#thanks").html(msg)
                $("form.noteform").modal('hide');
            },
            error: function () {
                alert("failure");
            }
        });
        return false;
    });
});

And change the ADD button to be:

<input type="submit" name="submit" class="btn btn-default" id="submitnote" value="ADD" />

edited Nov 26, 2013 at 22:08

answered Nov 26, 2013 at 22:01

AlliterativeAlice

12.7k9 gold badges56 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Modal form Submission to PHP using Jquery .ajax

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related