I am trying the submit the form on button click but want user to confirm whether he is sure or not.
I have mutiple submit button on form and I just want pop-up in case of delete.
When I make the type of my button submit. My form gets submitted twice If I confirm else It gets submitted once (I don't want it to submitted in that case).
I have multiple form on the page. That's why I am trying to submit the form getting parent Node and not using getElementbyId.
JavaScript function
function deleteEvent(btn){
var confirmed=confirm('Do you want to delete the event?');
if(confirmed){
var f = btn.parentNode;
f.submit();
}
else{
return false;
}
}
HTML Code
<form action="#" method="POST">
<input type="button" name="delete" value="Delete" onClick ="deleteEvent(this)">
</form>
Thanks.
Working Solution:
<input type="submit" name="delete" value="Delete" onClick ="return confirm('Do you want to delete the event?');">
try this
use onclick="return deleteEvent(this);" if button type is submit
<input type="submit" name="delete" value="Delete" onclick="return deleteEvent(this);">
Related
I need to submit the form data to backend (using python flask), but I'm not allowed to use button with type="submit", I can only use a regular button (with type="button"), and implement the submit logic in Javascript. How to do this?
Use onclick event on the <button> and the <form> DOM submit method
function submitForm() {
let form = document.getElementById("simple-form");
// do something here before submitting the form
form.submit();
}
<form id="simple-form">
<label>Name</label>
<input type="text" />
<button id="btn-submit" type="button" onclick="submitForm()">Submit</button>
</form>
I am using node.js/express to create a webpage.
I currently have a form with some input and a submit button which is trigger by the click of another button currently on the page
This is the code for my form:
<form name= "form" id="form-id" action="http://localhost:1337/process_post" method="POST">
<input type="hidden" name="hiddentext" id="textarea"/>
<input hidden type="submit" name="submitbutton" id="submit_button"/>
</form>
This is my button (which triggers the submit for the form to be clicked during the onclick event)
<INPUT type="button" id="button-id" value="Save" onclick="this.disabled=true;load_page('form-id')" />
This is my JS script to click the submit button
function load_page(formId){
document.getElementById("submit_button").click();
}
The issue I have is that the form is being submitted twice. I am unsure why this happens and how to fix the issue. Any tips?
You need to return false in your onclick attribute so as to prevent the default action, which is to submit the form (which you're already doing). Like this:
<INPUT type="button" id="button-id" value="Save" onclick="this.disabled=true;load_page('form-id');return false;" />
I have this code:
var changedate = document.getElementById("date");
changedate.onchange = submitform;
function submitform() {
document.forms["form"].submit();
}
However I have 3 submit buttons in my form, I want to call the submit button with ID 'save' with this function.
How, can I do this, because at the moment when I change the value in 'date' the form gets submitted, but not in the way i manually push the submit button 'save' at the bottom of the form.
You can use :
document.getElementById("myForm").submit();
where myForm is id of your form.
Try adding <input type="hidden" name="submitbutton"> . In each button, before submitting set the value of this hidden field accordingly. In the code executed when date is changed, set the hidden value as how you set for the save button Eg:
<form method="post" action="something.php">
<input type="submit" value="save" onsubmit="setType('save');return true;"/>
<input type="submit" value="btn2" onsubmit="setType('btn2');return true;"/>
<input type="submit" value="btn3" onsubmit="setType('btn3');return true;"/>
<input type="hidden" id="hdn" value=""/>
</form>
In your js,
function setType(msg){document.getElementById('hdn').value=msg;}
and when date is changed,
setType('save');
document.forms["form"].submit();
Make sure you catch correctly in your php/asp file.
I think the problem comes after submitting the form:
There is a part:
<?php
if (isset($_POST['save'])) {
// do something
}
?>
This is not executed because I dont click on the submit button 'save' in the form.
I have a .jsp page which also uses struts2. This page has two buttons on it. A submit, and a reset button. I wish the enter key to be bound to the submit button. Any advice on how to do this? I am a Struts2/JSP novice. the screen is a simple login screen.
<s:form action="postLogin" onSubmit="return validate()">
<div style="padding-left:50px">
<s:submit type="button" value="Submit" cssClass="buttonRounded" name="submitButton" label="%{getText('prompt.button.submit')}"/>
<button value="Reset" class="buttonRounded" onclick="resetPage()">Reset</button>
</div>
shortcut.add("Enter",function() {
document.getElementById("myForm").submit();
});
Name your form myForm.
I have an input text box and a search submit button, and when user clicks the Search submit button, I want to redirect user to url http://testsearch/results.aspx?k=<value of text box k>, for example, if user put "StackOverflow" into text box and then clicks the search button, I want to redirect user to the following page,
http://testsearch/results.aspx?k=StackOverflow
I find when I use button for Search button, it works (see below source codes),
<input type="text" id="k" name="k" />
<input type="button" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>
but when I use submit for Search button, it does not works (see below source codes), why?
<input type="text" id="k" name="k" />
<input type="submit" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>
thanks in advance,
George
You can even use the submit button this way:
<input type="submit" id="Go" value="Search" onclick="document.location='http://testsearch/results.aspx?k=StackOverflow'; return false;" />
Semantically submit button is used to submit forms not redirect pages. You should use normal button type for this. However as i showed you can use the submit button too but that is not semantic i think.
The below line prevents the form from being submitted.
return false;
That is what you are missing in your code :)
Thanks
<button>-elements and <input type="button"/> don't do anything by default, unless you tell them to do something with Javascript.
<input type="submit"/> will submit the form it is in.
So, if <input type="submit"/> won't work, you got it probably not in the <form/>-element itself.
If that's the only field in your form, simply set the form's method to "get" and it'll work.
<html>
<body>
<form action="http://localhost/mytest" method="get" >
<input type="text" id="k" name="k" />
<input type="submit" id="Go" value="Search" />
</form>
</body>
</html>
<button> means "put a button in the page and do whatever the onclick event says". So if you don't write an onclick handler the page doesn't do nothing.
If you use submit is ok, because you want to redirect to another page.
If you want to use button anyway you can do this way:
<script>
function doTheSearch() {
// do the submit mannually
document.getElementById('myForm').submit();
}
</script>
<form id="myForm" action="results.aspx">
<input type="text" id="k" name="k" />
<input type="button" id="Go" value="Search" onclick="doTheSearch();" />
</form>
Warning: submit button with onclick
If you have a submit button (inside a form, it is, a working submit button) with an onclick event, some browsers will:
1) execute onclick
2) execute submit
your onclick tries to redirect but the submit button wins.
If you want to avoid it you have some options:
a) change submit button to normal button
b) avoid the submit thing (add onsubmit="return false;" to form element)
c) use the submit procedure (form action="..." method="get", no onclick event), the browser will be happy and you can control the submit in the onsubmit event (you can cancel it or not).
make sure you got the input's in a form tag with a GET method:
<form action='http://testsearch/results.aspx' method='GET'>
... inputs
</form>
If I'm understanding correctly, it is not working because it is not in a form tag. If you put it in a form tag with method="get" it should work. The button works because it does not have to be in a form.