I know this question has been asked a lot before, but none of the fixes worked for me. I made a window.location. href thing before and that worked but this one does not. I know the function runs because I tested it with an alert. Can someone see anything wrong here?
<form>
<input type="submit" name="agree" value="agree" onclick="fagree()">
<input type="submit" name="disagree" value="Decline and go to google" onclick="fdisagree()">
</form>
<script type="text/javascript">
function fagree(){
window.location.assign("index.html")
localStorage.setItem("Terms", "true")
}
function fdisagree(){
window.location.href="https://www.google.com/"
return false;
}
</script>
</body>
You can use button type instead of submit, otherwise, well, the form will be submit.
<form>
<input type="button" name="agree" value="agree" onclick="fagree()">
<input type="button" name="disagree" value="Decline and go to google" onclick="fdisagree()">
</form>
<script type="text/javascript">
function fagree(){
window.location.assign("index.html");
localStorage.setItem("Terms", "true"); //This line won't be executed, because the above line will reload the page
}
function fdisagree() {
window.location.href="https://www.google.com/"
return false; //This can be removed because the above line will redirect to google and the return false won't be executed
}
</script>
If you don't need any else form elements than those 2 buttons, you can get ride of the <form></form> and simply use <button>. In example :
<button type="button" name="agree" value="agree" onclick="fagree()">
<button type="button" name="disagree" value="Decline and go to google" onclick="fdisagree()">
Do not put it in the form if you don't have to (if that's the whole form code in the example). You are submitting it before functions have a chance to trigger.
OR:
<form>
<input type="button" name="agree" value="agree" onclick="fagree()">
<input type="button" name="disagree" value="Decline and go to google" onclick="fdisagree()">
</form>
<script type="text/javascript">
function fagree(){
window.location.assign("index.html")
localStorage.setItem("Terms", "true")
}
function fdisagree(){
window.location.href="https://www.google.com/"
return false;
}
</script>
</body>
Related
Im trying to call a function in an html to a javascript file with a button and I think the function is going through because the alert is working but the 2nd part of the js file isnt working (This is the part where the javascript opens the new tab.) Please help.
This is my html file. Don't mind the class="submit_button" thing. I just cut of my styling. And the rest of my popup.html file.
<div>
<form>
<input class="URL_Textbox" id="WebsiteName" name="WebsiteURL_Name" placeholder="URL" >
<input
type="button"
class="submit_button"
onClick="submitFunction()"
value="Go"
>
</form>
</div>
This is my javascript file
function submitFunction() {
alert("1234567890")
location.href("https://www."+document.getElementById('WebsiteURL_Name').value,"_self")
}
Thanks for taking the time to respond and read my question!
The id should be WebsiteName. I suppose, you want to open a new browser window with the inserted value. That can be done with window.open(...).
function submitFunction() {
alert("1234567890")
window.open("https://www." + document.getElementById('WebsiteName').value, "_self")
}
<div>
<form>
<input class="URL_Textbox" id="WebsiteName" name="WebsiteURL_Name" placeholder="URL">
<input type="button" class="submit_button" onClick="submitFunction()" value="Go">
</form>
</div>
You need to use location.href this way:
location.href = 'someURL';
About Window.location property (MDN)
function submitFunction() {
location.href = "https://www." + document.getElementById('WebsiteName').value;
}
<div>
<form>
<input class="URL_Textbox" id="WebsiteName" name="WebsiteURL_Name" placeholder="stackoverflow.com" >
<input
type="button"
class="submit_button"
onClick="submitFunction()"
value="Go"
>
</form>
</div>
<body onload="getfocus()">
<input id='txt1' />
<input type="button" onblur="getfocus()" value="Test"/>
<script>
function getfocus(){
document.getElementById("txt1").focus();
}
</script>
</body>
In the above code, getfocus() works as expected on body onload but onBlur of button it doesn't work as expected i.e. txt1 doesn't get focus.
kindly, let me know why txt1 is not getting focused on 'onblur' event.
You need to add a tab-index attribute to #txt1, otherwise your browser will tab out of the document (which for me using Chrome went to the address bar).
<body onload="getfocus()">
<input id='txt1' tab-index="1" />
<input type="button" onblur="getfocus()" value="Test"/>
<script>
function getfocus(){
document.getElementById("txt1").focus();
}
</script>
</body>
As an aside, you'll notice that if you add another arbitrary third input after the second one, it will start working too.
Edit
Try adding onblur='getfocus() on #txt and onclick="getfocus()" on the button.
SNIPPET
It seems that tab-index='1' works great.`
<body onload="getfocus()">
<input id='txt1' tab-index='1' onblur='getfocus()' />
<input type="button" onclick="getfocus()" value="Test" />
<script>
function getfocus() {
document.getElementById("txt1").focus();
}
</script>
</body>
In the example below I've attached a function main to an input field. the function contains instructions to send an alert with a variable message (whatever the user enters into the field).
<form>
<input type="text" onsubmit="main()" />
<input type="submit" />
</form>
<script>
function main (param) {
alert(param)
}
//main();
</script>
It doesn't work, but I believe that's because I've made some noob error that I'm failing to recognize. The result of a functioning version of this code would be the ability to submit "hello world" and produce an alert box stating 'hello world' (without quotes).
But, further than this, I'd like to be able to pass the likes of main("hello world"); or just alert('hello world'); to the input field to produce the same result.
The problem I think I'm running into is that the page is refreshed every time I submit. There are a few questions on here with similar problems where people have suggested the use of onsubmit="main(); return false;", but in fact this does not seem to work.
Looks like you want to eval() the value of the input.
Use with caution, has security impact...
Returning false from a handler stops the regular action so you have no redirect after submitting:
<form onsubmit="main(); return false;">
<input id="eval-input" type="text" />
<input type="submit" />
</form>
<script>
function main () {
eval(document.getElementById('eval-input').value);
}
</script>
Here's how you can detect a form submission:
<form onsubmit="foo()">
<input type="text">
<input type="submit">
</form>
<script>
function foo(){
alert("function called");
}
</script>
I however advise you do this (preference), if you desire to manage the form data through a function:
<form id="myform">
<input type="text">
<input type="submit">
</form>
<script>
document.getElementById("myform").onsubmit=function(event){
alert("function called");
//manage form submission here, such as AJAX and validation
event.preventDefault(); //prevents a normal/double submission
return false; //also prevents normal/double a double submission
};
</script>
EDIT:
use eval() to execute a string as JavaScript.
jQuery way:
You create event listener which will be triggered when user click 'submit'.
<form>
<input type="text" id="text"/>
<input type="submit" />
</form>
<script>
$( "form" ).submit(function( event ) {
event.preventDefault();
alert( $('#text').val() );
});
</script>
To prevent page reloading - you should use event.preventDefault();
Pure JavaScript:
<form>
<input type="text" id="text"/>
<input type="submit" id="submit" />
</form>
<script>
var button = document.getElementById("submit");
var text = document.getElementById("text");
button.addEventListener("click",function(e){
alert(text.value);
},false);
</script>
If I understand what you want to do, you can call the function like this, and writing params[0].value you can access the input value:
function main(params) {
//dosomething;
document.write(params[0].value);
}
<form onsubmit="main(this)">
<input type="text">
<input type="submit">
</form>
Try something like this
onchange="main()"
onmouseenter, onMouseOver, onmouseleave ...
<input type="text" onmouseenter="main()" />
I'm trying to create a search option.
If someone is using my search field, they can press the "Search-Button" or just press the enter key to start the function.
My problem is that if they press the enter key within the text box it starts my function and after the function it calls the button click.
I've used Google but couldn't solve it, even tried to disable the button while myFunc() is called.
<!DOCTYPE html>
<html>
<body>
<form>Search
<br>
<input type="text" id="searchField" onKeyDown="if(event.keyCode==13) myFunc()">
<br>
<button type="button" id="myButton" onClick="myFunc()">Search</button>
</form>
</body>
</html>
Looks like you want to stop the event propagation in this case.
I've changed your code to the following:
<!DOCTYPE html>
<html>
<body>
<form>
Search<br>
<input type="text" id="searchField" onKeyDown="if(event.keyCode==13){console.log('Hello World from Input'); return false;}">
<br>
<button type="button" id="myButton" onClick="console.log('Hello World from Button')">Search</button>
</form>
</body>
</html>
Pressing enter while the input element has the focus gives me only Hello World from Input at the console.
I think this is what you are asking for: https://jsfiddle.net/7vf9pz8u/1/
HTML
<form>Search
<br>
<input type="text" id="searchField" onKeyDown="pressEnter()">
<br>
<button type="button" id="myButton" onClick="myFunc()">Search</button>
</form>
JavaScript
function pressEnter() {
if (event.keyCode == 13) {
alert("working");
}
}
Handle the onKeyDown separately in a function (onEnter) and use event.preventDefault(); block the default action.
See the below code.
window.onEnter = function () {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
}
<form>
Search<br>
<input type="text" id="searchField" onKeyDown="onEnter()">
<br>
<button type="button" id="myButton" onClick="myFunc()">Search</button>
</form>
http://jsfiddle.net/kishoresahas/cvyzLdy8/
I think you should prevent form submitting by event.preventDefault() in onkeydown function.
I have tested your code in chrome and firefox browser and it is working perfectly as you wish, I make some update in your code to show that it is actually working fine. Follows:
<!DOCTYPE html>
<html>
<body>
<script>
function myFunc(){
alert("Typed text.: "+document.getElementById("searchField").value)
}
</script>
<form>
Search<br>
<input type="text" id="searchField" onKeyDown="if(event.keyCode==13) myFunc()">
<br>
<button type="button" id="myButton" onClick="myFunc()">Search</button>
</form>
</body>
</html>
I have just done the code for submit the form using JavaScript.
It works in all browsers except in Internet Explorer 6.
I have pasted my HTML form and JavaScript code below.
Can you please find what's the problem with it?
JavaScript:
<script type="text/javascript" language="javascript">
function dodelete(image_id)
{
if (confirm("Are you sure want to delete this image?"))
{
document.getElementById('image_id').value=image_id;
document.del_form.submit();
}
}
</script>
HTML Code:
<form name="del_form" id="del_form" method="post">
<input type="hidden" name="do" id="do" value="delete" />
<input type="hidden" name="image_id" id="image_id" />
</form>
Function Call Code:::
<p class="video">
<a href="javascript:void(0)" onclick="dodelete('<?php echo $row['image_id']?>')">
<img src="<?php echo $cfg->admin_image_path; ?>/delete_icon1.gif" border="0" alt="Delete"/>
</a>
</p>
What is returned by:
document.getElementById('image_id')
It returns one INPUT element of collection of elements?
Try to replace:
document.getElementById('image_id').value=image_id;
with:
document.del_form.image_id.value=image_id;
OnSubmit call for javascript would help.
<form name="del_form" id="del_form" onsubmit="dodelete(value);" >
<input type="hidden" name="do" id="do" value="delete" />
<input type="hidden" name="image_id" id="image_id" />
</form>
There are two things I'd like to try, I'm not sure why or when this doesn't work it seems random, first try to set a timeout for the submit :
document.doSubmit = function() {
document.del_form.submit();
}
setTimeout("document.doSubmit();", 100);
Sometimes, just return something after the click works :
<input type="hidden" name="image_id" id="image_id" onclick="submitFormFunction(); return false;” />
What happens if you replace:
document.del_form.submit();
with:
document.getElementById('del_form').submit()
Try to move method='POST' to the beginning of form element definition.
I mean -- method attribute should be the first attribute of form element.
If I remember well, this fixed some problems with submitting forms on IE6.
I have edited your code a little bit.
<script type="text/javascript" language="javascript">
function dodelete(image_id)
{
if (confirm("Are you sure want to delete this image?"))
{
document.getElementById('image_id').value=image_id;
document.del_form.submit();
}
return false;
}
</script>
and the HTML with some test Image ID and it works in IE6
<form name="del_form" id="del_form" method="post" onSubmit="return(dodelete('2'));">
<input name="do" id="do" value="delete" />
<input name="image_id" id="image_id" />
<input type="submit" value="Submit">
</form>
Let's try again :).
What happen after replacing:
onclick="dodelete('<?php echo $row['image_id']?>')">
with:
onclick="dodelete('<?php echo $row['image_id']?>'); return false;">
What exactly doesn't work with your code? Throw JS error, there is no server request, values in request are empty?
And (maybe the most important question) -- where is action attribute for your del_form form?
replace
<a href="javascript:void(0)"
with
<a href="#"
IE have problem with that for the dom that fires the JS submit.