retain textarea values after submit - javascript

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>

Related

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 submit only 1 input field in form?

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)

i want alert some thing every time when i pressed enter key

every time time when i pressed the enter key in input field then it should alert some thing but facing problem in doing that here is the code.
<input type="text" class="searchfld" id='input' onchange="gotothatpost(this.value)" onkeyup="ajxsrch(this.value)">
Here is the js code
<script>
function ajxsrch(str)
{
var keycod;
if(window.event)
{
keycod = str.getAscii();
}
if(keycod==13){alert("You pressed Enter");}
}
</script>
I think it is because you aren't passing e to the function and only using window.event which does not work in all browsers. Try this code instead.
<input type="text" class="searchfld" id='input' onchange="gotothatpost(this.value)">
<script>
function ajxsrch(e)
{
e = e||event;
var keycod;
if(e)
{
keycod = e.keyCode||e.which;
}
if(keycod==13){alert("You pressed Enter");}
}
document.getElementById("input").onkeyup=ajxsrch;
</script>
Try this..
<input type="text" class="searchfld" id='input' onchange="gotothatpost(this.value)" onkeyup="ajxsrch(event)">
<script>
function ajxsrch(e)
{
if (e.which === 13) {
alert("You pressed Enter");
}
return false;
}
</script>
Pass the event object to the function call
<input type="text" class="searchfld" id='input' onkeyup="ajxsrch(event)">
Use the event object in the JS and get the key value.
function ajxsrch(ev) {
var ch = ev.keyCode || ev.which || ev.charCode; // Proper way of getting the key value
if(ch == 13) {
alert("You pressed enter");
}
}

Textbox hit function on Enter button

I have a mvc3 application. and on one page i have a textbox that will allow a user to search for a client, now i am struggling with some functionality, as i am a windows form and widows phone 8 developer. i want this text box i have here to execute as i press enter, i have a button that the user can click on to search, but i know most users just click enter! i am using JavaScript to hit function!
Html for button and textbox:
<td>
<input value="Search..." id="SearchText" style="color:GrayText" onchange="SearchText" onfocus="javascript:this.value=''" onblur="javascript: if(this.value==''){this.value='Search...';}" />
<input id="searchbutton" type="button" value="Search" class="button"/>
</td>
Here is the Javascript :
<script type="text/javascript">
$('#searchbutton').click(function(){
var client = document.getElementById('SearchText').value;
var textbox = document.getElementById('SearchText');
var edittext = ", is not available!";
var result = client + edittext;
if (textbox.value == 'Search...') {
alert('Please enter a Client Name to search for ');
textbox.focus();
}
else {
alert(result);
};
});
</script>
how would i get the textbox to also trigger the function as i hit enter on the textbox!
here is how it looks on the form :
very new to this kind of coding, any help will do!
thanks!
$('#searchbutton').click(search);
$('#SearchText').keypress(function(e){
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) {
search()
}
});
function search(){
var client = document.getElementById('SearchText').value;
var textbox = document.getElementById('SearchText');
var edittext = ", is not available!";
var result = client + edittext;
if (textbox.value == 'Search...') {
alert('Please enter a Client Name to search for ');
textbox.focus();
}
else {
alert(result);
};
}
$('#SearchText').on('keypress', function(e){
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) {
//write your code for search here..like searchbutton on click
}
});
I dont know the exact answer to your question but you could use a tabindex
to press tab to jump to your button and then you can press enter to submit.
try this..
<input type="text" placeholder="Search" id="txtSearch" />
<input type="button" value="Search" id="btnsearch" onclick="return Search();" />
<script type="text/javascript">
$("#txtSearch").keyup(function (event) {
if (event.keyCode == 13) {
$("#btnsearch").click();
}
});
function Search(){
// do Something here.......
}
</script>

Categories