HTML form run javascript on enter? - javascript

I am building a newtab page here:
http://codepen.io/Thisisntme/full/VvgeyV
This page consists of a pretty design thing, and a google search bar. However, when I press enter, rather than searching google it opens the same window with http://codepen.io/Thisisntme/full/VvgeyV?inputbox=TEST_INPUT ("TEST_INPUT" being whatever was typed into the box).
When I press the submit button off to the left, It actually searches.
How can I make this search when the enter key is pressed?
Here is the code important to the form.
HTML:
<form NAME="myform">
<div id = "textbox">
<INPUT type="text" name="inputbox" value="" placeholder="Search with me!">
</div>
<input type="button" name="button" value="Click" onClick="google(this.form)">
</form>
CSS:
#backgroundstuff canvas {
outline: 0px;
position: fixed;
left: 0px;
top: 0px;
/*width: auto;
height: 100%;*/
z-index: -99;
}
Javascript
function google(form) {
var gSearch = form.inputbox.value;
window.location.href = 'https://www.google.com/search?q=' + gSearch;
//window.location.replace('https://www.google.com/search?q=' + gSearch);
}

The enter key automatically submits the form.
If you do not have an action defined on your form, it will default to the same page.
The posted data will use the name parameter of your form fields.
Using proper form markup will solve both issues.
Setting an action:
<form method="GET" action="https://www.google.com/search">
Setting name to the name of the parameter you want to pass:
<input type="text" name="q" placeholder="Search with me!">
With both of these taken care of, you won't need the google function. Your "search" button can be a simple submit:
<input type="submit" value="Click">

change your html to:
<form NAME="myform" onsubmit="event.preventDefault(); google(this)">
<div id = "textbox">
<INPUT type="text" name="inputbox" value="" placeholder="Search with me!">
</div>
<input type="submit" name="button" value="Click">
</form>
So that it works on the submit of the form not on the click of the button.
Also make sure to cancel the event, like Juan Mendes showed below.

You can do something like:
<form onsubmit="return google(this)">
<input type="text">
<input type="submit">
</form>
And change your google function to:
function google(form) {
// YOUR LOGIC HERE
return false;
}

This way you can implement search results based on keyboard click.
$( "#txtBox" ).keypress(function( event,value ) { if ( event.which == 13 ) { var gSearch = form.inputbox.value; window.location.href = 'https://www.google.com/search?q=' + gSearch; } });

When you hit enter, it submits the form and reloads the page. You need to listen to the form submit event instead of the click. Then you can call event.preventDefault() to prevent the form from being submitted.
<form NAME="myform" onsubmit="event.preventDefault(); google(this)">
However, you don't need JavaScript, just the action attribute of the form to be https://www.google.com/search and make the text field's name be "q"
<form NAME="myform" method="GET" action="https://www.google.com/search">
<input type="text" name="q" placeholder="Search with me!">

Since it is a form pressing enter will launch an event.
This event is what submits your request and reloads the page.
To make it go to google instead you should start by capturing the event and making sure it doesn't bubble up or do anything by default.
To do this, simply add an id to your form and capture the event e.g.
<form name="myform" id="to_cancel_submit">
then in your JS, target the element here
form = document.getElementById('to_cancel_submit')
after you have the form in a variable (or directly, doesn't matter) you bind the submit handler for it and prevent the default events like this
form.submit = function(e) {
e.preventDefault(); // pretty obvious
e.cancelBubble(); // prevents bubbling to parents
return false; // both of the above
// call your functions here...
}

Related

fill and submit form using javascript from console

Here is my form:
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" >
</form>
And need to fill it from console.
just to use it in my app,
Will inject javascript with data to local html file.
I tried to make the form without a submit button like so:
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
</form>
<script>
htmlString.oninput = function(){
///do some stuff
}
</script>
</body>
Expecting that :
document.getElementById('htmlString').value="moo" ;
It automatically submit the form, because here oninput used.
But it just stayed filled with inputs and not proceed further.
Tried with other solution:
form = document.getElementById("myForm")
form.submit()
But it just refreshed the page and not submitted the form.
The need is just one filed without else, and inject my string to it with javascript to run functions embedded in the html.
Try making the input button hidden.
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" style="display: none" >
</form>
<button onclick="simulateConsole()">Try it</button>
<script>
htmlString.oninput = function(){
if(this.value === "moo") {
myForm.submit();
}
}
// This event will be triggered even if you use console
htmlString.onsubmit = function(){
if(this.value === "moo") {
// do something onSubmit
}
}
function simulateConsole() {
// you can simulate this in console
htmlString.value = "moo";
myForm.submit();
}
</script>
</body>
I hope it helps.
You need to supply an action to the form, otherwise it will just reload the page.
See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

Submit Form With Both Action and Onsubmit Function

My JS is not that great so I have been fiddling with this for a while now.
I have a form which is being POST to another file when the submit button is clicked. When it is clicked I also want to show an alert then redirect the user back to a URL.
The redirecting code works just fine on a button where I call the function "onclick" like so:
<button onclick="test()">Return</button>
But I don't want to have an extra button for this...I want the form to POST then show an alert box then go to URL specified but I get not a function error from console, thanks.
<iframe name="noreloadhack" style="display:none;"></iframe>
<form action="http://www.example.com/test.php" onsubmit="return test();" method="post" target="noreloadhack">
JS:
<script>
function test() {
alert('Hello World');
var return_url = document.getElementById('return_url').value;
window.location.href= return_url;
}
</script>
If it makes a difference I have the form target set to a hidden iframe as a hack to not reload page on submit (I know, not the best method). I'm pretty much using 4 form attributes here.
I have some old code that I used to solve a similar situation. Where I wanted to submit a form but not reload the page, here it is. Since there were only 4 input fields I just grabbed the values using jquery.
Javascript:
function processForm() {
var teamMembers=new Array();
console.log($("#"));
var schoolName=$("#schoolname").val();
var teamMembers=new Array();
teamMembers.push($("#contestant1").val());
teamMembers.push($("#contestant2").val());
teamMembers.push($("#contestant3").val());
$.ajax({
method: "POST",
url: "php/register.php",
data: { schoolname: schoolName, teammembers:teamMembers.toString()}
})
.done(function( msg ) {
alert( "Your team is now registered " + msg );
$('#register').hide();
location.reload();
});
// You must return false to prevent the default form behavior
// default being reloading the page
return false;
}
HTML:
<form id="registration_form" onsubmit="return processForm()" method="POST">
<p style="margin:0px;">School Name:</p>
<input type="text" id="schoolname" name="schoolname" autocomplete="off" class="input" required>
<hr>
<p style="margin:0px;">Contestants</p>
<div id="teammembers">
<input type="text" id="contestant1" name="contestant1" autocomplete="off" class="input" required>
<p></p>
<input type="text" id="contestant2" name="contestant2" autocomplete="off" class="input" required>
<p></p>
<input type="text" id="contestant3" name="contestant3" autocomplete="off" class="input" required>
</div>
<input type="submit" id="registered">

Confirm submit to specific page

I have a form that has two different submit-buttons that should submit to different pages.
HTML:
<form id="campaign" method="post" enctype="multipart/form-data">
<input type="submit" value="Promote!" name="ap_promote" onsubmit="promote('?page=campaigns&id=<?php echo $campaigns_id?>&edit=true&test=2')" id="ap_promote">
</form>
Javascript:
function promote(action)
{
if (confirm('Are you sure you want to promote this campaign?'))
{
document.getElementById('campaign').action = action;
document.getElementById('campaign').submit();
}
else
{
return false;
}
}
As you see, it should send the form to ?page=campaigns&id=#&test=2. The problem is that it doesn't show any confirmation box and it just sends the form to itself, and not to the specified url.
Buttons don't have onsubmit event, it's a form event. Since you plan to have different actions per depending on clicked button, you can use combination of button onclick and form onsubmit events. Check it out:
<form id="campaign" method="post" enctype="multipart/form-data" onsubmit="return promote()">
<input type="submit" value="Promote!" name="ap_promote" onclick="this.form.action='one'" id="ap_promote" />
<input type="submit" value="Promote!" name="ap_promote" onclick="this.form.action='two'" id="ap_promote" />
</form>
And JS code becomes as simple as:
function promote() {
return confirm('Are you sure you want to promote this campaign?');
}
Change onsubmit="promote(..." to onsubmit="return promote(..." in your button click handler
I hope this will help you.
You should use the button instead of submit button
<form id="campaign" method="post" enctype="multipart/form-data">
<input type="button" value="Promote!" name="ap_promote" onclick="promote('?page=campaigns&id=<?php echo $campaigns_id?>&edit=true&test=2')" id="ap_promote">
</form>

How to stop enter key from reloading page in a form in javascript

I have a search bar with a button that searches for stuff on another site. I got it to function correctly (it searches on the other site in a new tab) but anytime I click enter in the search bar, the page I'm on reloads. At first it reloaded from pressing enter and clicking search, then I changed the input type to button rather than submit. This took care of reloading when clicking on the button, but when the enter key is pressed the page reloads. Also, it only reloads if the search bar is clicked, not just at all times. The search bar has to be selected for the enter key to reload the page.
html:
<div id="search-3" class="widget widget_search">
<h3 align="center">Search the other site!</h3>
<form method="post" name="searchform" id="searchform">
<span class="searching">
<input type="text" value="" name="s" id="s" />
</span>
<input class="submit" type="button" Onclick="SearchBlog();" value="Search" />
</form>
</div>
javascript:
function SearchBlog()
{
var searchQuery = document.searchform.s.value;
if(searchQuery != ""){
var destination = "website.com/s" + searchQuery;
window.open(destination, "_blank");
}
}
I want to be able to use the enter key to search but I don't want it to reload the page.
Thats because you are submitting to a page that isn't there.
Use onsubmit in your <form> declaration instead:
<form method="POST" name="searchform" id="searchform" onsubmit="SearchBlog();">
...
</form>
Then make sure you return false; in your SearchBlog() function. And you should be good to go.
Try this:
<input class="submit" type="button" Onclick="return SearchBlog();" value="Search" />
And
function SearchBlog()
{
var searchQuery = document.searchform.s.value;
if(searchQuery != ""){
var destination = "website.com/s" + searchQuery;
window.open(destination, "_blank");
}
return false;
}

html form submission - javascript does not submit input button

Here's the problem: I have a simple form with three buttons and some hidden input fields. Depending on the button pressed (different name="" values), the action does something different.
I am now trying to add a confirmation dialog box to this form by doing this:
<form method="POST" action="/action" onsubmit="return confirmFormSubmit(this);">
<input type="submit" name="one" value="This">
<input type="submit" name="two" value="That">
<input type="submit" name="three" value="Something else">
</form>
<script type="text/javascript">
function confirmFormSubmit(obj)
{
window.event.preventDefault();
jConfirm('Are you sure you want to do this?', 'Awaiting confirmation', function(r) {
if (r == true) {
obj.form.submit();
} else {
return false;
}
});
}
</script>
When I click OK, the action happens, but the input button is not submitted.
Doing 'document.location = obj.form.action;' is not an option because that will not submit the POST parameters.
How can I make the damn thing submit the input fields and not just call the action?
I think that it is because the onsumit method overrides the action in your form declaration.
I would actually change the button of the form and make it a button linked to a javascript method that performs required tests and submit values to the right action.
<form method="POST" action="/action">
<a href="javascript: confirmFormSubmit(this)">
<input type="button" name="three" value="Something else">
</a>
</form>
something like this should be working

Categories