I did a new tab function if I click a submit button using java script. The problem is the location of the parent page, if I click submit button there's a new tab but if I insert a code of location changing it doesn't work . Please help me.
<script type="text/javascript">
$("form").submit(function() {
$("form").attr('target', '_blank');
return true;
});
</script>
<form action="test.php" method="POST" target="_blank">
<input type="submit" name="submit" value="Submit" onclick="document.location.href='home.php';"/>
</form>
Although I'm not really sure why you want to do this, it seems that mixing up the change of the document.location.href while the submit event is happening generates some kind of conflict.
In order to separate those two I came up with the following approach by postponing the setting of document.location.href using setTimeout. Here's a working DEMO.
HTML
<form action="test.php" method="POST" target="_blank">
<input type="button" id="submit-btn" value="Submit" />
</form>
JS
$('#submit-btn').on('click', function () {
setTimeout(function () { document.location.href = 'test.php'; }, 100);
$("form").attr('target', '_blank');
$("form").submit();
});
I would set the attributes like:
attr("action", "location.php");
Then edit the onclick like window.location.href
Don't know if this is what you wanted and if helped
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'm trying to set a element to disable after clicking (after submitting the data). The issue is, when I use the javascript to disable on click, the button is disabled, but does does not submit the information.
function disableButton(btn) {
document.getElementById(btn.id).disabled = true;
alert("Button has been disabled.");
}
<center><button type="submit" id="btn1" name="Submit" onclick="disableButton(this)">Submit</button></center>
Does anyone know how to fix this? I'm not very experienced. I've had it work with the a form, but not as a element.
Thanks.
Try to delay the disabling with a timeout 0. This should disable the button at the end of script's lifecycle, allowing the form to post before :
function disableButton(btn) {
setTimeout( () => {
btn.disabled = true;
}) // No need to set a duration for the timeout
}
<form>
<button type="submit"
onclick="disableButton(this)"
action="/test">Submit</button></form>
Now if you check your console, you see a GET request being made.
Also, <center> is deprecated and not supported in HTML5.
Why don't you try putting the disable function on the form?
Here's the code and site if you are:
** https://www.the-art-of-web.com/javascript/doublesubmit/ **
<form method="POST" action="..." onsubmit="myButton.disabled = true; return true;">
<input type="submit" name="myButton" value="Submit"> </form>
Also, try to use onsubmit.
If you are using js validation you can use this
<form method="POST" action="..." onsubmit="return checkForm(this);">
...
<input type="submit" name="myButton" value="Submit">
</form>
<script type="text/javascript">
function checkForm(form)
{
//
// validate form fields
//
form.myButton.disabled = true;
return true;
}
</script>
If you use addEventListener, you won't have this problem See below for an explanation and examples. Also note that this is a Chrome/Safari specific bug from what I have tested.
What you were doing disables the button during the processing of the click. When the browser checks if it should submit the form, it doesn't (though I haven't found something that says it should in the standard).
If you handle it in the submit event of the form, the check on whether the button was disabled has already passed.
Disables using onclick so you still see it here in this example.
<form>
<button type="submit" action="/test" onclick="this.disabled = true">Submit</button>
</form>
Disables it in the onsubmit handler, so it disappears here in this example.
<form onsubmit="this.querySelector('button').disabled = true">
<button type="submit" action="/test">Submit</button>
</form>
However, as I worked on a version without inline handlers, I realized the (seemingly incorrect) behavior cannot be reproduced when done that way.
I would suggest you use JS event handlers and you should handle the submit event since it is more accurate semantically (and even using addEventListener does not fix the problem in Safari).
function queryRegister(query, eventName, handler) {
document.querySelector(query).addEventListener(eventName, handler);
}
queryRegister("#click-handler-form button", "click", (e) => {
e.target.disabled = true;
});
queryRegister("#submit-handler-form", "submit", (e) => {
e.target.querySelector("button").disabled = true;
});
Both submit without inline handlers
<hr />
button.onclick
<form id="click-handler-form">
<button type="submit" action="/test">Submit</button>
</form>
form.onsubmit
<form id="submit-handler-form">
<button type="submit" action="/test">Submit</button>
</form>
If <button type="submit"> tag is not inside <form></form> there is nothing to submit. <button type="submit"> submits only it's parent <form>
Try to submit the form with Javascript.
function disableButton(btn) {
document.getElementById(btn.id).disabled = true;
document.getElementById('formId').submit();
alert("Button has been disabled.");
}
I have a form with a javascript submit function.
I have 3 links (anchor tags) in the form & would like to set different values to the hidden parameter on submit based on the link clicked
Form submit works fine generally, but if I try to open the link in a new tab, form is not submitted. The alert within the javascript function is
not printed. Does anyone have any idea to fix this?
Below is the Sample Code :
<html>
<head>
<script type="text/javascript">
function submitForm(actionParam) {
alert("in submitForm");
document.getElementById("action").value = actionParam;
document.forms['myForm'].action = action;
document.forms['myForm'].submit();
}
</script>
</head>
<body>
<form name="myForm" id="myForm" method="post" action="/businesspanel">
<input type="hidden" id="action" name="action" value="" />
Action 1</span>
Action 2</span>
Action 3</span>
</form>
</body>
</html>
Opening a link in a new window bypasses the JavaScript. Don't use links / JS to submit forms.
Just use submit buttons. You can even send your identifying values without involving JS.
<button name="action" value="action1">Action 1</button>
<button name="action" value="action2">Action 2</button>
<button name="action" value="action3">Action 3</button>
document.forms['myForm'].action = action;
"action" is not defined here.If u want to open the link in new tab,just do:
document.forms['myForm'].target= '_blank';
I know very little javascript. after going page to page, I created this, hoping this would work. but for some reason, I have no idea why this doesn't work.
<form onsubmit="goToPage()" method="get">
<input id="url">
<input type="submit">
</form>
<script>
function goToPage()
{
var initial = "http://www.youtube.com/embed/";
window.location.replace(initial+document.getElementById("url").value);
}
</script>
Now, I thought when I submitted the form, It would run toToPage(), and redirect me to the embedded version for youtube. However, it's not.
I found that I could do onclick="goToPage()" for the input, but I don't want to have to click the input. I want the ability to either click "enter" or click on submit.
You must return false in onsubmit function, so the page will redirect not submitted by form.
<form onsubmit="return goToPage()" method="get">
<input id="url">
<input type="submit">
</form>
<script>
function goToPage() {
var initial = "http://www.youtube.com/embed/";
window.location.replace(initial+document.getElementById("url").value);
//window.location.href = initial + document.getElementById("url").value;
return false;
}
</script>