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.
我试图使用php,jquery .ajax将一个模态表单发布到一个表但它永远不会工作..尝试使用firebug调试,我没有看到任何错误。我使用form action =“notes_functions.php”测试了表单,它工作正常。
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
这是我的js代码
$(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;
}
?>
1 个解决方案
#1
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.
您应该使用.submit()而不是单击(对于submit-by-enter等)并返回false以阻止常规提交。您还需要确保在创建表单元素后运行绑定事件的代码。最简单的方法是将它放在文档就绪处理程序中。
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:
并将ADD按钮更改为:
<input type="submit" name="submit" class="btn btn-default" id="submitnote" value="ADD" />
#1
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.
您应该使用.submit()而不是单击(对于submit-by-enter等)并返回false以阻止常规提交。您还需要确保在创建表单元素后运行绑定事件的代码。最简单的方法是将它放在文档就绪处理程序中。
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:
并将ADD按钮更改为:
<input type="submit" name="submit" class="btn btn-default" id="submitnote" value="ADD" />