I have the following two files request.php and response.php. I used to send the request using a button
<input type="button" value="Request message" onclick="post()"/>
but now I and considering using just the "Enter"(13) key.
The code works, however it shows the result just for a couple of milliseconds. In theory keydown function is working and getting the result from response, bt I dont know why just for a very short time.
Any tips?
request.php
<script type="text/javascript">
function post(){
$("#message").keydown(function (e) {
if (e.keyCode == 13) {
var message=document.getElementById("message").value;
$.post('response.php',{postmessage:message},
function(data){
var result = $('#post_message').html(data);
console
return result; });
}
});
}
</script>
<form>
Enter Message:<input type="text" id="message" name="message" onclick="post()"/><br/>
</form>
<div id="post_message"></div>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
response.php
<?php
function returnString() {
$post_msg = $_POST['postmessage'];
echo "Message entered ->", $post_msg ," <- here";
}
returnString();
?>
You are trying to mimic behavior that is already available by default with a form that only has one input.
Thus your form is submitting and reloading the page.
You don't need to listen to key event on the <input>. Just listen for the submit event of the form and prevent the default submit process
$('form').submit(function(e){
e.preventDefault();
var msg = $('#message').val();
mockPost(msg).then(function(res){
$('#post_message').append('<p>' + res + '<p>')
});
})
function mockPost(v){
return new Promise(function(resolve){
setTimeout(function(){
resolve('Message= ' + v)
}, 200)
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
Enter Message:<input type="text" id="message" name="message"/><br/>
</form>
<div id="post_message"></div></div>
When you hit enter, the form is submitted. Just add e.preventDefault(), this way:
function post(){
$("#message").keydown(function (e) {
e.preventDefault();
if (e.keyCode == 13) {
var message=document.getElementById("message").value;
$.post('response.php',{postmessage:message},
function(data){
var result = $('#post_message').html(data);
console
return result; });
}
});
}
I appreciate the suggestions. So I ended up with this code, just as suggested by @misorude . Simply adding a preventDefault and using submit in form. I added an "onclick" on submit in case the user wants to submit by hitting the button. The response.php stays the same.
request.php
<script type="text/javascript">
function post(){
$('form').submit(function(e){
e.preventDefault();
var message = $('#message').val();
$.post('response.php',{postmessage:message},
function(data){
var result = $('#post_message').html(data);
console
return result; });
});
}
</script>
<form>
Enter Message:<input type="text" id="message" name="message"/><br/>
<input type="submit" value="Submit" onclick="post()">
</form>
<div id="post_message"></div>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>