How to submit only 1 input field in form? - javascript

I have a form where cmds are entered in cmdEntered Textarea and the same command is copied in logs Textarea.
I want only cmdEntered textarea to be sumbitted on form submit. Below is my code which I tried:
function inputKeyDown(evt, input) {
if (evt.keyCode == 13) {
var textarea = document.getElementById("logs");
textarea.value += "\n" + input.value;
input.value = "";
document.getElementById("form1").submit();
return false;
}
}
</script>
</head>
<body>
Enter Commands:< br>
<form action ="" method="post" id="form1">
<textarea rows="15" cols="80" id="cmdEntered" onkeydown="return inputKeyDown(event, this);"></textarea>
<br><br></form>
Logs:<br>
<textarea rows="15" cols="80" id="logs" readonly></textarea>

Possibilities of passing value between client and server
ajax
xmlHTTPrequest
form tag in HTML
Option 1: Use ajax like this DEMO
$("#cmdEntered").keydown(function(event){
// event.preventDefault();
if (event.keyCode == 13){
$.ajax({
url:'',
data:{cmdEntered:$(this).val()},
type:'POST',
success:function(data){
alert(data);
}
});
}
});
Option 2: Avoid using $_POST['logs'] in your server side language(php)

Related

My JavaScript doesn't run when the html is in a form

HTML
I have some simple html input here and I would like to put it in a POST form
<form method="POST">
{% csrf_token %}
<input type="text" id="myTextInputID" placeholder=" Your amazon URL">
</form>
JAVASCRIPT
function search(){
var inputValue = document.getElementById("myTextInputID").value;
}
document.getElementById("myTextInputID").addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
var input = document.getElementById("myTextInputID").value;
document.getElementById(search());
var error = document.getElementById("error")
if (input.includes("https://www.amazon.co.uk/")){
error.style.display = "none";
}else{
error.style.display = "block";
setTimeout(function(){error.style.display = "none";} ,2000)
}
}
});
function togglePopup(){
document.getElementById("popupe-1").classList.toggle("active");
}
And I have my if function here when I don't have my user input as a post method it works perfectly fine, but when I add the post method the page just reloads each time and doesn't run my javascript function
It because when user presses Enter, it triggers the form submit action, and it will reload the page.
To prevent form submit action to be triggers, add onkeydown="return event.key != 'Enter';" to your form.
function search(){
var inputValue = document.getElementById("myTextInputID").value;
}
document.getElementById("myTextInputID").addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
var input = document.getElementById("myTextInputID").value;
document.getElementById(search());
var error = document.getElementById("error")
if (input.includes("https://www.amazon.co.uk/")){
error.style.display = "none";
}else{
error.style.display = "block";
setTimeout(function(){error.style.display = "none";} ,2000)
}
}
});
function togglePopup(){
document.getElementById("popupe-1").classList.toggle("active");
}
<form action="https://www.google.com" method="POST" onkeydown="return event.key != 'Enter';">
<input type="text" id="myTextInputID" value="https://www.amazon.co.uk/" />
</form>
<div id="popupe-1">Helloworld</div>
<div id="error">I'm a error</div>

JQuery and PHP pressing enter to process

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>
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>

How to submit form with enter key when I have a button, not a submit

I have a form with a button submit type, and I would like it to submit when enter key is pressed. I don't know how to implement this with the JS function I call when submitting the form.
FORM:
<form name="form1">
<textarea name="msg" id="message">
</textarea>
<p id="button">
<input type="button" value="Enter" onclick="submitChat()" id="innerbutton"></p>
JS Function
function submitChat() {
var uname = document.getElementById('nameplace').innerHTML
var msg = form1.msg.value;
var xmlhttp = new XMLHttpRequest();
var badname = uname.charAt(0);
if (msg != "" & badname != "<") {
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4&&xmlhttp.status==200) {
document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET','insert.php?uname='+uname+'&msg='+msg,true);
xmlhttp.send();
}
Attach keydown event with the document and call your function if Enter is pressed
$(document).on("keydown",function(e){
var keyCode = e.which || e.keyCode;
if(keyCode == 13) // enter key code
{
submitChat();
}
});
Use a real submit button and move your JavaScript from its click event to the form's submit event. Prevent the default behaviour of the form submission so that normal submission don't happen.
<form id="form1">
<textarea name="msg" id="message">
</textarea>
<p id="button">
<input type="submit" value="Enter">
</p>
and
document.getElementById("form1").addEventListener("submit", submitChat);
function submitChat(event) {
event.preventDefault();
// etc
This should work:
document.getElementById('innerbutton').onkeydown = function(e){
if(e.keyCode == 13){
// your submit function call here
}
};
keyCode 13 is Enter key.

How to post comment on press enter key

I'm making comment system on status. I want to comment on status by pressing enter key.
But response is not coming on the press enter key. here my function-
$(document).ready(function() {
$("#inputComment").keypress(function(e) {
if(e.which == 13) {
var val = $("#inputComment").val();
alert("send");
}
});
}
input tag is:
<input type="text" class="form-control" id="inputComment"
placeholder="Add your comment"
upd="<?php echo $updates['data'][0][5];?>"
uid="<?php echo $userdata ['data'][0][1];?>"/>
Even I'm not getting alert here. How can I get comment data from input tag.
You made some minor mistakes. You forgot to to end a string and also to end some brackets.
$(document).ready(function() {
$("#inputComment").keypress(function(e) {
if (e.which == 13) {
var val = $("#inputComment").val();
alert("send");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" id="inputComment" placeholder="Add your comment" upd="1" uid="2" />

retain textarea values after submit

i have a situation where on pressing Enter key, the content of a text area should get submitted. But i want the contents to remain in the textarea. So that the previously entered text is visible.
i tried the below code, but it wont work
<script type="text/javascript">
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13)
{
myfield.submit();
return true;
}
function populatedText(){
var myvalue = document.getElementById("cmd");
document.getElementById("cmd").innerHTML = myvalue.value;
}
}
</script>
</head>
<body>
<FORM onKeyPress="submitenter(this,event)" class="cmdForm" method="post">
<textarea rows="15" cols="100" name="cmdEntered" id="cmdEntered">$cmdEntered</textarea>
</FORM>
if you are using php you can use the below code or if you are using some other server side language change it to the corresponding one. Basic idea is same just submit the form to the same page .
</head>
<body>
<?php
$cmdEntered = $_POST['cmdEntered'];
?>
<FORM class="cmdForm" method="post" action="same_page_name">
<textarea rows="15" cols="100" name="cmdEntered" id="cmdEntered">
echo $cmdEntered;
</textarea>
</FORM>
you can use cache in order store the input typed! so that you can display the same text in the textarea after submitting the form.
if you still want to stay on the same page even after submitting the text, it is better to use ajax to submit your data which triggers on clicking the enter button.
Your code should be like:
<script type="text/javascript">
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13)
{
myfield.submit();
populatedText();
return true;
}
}
function populatedText(){
var textarea_value = document.getElementById("cmdEntered").value;
document.getElementById("cmdEntered").value = textarea_value;
}
</script>
</head>
<body>
<FORM onKeyPress="submitenter(this,event)" class="cmdForm" method="post">
<textarea rows="15" cols="100" name="cmdEntered" id="cmdEntered">$cmdEntered</textarea>
</FORM>

Categories