In my page head:
<script>
function formula()
{
document.forms["inquire"]["search"].value.scrollIntoView();
}
</script>
In my page body:
<div id="nav">
<form id="inquire" name="inquire" onSubmit="return false;">
Search or inquire here: <input type="text" id="search" name="search" value="<?php search($_GET['search']) ?>" autocomplete="off"/>
<input type="button" name="btnSearch" id="btnSearch" onClick="formula();"/>
</form>
</div>
What I want to happen here is that, when btnSearch is clicked, it activates formula(), taking the value from search in form inquire, and then scrolling to the value in a separate div I have called formula. This works if I put document.getElementById(this.form.search.value).scrollIntoView(); directly into the onClick for btnSearch, however it refuses to work no matter how I set it up as a function. Does anyone here know why it might be doing this, or how I can fix it?
It's not working because your function is erroneous:
function formula() {
document.getElementById(document.forms.inquire.search.value).scrollIntoView();
}
That code gets the value of the search field and uses it for an "id" lookup. It'd probably be a good idea to check that there actually is an "id" with the value typed in:
function formula() {
var element = document.getElementById(document.forms.inquire.search.value);
if (element) element.scrollIntoView();
}
Related
I have an issue while using buttons inside form. I want that button to call function. It does, but with unwanted result that it refresh the page.
My simple code goes like this
<form method="POST">
<button name="data" onclick="getData()">Click</button>
</form>
On clicking the button, the function gets called with page refreshed, which resets all my previous request which affects the current page which was result of the previous request.
What should I do to prevent the page refresh?
Add type="button" to the button.
<button name="data" type="button" onclick="getData()">Click</button>
The default value of type for a button is submit, which self posts the form in your case and makes it look like a refresh.
Let getData() return false. This will fix it.
<form method="POST">
<button name="data" onclick="return getData()">Click</button>
</form>
All you need to do is put a type tag and make the type button.
<button id="btnId" type="button">Hide/Show</button>
That solves the issue
The problem is that it triggers the form submission. If you make the getData function return false then it should stop the form from submitting.
Alternatively, you could also use the preventDefault method of the event object:
function getData(e) {
e.preventDefault();
}
HTML
<form onsubmit="return false;" id="myForm">
</form>
jQuery
$('#myForm').submit(function() {
doSomething();
});
<form method="POST">
<button name="data" onclick="getData()">Click</button>
</form>
instead of using button tag, use input tag. Like this,
<form method="POST">
<input type = "button" name="data" onclick="getData()" value="Click">
</form>
If your button is default "button" make sure you explicity set the type attribute, otherwise the WebForm will treat it as submit by default.
if you use js do like this
<form method="POST">
<button name="data" type="button" id="btnData" onclick="getData()">Click</button>
</form>
**If you use jquery use like this**
<form method="POST">
<button name="data" type="button" id="btnData">Click</button>
</form>
$('#btnData').click(function(e){
e.preventDefault();
// Code goes here
getData(); // your onclick function call here
});
A javascript method to disable the button itself
document.getElementById("ID NAME").disabled = true;
Once all form fields have satisfied your criteria, you can re-enable the button
Using a Jquery will be something like this
$( "#ID NAME" ).prop( "disabled", true);
This one is the best solution:
<form method="post">
<button type="button" name="data" onclick="getData()">Click Me</button>
</form>
Note: My code is very simple.
For any reason in Firefox even though I have return false; and myform.preventDefault(); in the function, it refreshes the page after function runs. And I don't know if this is a good practice, but it works for me, I insert javascript:this.preventDefault(); in the action attribute .
As I said, I tried all the other suggestions and they work fine in all browsers but Firefox, if you have the same issue, try adding the prevent event in the action attribute either javascript:return false; or javascript:this.preventDefault();. Do not try with javascript:void(0); which will break your code. Don't ask me why :-).
I don't think this is an elegant way to do it, but in my case I had no other choice.
Update:
If you received an error... after ajax is processed, then remove the attribute action and in the onsubmit attribute, execute your function followed by the false return:
onsubmit="functionToRun(); return false;"
I don't know why all this trouble with Firefox, but hope this works.
Return function is not working in all the cases.
I tried this:
<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>
It didnt work for me.
I tried to return false inside the function and it worked for me.
function Reset()
{
.
.
.
return false;
}
I was facing the same problem. The problem is with the onclick function. There should not be any problem with the function getData. It worked by making the onclick function return false.
<form method="POST">
<button name="data" onclick="getData(); return false">Click</button>
</form>
I updated on #JNDPNT answer, this way the function (getData()) doesn't have to return false;
<form method="POST">
<button name="data" onclick="getData(); return false;">Click</button>
</form>
A simple issue I found is that if the function that you're trying to call is called submit, the form will be submitted either way.
You will need to rename the function for the page to not be reloaded
Add e.preventDefault(); in the starting of the function to be called when the button is clicked
Example:
const signUp = (e) => {
e.preventDefault()
try {
} catch (error) {
console.log(error.message)
}
}
The button code:
<input
type='submit'
name='submit-btn'
id='submit-btn'
value='Sign Up'
onClick={signUp}
/>
You can use ajax and jquery to solve this problem:
<script>
function getData() {
$.ajax({
url : "/urlpattern",
type : "post",
success : function(data) {
alert("success");
}
});
}
</script>
<form method="POST">
<button name="data" type="button" onclick="getData()">Click</button>
</form>
I have an issue while using buttons inside form. I want that button to call function. It does, but with unwanted result that it refresh the page.
My simple code goes like this
<form method="POST">
<button name="data" onclick="getData()">Click</button>
</form>
On clicking the button, the function gets called with page refreshed, which resets all my previous request which affects the current page which was result of the previous request.
What should I do to prevent the page refresh?
Add type="button" to the button.
<button name="data" type="button" onclick="getData()">Click</button>
The default value of type for a button is submit, which self posts the form in your case and makes it look like a refresh.
Let getData() return false. This will fix it.
<form method="POST">
<button name="data" onclick="return getData()">Click</button>
</form>
All you need to do is put a type tag and make the type button.
<button id="btnId" type="button">Hide/Show</button>
That solves the issue
The problem is that it triggers the form submission. If you make the getData function return false then it should stop the form from submitting.
Alternatively, you could also use the preventDefault method of the event object:
function getData(e) {
e.preventDefault();
}
HTML
<form onsubmit="return false;" id="myForm">
</form>
jQuery
$('#myForm').submit(function() {
doSomething();
});
<form method="POST">
<button name="data" onclick="getData()">Click</button>
</form>
instead of using button tag, use input tag. Like this,
<form method="POST">
<input type = "button" name="data" onclick="getData()" value="Click">
</form>
If your button is default "button" make sure you explicity set the type attribute, otherwise the WebForm will treat it as submit by default.
if you use js do like this
<form method="POST">
<button name="data" type="button" id="btnData" onclick="getData()">Click</button>
</form>
**If you use jquery use like this**
<form method="POST">
<button name="data" type="button" id="btnData">Click</button>
</form>
$('#btnData').click(function(e){
e.preventDefault();
// Code goes here
getData(); // your onclick function call here
});
A javascript method to disable the button itself
document.getElementById("ID NAME").disabled = true;
Once all form fields have satisfied your criteria, you can re-enable the button
Using a Jquery will be something like this
$( "#ID NAME" ).prop( "disabled", true);
This one is the best solution:
<form method="post">
<button type="button" name="data" onclick="getData()">Click Me</button>
</form>
Note: My code is very simple.
For any reason in Firefox even though I have return false; and myform.preventDefault(); in the function, it refreshes the page after function runs. And I don't know if this is a good practice, but it works for me, I insert javascript:this.preventDefault(); in the action attribute .
As I said, I tried all the other suggestions and they work fine in all browsers but Firefox, if you have the same issue, try adding the prevent event in the action attribute either javascript:return false; or javascript:this.preventDefault();. Do not try with javascript:void(0); which will break your code. Don't ask me why :-).
I don't think this is an elegant way to do it, but in my case I had no other choice.
Update:
If you received an error... after ajax is processed, then remove the attribute action and in the onsubmit attribute, execute your function followed by the false return:
onsubmit="functionToRun(); return false;"
I don't know why all this trouble with Firefox, but hope this works.
Return function is not working in all the cases.
I tried this:
<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>
It didnt work for me.
I tried to return false inside the function and it worked for me.
function Reset()
{
.
.
.
return false;
}
I was facing the same problem. The problem is with the onclick function. There should not be any problem with the function getData. It worked by making the onclick function return false.
<form method="POST">
<button name="data" onclick="getData(); return false">Click</button>
</form>
I updated on #JNDPNT answer, this way the function (getData()) doesn't have to return false;
<form method="POST">
<button name="data" onclick="getData(); return false;">Click</button>
</form>
A simple issue I found is that if the function that you're trying to call is called submit, the form will be submitted either way.
You will need to rename the function for the page to not be reloaded
Add e.preventDefault(); in the starting of the function to be called when the button is clicked
Example:
const signUp = (e) => {
e.preventDefault()
try {
} catch (error) {
console.log(error.message)
}
}
The button code:
<input
type='submit'
name='submit-btn'
id='submit-btn'
value='Sign Up'
onClick={signUp}
/>
You can use ajax and jquery to solve this problem:
<script>
function getData() {
$.ajax({
url : "/urlpattern",
type : "post",
success : function(data) {
alert("success");
}
});
}
</script>
<form method="POST">
<button name="data" type="button" onclick="getData()">Click</button>
</form>
I am trying to get a hyperlink element to act as a form submit button. This sort of question has been answered multiple times over the years but, for some reason, I am not able to get it to work even with cut-n-pasted code and I'm wondering if I'm missing something trivially simple that my eyes are too bugged out to see. The full code is here:
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function signup() {
alert("Form is " + document.signup_form);
document.signup_form.submit() ;
}
-->
</script>
</head>
<body>
<?php
echo("Submit is [" . $_POST['submit'] . "]");
?>
<form method="post" name="signup_form" id="signup_form" action="" >
<input type="text" name="from_email" placeholder="e-mail address"><br>
<input type="submit" name="submit" value="Send Email">
Sign Up!<br>
</form>
</body>
</html>
The input submit element ("Send Email") works fine. The hyperlink ("Sign Up!") also works fine and calls the javascript function so that the alert() box in the function shows up.
So, it's just the submit() call that's not doing anything--I even printed out document.signup_form in an alert() box to confirm that it's defined (it is). So what am I missing here?
Thanks for any help!
There is a weird thing with how forms work with Javascript - each field is accessible by using formElement.fieldName. Unfortunately, that means that if you name a field input submit, all of a sudden the built-in formElement.submit() function is replaced by your input element. So in your code, document.signup_form.submit() is failing because it is calling the element, not the method, and you can't call an element as a function. See this SO QA for details.
The fix is easy - change:
<input type="submit" name="submit" value="Send Email">
to:
<input type="submit" name="submitBtn" value="Send Email">
Also, as others have noted, you will want to give your form a valid action. Also, in general it might be preferred to access things by id (document.getElementById()) instead of by things like document.signup_form.
Your <form> element is missing a value in it's action attribute. Quoting the specs:
You also have to specify the URL of the service that will handle the
submitted data, using the action attribute
Link here
I'm trying to run a JS method with a custom text variable as a parameter. I need to be able to write some text in a form, and then send that value to the method to execute it. I'm not sure why it's not working - it seems to be receiving the value of the VALUE as "" or blank. How would I go about doing this?
<FORM NAME="myform" ACTION="" METHOD="GET">
Choose a Place: <INPUT TYPE="text" NAME="inputbox" VALUE="" id = "place"><P>
</FORM>
<button type="button" onclick="buttonGenerator()">Generate Postcard</button>
<script>
var x = document.getElementById('place').value;
function buttonGenerator(){
generate(x);
}
</script>
Your x variable is being set when the script first runs (when the page is loading). You want to avoid setting it until the button is clicked. Simply move it into the function and you should be set:
function buttonGenerator(){
var x = document.getElementById('place').value;
generate(x);
}
I'm working on a simple javascript quiz, and I can't for the life of me get Javascript to submit the form and open the result in the same page, regardless of whether I use location.href, open.window, or whether I set "_self" as the target. Doesn't seem to matter what I do...
function answer() {
var response = document.getElementById('answer').value;
if (response == "correctanswer")
location.href('right.html');
else
location.href('wrong.html');
}
<form onSubmit="answer()" id="answer" target="_self">
<input type="text" maxlength="55" class="box" autofocus />
<input type="submit" class="submit" value="SUBMIT" />
</form>
So, what I want to happen is, when the user submits the form, they go to "right.html" if they typed correctanswer into the text box, or "wrong.html" if they typed anything else.
I've got it running fine, except for the fact that no matter what I do I can't get the resulting page to open in _self, but rather in another window. Every time.
Been driving me crazy all night.
Five things:
Remove the target attribute of form entirely. The default is the same window. Although it doesn't really matter, because:
Cancel the submit event by returning false in your onSubmit, since you're handling the form in your own code. One easy way to do this is have your function return false, and in the onSubmit, return the result of the call.
This line is incorrect:
var response = document.getElementById('answer').value;
form elements don't have a value. You'd want to put the id on the input type="text" element instead.
The href on location is not a function, it's a property. You just assign to it (or just assign directly to location).
This one's a bit subtle: Because you have a global function called answer, and you have an element with an id "answer", there's a conflict: Both want to end up as properties of the window object (one of many reasons not to use old DOM0 onxyz attributes — or global functions, come to that). So you need to change the name of one of them, e.g., change the function to checkAnswer or similar.
So:
<form onSubmit="return checkAnswer();">
<input id="answer" type="text" maxlength="55" class="box" autofocus />
<input type="submit" class="submit" value="SUBMIT" />
</form>
And:
function checkAnswer(){
var response = document.getElementById('answer').value;
if (response == "correctanswer")
location = 'right.html';
else
location = 'wrong.html';
return false;
}
Full Example: Live Copy | Live Source
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form onSubmit="return checkAnswer();">
<input id="answer" type="text" maxlength="55" class="box" autofocus />
<input type="submit" class="submit" value="SUBMIT" />
</form>
<script>
function checkAnswer(){
var response = document.getElementById('answer').value;
if (response == "correctanswer")
location = 'http://jsbin.com/ukifoh/1'; // 'right.html';
else
location = 'http://jsbin.com/ukifoh/2'; // 'wrong.html';
return false;
}
</script>
</body>
</html>
I would recommend always using consistent, useful code indentation, and I'm a big fan of always using blocks, not just statements, with control structures.