This question already has answers here:
Submitting data from textarea by hitting "Enter"
(5 answers)
Closed 8 years ago.
I'm sorry to make this question, as others have done it already. But mostly don't have a good explanation, or always are mixed with more complex chats functions. I want a simple code. The only thing i want is to make my textarea value submit and get inserted to my db using ENTER key. Please don't redirect me to another question, as i know they must be others with starter skills that wants to learn. Just adjust the code to the simple form i have added. Thanks.
Code:
<?php
if(isset($_POST['submit'])) {
$comment = $_POST['textarea'];
$db->query("INSERT INTO blog(textarea) VALUES('$comment')");
}
?>
<form id="form1">
<div>
Comment:
</div>
<div>
<textarea name="textarea" form="form1" maxlength="200" id="textarea" placeholder="Make your comment..."></textarea>
<input style="visibility:hidden" type="submit" form="form1" name="submit" id="submit" value="Submit">
</div>
</form>
You can do this quite simply by adding a keypress event handler to the textarea:
<form id="form1">
<div>
Comment:
</div>
<div>
<textarea onkeypress="if(event.which==13)document.getElementById('form1').submit();"
placeholder="Make your comment..."
name="textarea" form="form1" maxlength="200" id="textarea"></textarea>
<input style="visibility:hidden" type="submit" form="form1" name="submitForm" id="submitForm" value="Submit">
</div>
</form>
That checks if the pressed key has keycode 13 (which is the keycode for the enter key), and submits the form if it does.
Related
This question already has an answer here:
JavaScript form submit WITH a field called submit
(1 answer)
Closed 6 years ago.
How to submit form when have input type="submit" inner form using javascript ?
i want to submit form using javascript (have input type="submit" inner form ).
i tried to use this code
<form action="" method="post" name="test_fn">
<input type="text" name="input1" value="ON">
<input type="submit" name="submit" value="ON">
</form>
<script type="text/javascript">
setTimeout(function(){test_fn.submit();}, 0);
</script>
but not work. how can i do that ? for submit form using javascript (have input type="submit" inner form )
thank
First you should change your input submit name.
When you name the button submit, you override the submit() function on the form,so it will become "submit is not a function"
<form action="" method="post" name="test_fn" id="test_fn">
<input type="text" name="input1" value="ON">
<input type="submit" name="btnsubmit" value="ON"> //Changed submit name here
</form>
then can call submit by your form name like this
<script type="text/javascript">
setTimeout(function(){document.test_fn.submit()}, 0);
</script>
So I have this little contact form on my site, and it's suppose to input some text into an empty p tag telling the client that's it's been submitted. It works fine, it does what it should, but in IE/Edge it ignores everything and inputs the word null into the p tags.
You'll have to forgive me, I'm still new to javascript, but I couldn't find anything anywhere to address this bug. Any help would be greatly appreciated.
<form id="contact-form" method="post" action="#" onsubmit="return setReturn()">
<input type="hidden" value="someone#email.com" name="emailTo">
<fieldset>
<p id="thanks"></p>
<legend>Send me a message</legend>
<div class="contact-info">
<input placeholder="Name*" type="text" name="name" required>
<input placeholder="Email*" type="Email" name="email" required>
</div>
<textarea placeholder="Message*" name="message" required></textarea>
<input type="submit" value="Submit" name="submitContact" class="button">
</fieldset>
</form>
<script>
function setReturn(){
localStorage.setItem("thanks", "Your request was sent successfully!");
}
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
</script>
Your issue is that when the innerHTML of the "thanks" element is set, the string in localStorage is unset.
Then when the form is submitted, the localStorage item is set, but the "thanks" element's innerHTML isn't set (it was set to undefined before).
In order to make sure the "thanks" element is updated when the form is submitted, you need to include the lines that set it in the function that fires when the form is submitted.
function setReturn(){
localStorage.setItem("thanks", "Your request was sent successfully!");
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
}
On form submit you are calling setReturn function , but when this snippet document.getElementById("thanks").innerHTML = localStorage.getItem("thanks"); is parsed localStorage does not have this key. So you have to first set this local storage before use it's value as innerHTML like in the previous answer.
Also it is odd that you are using localStorge and even you are clearing it, when this thing can be acheived by this snippet
HTML
<form id="contact-form" method="post" action="#" onsubmit="return setReturn()">
<input type="hidden" value="someone#email.com" name="emailTo">
<fieldset>
<p id="thanks"></p>
<legend>Send me a message</legend>
<div class="contact-info">
<input placeholder="Name*" type="text" name="name" required>
<input placeholder="Email*" type="Email" name="email" required>
</div>
<textarea placeholder="Message*" name="message" required></textarea>
<input type="submit" value="Submit" name="submitContact" class="button">
</fieldset>
</form>
JS
function setReturn(){
event.preventDefault()
document.getElementById("thanks").innerHTML = "Your request was sent successfully!";
}
NOTE: I used event.preventDefault just for demo but in real application you dont need to use it as it will prevent default behaviour or the submit button.
Here is a WORKING COPY
Also you can use an IIF to set up this localStorage.This function will be executed as soon as it parsed and will set up the key thanks to it.
(function(){
localStorage.setItem("thanks", "Your request was sent successfully!");
}())
Then onsubmit you can use your function without making any change
function setReturn(){
event.preventDefault();
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
}
WORKING COPY WITH IIF
Hope this is helpful
This question already has answers here:
Can I make a <button> not submit a form?
(8 answers)
Closed 8 years ago.
HTML:
<form target="" method="post">
<input name="username" type="text" />
<input name="password" type="password" />
<button>Cancel</button>
<input type="submit" />
</form>
Fiddle: http://jsfiddle.net/n9Lpcqyr/
Problem: When I hit enter, both buttons get triggered. Tested with this jQuery:
$('button').click(function(){
alert('help');
});
$("form").submit(function(){
alert('hey');
});
Because the first <button> is mapped to .remove() the dialog, the form no longer exists to be submitted. I know I can bind the enter key to the inputs with js, but I'm looking for an HTML-only solution. I tried tabindex with no luck. What else can I do?
You could move the cancel button outside of the form, like so (and use CSS to style):
<form target="" method="post">
<input name="username" type="text" />
<input name="password" type="password" />
<input type="submit" />
</form>
<button>Cancel</button>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have used a template from the web for a Login page, and I am not able to figure out how can I link this page to another when one clicks the 'Login' button. I have no knowledge of HTML and CSS or JS , so if anybody can guide me through this I'll be grateful.Its for a college project that has to be submitted tomorrow. Its not that I don't want to learn, but there was something else I was working on which didn't work out pretty well so I had to start this and I have only a day.
I was unable to paste the code here. SO here's the link : http://pastebin.com/pPS0Np8A
<input type="button" value="click" onclick="window.open("http://www.google.com/"); window.open("http://www.youtube.com/");" />
If it's just a Link when pressing the button, put an <a>-tag around your button and the LInk inside the href attribute:
<p><input type="submit" value="Sign In"></p>
using harshit's solution i added the id to restore css properties but if the css value is a class rather than an id just replace id= with class=.
<input type="button" value="click" id="myCssClassId" onclick="window.open("http://www.google.com/"); window.open("http://www.youtube.com/");" />
So you were "not able to figure out how can I link this page to another when one clicks the 'Login' button".
Simplified from the login-page you provided, you have the following code:
<form action="Default5.aspx" method="POST">
<fieldset>
<p><label for="email">E-mail address</label></p>
<p><input type="email"
id="email"
value="mail#address.com"
required="required" />
</p>
<p><label for="password">Password</label></p>
<p><input type="password"
id="password"
value="password" />
</p>
<p><input type="submit" value="Login" /></p>
</fieldset>
</form>
Now, note the <input type="submit" value="Login" />. Once you'll click that, the form will submit the data contained in it (the password and email).
When you submit a form, the form needs an address where it needs to send the data to. This is then also the page that is displayed ('redirected'). You set this simply with the form's action attribute, which is just an URL.
Just wanted to rectify this for future readers.
EDIT:
So, for example an exact image-search on google could work like:
<form method="GET"
action="http://www.google.com/search"
target="_BLANK"
onsubmit="var e = this.getElementsByTagName('input');
e[1].value= 'isz:ex,iszw:' + e[3].value
+ ',iszh:' + e[4].value;
return true;
"
><fieldset>
<input type="hidden" name="tbm" value="isch" />
<input type="hidden" id="tbs" name="tbs" />
<p>Search Image:
<input type="text" name="q" value="search" />
</p>
<p>
Width: <input type="text" value="32" /> px <br />
Height: <input type="text" value="32" /> px <br />
<input type="submit" value="Search" />
</p>
</fieldset>
</form>
Example jsFiddle here
Here the method is changed from POST to GET. That way the values entered in the form are appended to the URL (so anyone can read them).
To close with a final example of how to open a new blank page I added the target-attribute, and pointed it to _BLANK.
The example's are intentionally kept simple, style and expand on them as you wish.
i have some problem on my php code..
<form id="form1" method="post" action="proses.php">
<div class="input-control text area">
<textarea name="ipt1" type="textarea"><?php echo $data['data'];?></textarea>
</div>
<input name="submit-btn" type="submit" value="Submit"/>
<input name="clear-btn" type="reset" value="Clear" onclick="document.getElementById('form1').clear();"/>
</form>
the result is nothing happened when i click the "Clear" button, and "ipt" field is not cleared,
i need to help, if anyone know, please tell me.
The type='reset' button will reset all form values, but your problem is you have some default values coming from PHP. You can do the following:
<input name="clear-btn" type="reset" value="Clear" onclick="document.getElementsByName('ipt1')[0].innerHTML=''"/>
innerHTML here is used to access the content inside textarea.
DEMO