[英]Needing to submit form twice to post correctly using jQuery AJAX
I'm trying to submit a form using jQuery AJAX. 我正在尝试使用jQuery AJAX提交表单。 I'm not so great with this code, so am not able to see 我对这段代码不太满意,所以看不到
Issue - why I need to submit the form twice in order for it to post. 问题 -为什么我需要提交两次表单才能发布。
When I submit the form the textarea clear back to placeholder
text and nothing happens. 当我提交表单时,textarea会清除回placeholder
文本,什么也不会发生。 When I click it again, the post submits and displays. 当我再次单击它时,该帖子将提交并显示。 I have the following textarea
and button
我有以下textarea
和button
<textarea class="add-message-textarea" name="message_body" id="message_textarea" placeholder="Write message"></textarea>
<button class="post-button button" type="submit" name="post_message" id="message_submit">Post</button>
When I submit I have the following: 当我提交时,我有以下内容:
$body = '';
if(isset($_POST['post_message'])) {
if(isset($_POST['message_body'])) {
$body = $_POST['message_body'];
}
}
Then AJAX call: 然后调用AJAX:
var userLoggedIn = '<?php echo $userLoggedIn; ?>';
var user_to = '<?php echo $user_to; ?>';
var body = '<?php echo $body; ?>'
// var body = $("#message_textarea").val();
$(document).ready(function() {
$("#message_submit").click(function(){
//ajax request for send 'sending a new message' string to dB
$.ajax({
url: "includes/handlers/ajax_send_message.php",
type: "POST",
data: {'userLoggedIn':userLoggedIn, 'user_to':user_to, 'body':body},
cache: true,
success: function(response) {
console.log("message_sent");
}
});
});
});
ajax_send_message.php
looks like this simple: ajax_send_message.php
看起来像这样简单:
global $con;
if(isset($_POST['userLoggedIn']) && isset($_POST['user_to']) && isset($_POST['body'])) {
$userLoggedIn = $_POST['userLoggedIn'];
$body = $_POST['body'];
$user_to = $_POST['user_to'];
$date = date("Y-m-d H:i:s");
$message_obj = new Message($con, $userLoggedIn);
$message_obj->sendMessage($user_to, $body, $date);
}
I'm able to get this to work no problem using PHP with the below but I don't want the page to reload. 我可以使用下面的PHP使它正常工作,但我不希望页面重新加载。
if(isset($_POST['post_message'])) {
if(isset($_POST['message_body'])) {
$body = $_POST['message_body'];
$date = date("Y-m-d H:i:s");
$message_obj->sendMessage($user_to, $body, $date);
}
}
Any help is appreciated. 任何帮助表示赞赏。
If you want to submit a form but prevent reloading the page, you just need to return false
from clicking submit button: 如果要提交表单但阻止重新加载页面,则只需单击提交按钮返回false
即可:
$(document).ready(function() {
$("#message_submit").click(function(){
//ajax request for send 'sending a new message' string to dB
$.ajax({
url: "includes/handlers/ajax_send_message.php",
type: "POST",
data: {'userLoggedIn':userLoggedIn, 'user_to':user_to, 'body':body},
cache: true,
success: function(response) {
console.log("message_sent");
}
});
return false;
});
});
Note: If you want to totally prevent a form to be submitted, attach the event listener to the form submission not on clicking the button. 注意:如果要完全阻止提交表单,请在不单击按钮的情况下将事件侦听器附加到表单提交。 User may submit the form by pressing Enter
or other unpredictable actions attached to the device keybord etc. 用户可以通过按Enter
或附加在设备键盘上的其他不可预期的动作等方式提交表单。
$(YOUR_FORM).on("submit",function(){
//Ajax code here
return false;
})
I think the problem is that you don't prevent your form from submitting. 我认为问题在于您不会阻止表单提交。 You can do this by: e.preventDefault()
in .submit(function(e){})
callback function 您可以通过以下方法执行此操作: e.preventDefault()
.submit(function(e){})
回调函数中的.submit(function(e){})
$("#reg").submit(function(e) { e.preventDefault(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="reg"> <input type="text" name="name" value="Rick"> <input type="text" name="last_name" value="Astley"> <input type="submit"> <form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.