I am trying to figure out this code:
<script>
function process()
{
var url="https://stackoverflow.com/questions/" + document.getElementById("url").value;
location.href=url;
return false;
}
</script>
<form onSubmit="return process();">
URL: <input type="text" name="url" id="url"> <input type="submit" value="go">
</form>
What I want to happen is if the user enters 11811782 in the box the page Form value creates a url will open, but now on onsubmit I want a modal/popup open instead. I found this page:
How to call multiple JavaScript functions in onclick event?
and also this link: onclick open window and specific size
I tried to implement those suggestions into code but it would not work.
Seeing as I am not 100% sure if you wanted a popup or a new window entirely this is what I came up with:
<form onSubmit="process(event)">
URL: <input type="text" name="url" id="url"> <input type="submit" value="go">
</form>
<script>
function process(e)
{
e.preventDefault();
var url="https://stackoverflow.com/questions/" + document.getElementById("url").value;
// location.href=url;
var popup = window.open(url,'mypopup','height=500,width=500');
if (window.focus) {popup.focus()}
return false;
}
</script>
preventDefault is in place to make sure that the form does not actually submits.
Related
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
My research is pointing me to Ajax and/or JQuery, but I wanted to ask to make sure I understand and move in the right direction.
I've been looking to use a javascript onclick function to create a popup(alert) asking to confirm that I want to proceed and show the changes I'm about to make.
I hoped that I could use PHP $_POST or GET to echo the change in the popup/alert window. However without the page refresh it appears I can't do this, but looking for a confirmation? Should I be looking for Ajax to do this? Any thoughts/suggestions would likely give me a head start as php/ajax is sort of foreign to me.
Sample code:
<script>
function clicked() {
if (confirm('Do you want to submit? <?php if(isset($_POST['city'])){$city = $_POST['city'];echo $city;}?>'))
{
yourformelement.submit();
} else {
return false;
}
}
</script>
</head>
<form action="output.php" method="post">
<input name="city">
<input type="submit" onclick="clicked();" value="Button" />
</form>
</html>
You can get the input value with jQuery before submitting:
<form action="output.php" method="post" id="form">
<input name="city" id="city_input">
<input type="submit" value="Button" />
</form>
<script>
$('#form').submit(function(e) {
e.preventDefault();
let cityInputVal = $('#city_input').val();
if (confirm('Do you want to submit ' + cityInputVal + '?'))
{
this.submit();
} else {
return false;
}
});
</script>
The preventDefault() function stops the form submission and therefore, page refresh.
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">
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...
}
Is this possible?
I have input box and a submit button.
The user will input their "reference number" (example: "hello123")
user will click the submit button.
after clicking the submit button, the javascript will open url link in a New browser Tab with a url link (which i assigned) plus the input of the user (which is hello123)
Assigned url is: www.mywebsite.com/
after clicking the submit button, the url to open by javascript is: www.mywebsite.com/print/hello123/
Check the demo: http://jsfiddle.net/Gv5bq/
HTML:
<input type="text" id="text" />
<input type="button" id="btn" value="Submit" />
jQuery:
$("#btn").click( function() {
var url = "http://www.mywebsite.com/print/" + $("#text").val();
window.open(url);
});
UPDATED: (simple JS version)
http://jsfiddle.net/Gv5bq/1/
<input type="text" id="text" />
<input type="button" id="btn" value="Submit" onClick="javascript: window.open('http://www.mywebsite.com/print/' + document.getElementById('text').value);" />
If you do not want to use jQuery for that here is an approach in pure js.
Define your html-form:
<form action="http://www.mywebsite.com/" method="get" target="_blank" id="my-form">
<input type="text" name="reference-number" id="reference-number" value="" />
<input type="submit" value="submit" />
</form>
Define and attach the handler for submission:
<script type="text/javascript">
var form = document.querySelector('#my-form'),
text_field = document.querySelector('#reference-number');
function submitHandler(){
// build the new url and open a new window
var url = form.action + 'print/' + text_field.value;
window.open(url);
// prevent form from being submitted because we already
// called the request in a new window
return false;
}
// attach custom submit handler
form.onsubmit = submitHandler;
</script>
<input type="text" value="" id="id"/>
<button type="button" id="go">GO</button>
$('#go').click(function(){
var id=$('#id').val();
var url="http://www.mywebsite.com/hello";
var new_url= url+id;
window.open(new_url);
});
Fiddle