In script below
<html>
<body>
<form>
First Name: <input type="text" id="myText" maxlength="30" >
</form>
<button onclick="procesText()">get name</button>
<script>
function procesText()
{
var y = document.getElementById("myText");
alert(y.value);
y.value="";
}
</script>
</body>
</html>
i want to call function procesText Not by clicking get name button, but by clicking enter when i fill input with text. How to achieve that?
HTML:
<form id="myform">
First Name: <input type="text" id="myText" maxlength="30" >
</form>
JS: (If you want to send the form to te server) (Demo)
document.getElementById('myform').onsubmit = procesText;
JS: (If you don't want to send the form to te server) (Demo)
document.getElementById('myform').onsubmit = function(e) {
procesText();
e && e.preventDefault && e.preventDefault();
return false;
}
Just remove the button, call the function onsubmit, and prevent it from submitting:
<form onsubmit="return procesText()">
First Name: <input type="text" id="myText" maxlength="30" />
</form>
<script>
function procesText() {
var y = document.getElementById("myText");
alert(y.value);
y.value = "";
return false;
}
</script>
Fiddle: Fiddle
Related
I have tried to create a html form where I want to be redirected to a url if the input you insert is the same as the value of a variable. I have tried to make it work in many different ways, but I have not succeeded. : - /
Someone who can help?
Here is my code:
My HTML-form:
<form autocomplete="off" onsubmit="script.js">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input id="submit" type="submit">
</form>
My JS:
var country = 'Brazil';
var input = $("input[id='myInput']").val();
$("#submit").on("submit", function(event){
if (country == input) {
window.location.href = "https://www.google.com/";
}
});
Few things. Since you are targeting the submit button and not the form, your event listener should be "click" not "submit." Next, call event.preventDefault() inside the click function. Finally, you want to get the input value after you click the button, so that assignment has to go inside your click function:
var country = "Brazil";
$("#submit").on("click", function(event) {
event.preventDefault();
var input = $("input#myInput").val();
if (country == input) {
console.log("redirect");
window.location.href = "https://www.google.com/";
} else {
console.log("don't redirect");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form autocomplete="off" onsubmit="script.js">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input id="submit" type="submit">
</form>
You need to init the value after the form is submitted otherwise it will be undefined.
var country = 'Brazil';
$("#submit").on("submit", function(event){
let input = $("input[id='myInput']").val();
if (country == input) {
window.location.href = "https://www.google.com/";
}
});
This should work:
$("#submit").on("click", function(e){
e && e.preventDefault();
var country = 'Brazil';
var input = $('#myInput').val();
if (country === input) {
window.location.href = "https://www.google.com/";
}
});
You need to get the value of the input after the click (or submit) event is fired
Place input = $("input[id='myInput']").val(); as first line inside the function which handles the submit.
So your code actually almost work. Minor adjustments:
var country = 'Brazil';
$("#submit").on("click", function(event){ // this event change to click since we change the type=submit on the input
var input = $("input[id='myInput']").val(); // this line moves inside the event
if (country == input) {
window.location.href = "https://www.google.com/";
}
else { alert('B R A Z I L type Brazil to redirect');}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form autocomplete="off" onsubmit="script.js">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input id="submit" type="button" value="GO?" /> <!-- Changed from submit to button -->
</form>
try like this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$('#submit').on('submit', function(event){
event.preventDefault();
event.stopPropagation();
var country = 'Brazil';
var input = $("input[id='myInput']").val();
if (country == input) {
window.location.href = "https://www.google.com/";
}
});
});
</script>
</head>
<body>
<form autocomplete="off" id="submit">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input id="submit" type="submit">
</form>
</body>
</html>
I've created a form, but it only submits if I press the button Submit... How can I make it also submit if the Enter key is pressed? Here is my form's code:
<form method="POST" id="form01">
<textarea name="inputBox123" id="myTextarea" style="white-space:nowrap;">
</textarea>
<input type="button" value="Submeter" onclick="myFunction()" />
</form>
<script type="text/javascript">
function myFunction(val) {
var testThis = document.getElementById("myTextarea").value;
if ( testThis.indexOf("launch") > -1 ) {
window.location = 'http://www.cateto.weebly.com/benoit.html';
return false;
}
}
</script>
Thanks,
Tom
Instead of using <input type="button" />, use <input type="submit" /> to send the form.
The enter button should submit the form by default.
You should attach event listener to textarea tag and listen for keypress and when Enter is pressed you invoke your function:
var textarea = document.querySelector("textarea");//get textarea tag
//NOW replace this with: var input = document.getElementById("myTextarea")
//BELOW change textarea with input
textarea.addEventListener("keypress", function(e){
console.log(e.which, e.target.value);
if(e.which === 13)//code number for enter key
myFunction(e.target.value);//run function with value
});
function myFunction(val) {
var testThis = document.getElementById("myTextarea").value;
if ( testThis.indexOf("launch") > -1 ) {
window.location = 'http://www.cateto.weebly.com/benoit.html';
return false;
}
}
<form method="POST" id="form01">
<textarea name="inputBox123" id="myTextarea" style="white-space:nowrap;">
</textarea>
<!-- change above with input in the comment I entered -->
<input type="submit" value="Submeter" onclick="myFunction()" />
</form>
<p>Enter some text</p>
<form>
<input type="text" id="userInput">
<button onclick="log();">Go!</button>
</form>
<script>
function log() {
var input = document.getElementById("userInput").value;
console.log(input);
}
</script>
When I click the button, it refreshes the page, clearing the log. I originally tried using <input type="submit"> but when I click any type of button, it refreshes. How would I stop this?
try with:
<p>Enter some text</p>
<form action="" method="">
<input name="userInput" type="text" id="userInput" />
<button type="button" onclick="log()">Go!</button>
</form>
<script>
function log() {
var input = document.getElementById("userInput").value;
console.log(input);
return false;
}
</script>
only add return false to you js.
Learn about stopPropagation.
<p>Enter some text</p>
<form>
<input type="text" id="userInput">
<button type="button" onclick="log();">Go!</button>
</form>
<script>
function log() {
var input = document.getElementById("userInput").value;
console.log(input);
}
</script>
So just add type="button"
Difficult to say with your example, but generally if you are trying to prevent an action that would do something like a page refresh from carrying out that default behavior, you would use the preventDefault method on the event handler. So your function would become
function log(e) { // passing in the event to the handler as "e"
var input = document.getElementById("userInput").value;
console.log(input);
e.preventDefault();
}
edit:
Updated with Patrick's notes in mind, although I still don't see an attempt to page refresh in the snippet, even with no type attribute, or type of button or submit.
<p>Enter some text</p>
<form action="" method="">
<input name="userInput" type="text" id="userInput" />
<button onclick="log(event)">Go!</button>
</form>
<script>
function log(e) {
var input = document.getElementById("userInput").value;
console.log(input);
e.preventDefault()
}
</script>
I have form which need to be submited to another domain, like this:
<form id="myform" action="https://example.com" target="myiframe" method="POST">
<input type="text" name="email" value="">
<input type="text" name="name" value="">
<input type="text" name="phone" value="">
<input type="submit" name="submit" value="Submit">
</form>
And iframe:
<iframe style="display:none;" name="myiframe" src=""></iframe>
This work fine, but after submit form it stays filled.
So, how to clear (reset) form after submit?
Use an event-listener to trigger the submit and the clearing.
First, change the submit button to a regular button with a proper id (you should do the same to the other elements):
<input type="button" name="submitButton" id="submitButton" value="Submit" />
Then bind the event-listener to the button with JavaScript:
<script type="text/javascript">
document.getElementById('submitButton').addEventListener('click', function ()
{
handleTheForm;
}, false);
</script>
Wherea handleTheform is a method, defined accordingly:
<script type="text/javascript">
function handleTheForm()
{
document.forms[0].submit(); // Submit the form.
document.forms[0].reset(); // Clear the form.
}
</script>
Edit To handle the Enter button, simply add an event-listener for buttons and check which key is being pressed:
<script type="text/javascript">
document.addEventListener('keypress', function (e)
{
var key = e.which || e.keyCode;
var enterKey = 13;
if (key == enterKey)
{
handleTheForm;
}
});
</script>
Your final picture should look something like this:
<form id="myform" action="https://example.com" target="myiframe" method="POST">
<input type="text" name="email" id="email" value="" />
<input type="text" name="name" id="name" value="" />
<input type="text" name="phone" id="phone" value="" />
<input type="button" name="submitButton" id="submitButton" value="Submit" />
</form>
<script type="text/javascript">
function handleTheForm()
{
document.forms[0].submit(); // Submit the form.
document.forms[0].reset(); // Clear the form.
}
document.getElementById('submitButton').addEventListener('click', function ()
{
handleTheForm;
}, false);
document.addEventListener('keypress', function (e)
{
var key = e.which || e.keyCode;
var enterKey = 13;
if (key == enterKey)
{
handleTheForm;
}
});
</script>
You might have to tweek something a little but since I haven't manage to test this.
This solution is applicable to your problem
// code from answer with bind() transfered to plain javascript
function SubmitWithCallback(form, frame, successFunction) {
var callback = function () {
if(successFunction)
successFunction();
frame.removeEventListener('load', callback, false);
};
frame.addEventListener('load', callback, false);
form.submit();
}
You can easily achieve this using jQuery by
$("#formId").reset();
Hope this helps...
I have a simple form, with one issue.
In explorer, if nothing is inserted, the placeholder is passed as input of the field.
Here is JSbin: http://jsbin.com/EvohEkO/1/
I would like to make a simple comparision, when form is submitted, to check if the value of the field is equal to "First name", and if yes make the value empty ""
Just this i need.
Someone can help me please?
<form onsubmit="return checkform()">
<input name="test" placeholder="placeholdertext" id="test" />
<input type="submit" value="submitbutton"/>
</form>
in js
you should import jquery latest version this is the link: http://code.jquery.com/jquery-1.10.2.min.js
function checkform(){
var fieldvalue = $.trim($('#test').val());
if(!fieldvalue || fieldvalue=="placeholdertext"){
alert('there is no input');
return false;
}else{
alert('enjoy your form!');
return true;
}
}
This is somewhat easier..
$(document).ready(function(){
$("#form").submit(function(){
$('#form input:text, textarea').each(function() {
if($(this).val()==$(this).attr('placeholder'))
$(this).val(" ");
});
});
});
Just put your field value in hidden type input like this :-
<input id="hdnfield" name="hdnfield" value="<Your Field Value>" />
To check the value of a form field use the val() function on the input element
var input_value = jQuery('Input Element Selector').val();
As I looked to your form, the elements do not have any id attribute, I recommend that you add one to each of them, also change the submit input to button the you have more control on the javascript. so your form will look like :
<form id="form" action="form.php" method="post">
<input id="fname" type="text" placeholder="First name" name="fname"><br>
<label for="fname" id="fnamelabel"></label>
<input id="lname"type="text" placeholder="Last name" name="lname"><br>
<textarea id="message" placeholder="Contact us!" cols="30" rows="5" name="message"></textarea><br>
<br>
<input type="button" value="Submit">
</form>
so your jQuery will look like:
jQuery(document).ready(function(){
jQuery('input[type="button"]').click(function(){
var fname = jQuery('#fname').val();
var lname = jQuery('#lname').val();
var message = jQuery('#message').val();
...... Do whatever you need & then change the input values
...... if all validation has passed the use jQuery('#form').submit(); to submit the form otherwise reset the form:
jQuery('#fname').val("");
jQuery('#lname').val("");
jQuery('#message').val("");
});
});
here is a working version:
jsfiddle working link
You can do it like the following!
<form>
<input type="text" id="first_name" name="first_name"/>
<input type="submit" id="submit" value="submit"/>
</form>
<script type="type/javascript"/>
jQuery.noConflict();
(function ($) {
$(function () {
$("#submit").click(function () {
if ($("#first_name").val() == "first name") {
$(this).val("");
}
});
});
})(jQuery);
</script>