If I have a simple html form with two submit buttons:
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="goback" value="Go Back" />
<input type="submit" name="confirm" value="Confirm">
<input type="hidden" name="secret" value="hello"/>
</form>
It is possible to only post the hidden input if the "confirm" submit is clicked?
If the "goback" submit is clicked the hidden input should be ignored. I know how to accomplish this with JavaScript but was wondering if it can be done with just html.
For anyone wondering, this is how you do this in JavaScript:
<script>
var elements = document.getElementsByClassName('submit_form');
elements[0].addEventListener(
'submit',
function(event) {
if(event.explicitOriginalTarget.name === 'goback'){
var hiddenInput = document.querySelector("input[name='step']");
hiddenInput.setAttribute("disabled", "disabled");
}
}
);
</script>
You could put the buttons in 2 separate forms:
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="goback" value="Go Back" />
</form>
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="confirm" value="Confirm">
<input type="hidden" name="secret" value="hello"/>
</form>
That way the secret field will only be posted if the confirm button is clicked.
If you want to do it in the php code you can leave your form as is
and check if isset($_POST["confirm"]) to check if the confirm button was the one clicked.
Related
I created HTML form which has two buttons, one for calling java script for form validations and the other one back to the previous page, the two buttons act as submit and validate the inputs.
Here is the code for the form and the button:
<form id = "myform" method="post" action="SearchForCustomer" onsubmit="return validateForm()">
<input type="submit" value="Search" style="width: 100%;" onclick="toggleTable();" />
<input type="button" value="back" style="width: 100%;" onclick="document.forms[0].action = 'homePage.jsp'; return true;" />
</form>
I want the back button to only back whatever the validations was, any suggestions?
Thanks in Advance.
Actually i didnt get your question but why to use input[type=submit] to goto any page (or back)?
It should be:
<input type="button"...
type="submit" will submit form in either case.
You have two buttons of type submit. Have only 1.
<form id = "myform" method="post" action="SearchForCustomer" onsubmit="return validateForm()">
<input type="submit" name = "searchButton" id = "searchButton" value="Search" style="width: 100%;" onclick="toggleTable();" />
<input type="button" value="back" style="width: 100%;" onclick="document.forms[0].action = 'homePage.jsp'; return true;" />
</form>
So I want to have one login, but I have 2 different forms to distinguish different functions. How do I pass the login forms between the other 2 functions.
I know javascript and vbs, not jquery.
Example:
I want the same user and pass to appy to both forms without having to make 2 seperate inputs
<%
username = Request.Form("username")
password = Request.Form("password")
%>
<input name="username" />
<input name="password" type="password" />
<form action="test.asp?f=test1" method="post">
text inputs with a submit button
</form>
<form action="test.asp?f=test2" method="post">
different inputs with another submit button
</form>
I haven't used ASP Classic for ages so I am not sure if this is a correct answer, but you can give it try. Since you have two buttons and you want to know which button is being clicked. Why don't you give value to each submit button and then give it the same name? For example.
<form action="test.asp" method="post">
<input name="username" />
<input name="password" type="password" />
<input name='action' type="button" value="Submit One" />
<input name='action' type="button" value="Submit Two" />
</form>
The ASP part
If Request.Form("action") = "Submit One" Then
'' First button is clicked
Else
'' Second button is clicked
End If
I think you're possibly over-thinking this.
I'd put the username and password inputs into a single form and have both submit buttons displayed as follows:
<form action="test.asp?f=test1" method="post">
<input name="username" />
<input name="password" type="password" />
<input id="submit-1" type="button" value="Submit One" />
<input id="submit-2" type="button" value="Submit Two" />
</form>
Then, using JavaScript I'd wire up click event handlers on each button such that when the user click either one, the form action URL querystring would be updated before submitting the form.
var button1 = document.getElementById("submit-1");
var button2 = document.getElementById("submit-2");
b1.onclick = function() {
document.form.action = "test.asp?f=test1";
document.form.submit();
}
b2.onclick = function() {
document.form.action = "test.asp?f=test2";
document.form.submit();
}
I have many forms like the following on the page. Now I want change the form action based on which submit button the user clicked (and of course submit the form)
<form action="/shop/products.php" data-ajax="false" method="post">
<div data-role="fieldcontain">
<input name="submit" class="obutn" type="submit" value="Order" />
<input name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
I tried with
$(".obtn").click(function() {
$(this).parent().parent().attr("action", "/shop/products.php");
});
$(".oEbtn").click(function() {
$(this).parent().parent().attr("action", "/shop/extras.php");
});
but the form is always submited to products.php. Can you tell me what's wrong?
Instead of setting the action attribute on the form itself, consider setting formaction attribute on each individual input element.
Docs: http://www.w3.org/TR/html-markup/input.submit.html#input.submit.attrs.formaction
<form data-ajax="false" method="post">
<div data-role="fieldcontain">
<input formaction="/shop/products.php"
name="submit" class="obutn" type="submit" value="Order" />
<input formaction="/shop/extras.php"
name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
There are two typos:
obtn instead of obutn
oEbtn instead of oEbutn
Another suggestion is to use closest("form") to get the form that contains the clicked button.
$(".obutn").click(function() {
$(this).closest("form").attr("action", "/shop/products.php");
});
$(".oEbutn").click(function() {
$(this).closest("form").attr("action", "/shop/extras.php");
});
$("form").on("submit", function () {
alert($(this).attr("action"));
});
JSFIDDLE
Capture the submit event and determine which button was clicked. From that, you can change the action of the form.
Here's a link on how to do that.
How can I get the button that caused the submit from the form submit event?
Also, don't give the form the action until the click happens at all, it is superfluous.
<form data-ajax="false" method="post">
<div data-role="fieldcontain">
<input name="submit" class="obutn" type="submit" value="Order" />
<input name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
What if you try it out with a switch instead? Something like:
<input name="submit" id = "1" class="obutn" type="submit" value="Order" />
<input name="submit" id = "2" class="oEbutn" type="submit" value="Extras" />
And then in JavaScript we have:
//param: The Id attr of the button that was clicked
function postTo(id){
switch(id){
case 1: postProducts();
break;
case 2: postExtras();
break;
default: //Do something else
}
}
Just an idea. Haven´t tested that yet, but maybe it could be helpful. I hope so.
I am new to forms, and Javascript, so please be forgiving.
I have a form that looks like this:
<form method="post" action="control" name="myform">
<input type="submit" name="Name" value="Do A"/>
<input type="submit" name="Name" value="Do B" />
<input type="submit" name="Name" value="Do C" />
<input type="submit" name="Name" value="Close" />
</form>
I need to change this so that there are two buttons, and the form is submitted using javascript dependent on some external conditions, so I want it to look something like this:
<form method="post" action="control" name="myform">
<script>
function submitForm(form){
if(someConditionA){
submit the form so that the script performs same action as if the button Do A had been clicked
} if (someConditionB){
submit the form so that the script performs same action as if the button Do B had been clicked
} if (someConditionC){
submit the form so that the script performs same action as if the button Do C had been clicked
}
}
function closeForm(form){
window.close();
}
</script>
<button name="doAction" onClick="SubmitForm(this.form)">Do Action<\button>
<button name="close" onClick="SubmitForm(this.form)">Close<\button>
</form>
How can I implement the function submitForm?
Thanks
Add a hidden field with the same name as the original submit buttons:
<input type="HIDDEN" name="Name" value=""/>
Set the value of that field based on your conditions:
function submitForm(form){
if(someConditionA){
form.Name.value = "Do A";
} if (someConditionB){
form.Name.value = "Do B";
} if (someConditionC){
form.Name.value = "Do C";
}
form.submit();
}
Change the new Close button to this:
<button name="close" onClick="this.form.Name.value='Close';this.form.submit();">Close<\button>
I haven't tested this, so it may contain a mistake or two, but that's the general idea. (+1 for 'this.form', not many folks know about that, nice.)
Have just figured out the answer to my question:
The way to do it is to have a hidden field:
<input type="hidden" name="Name" value=""/>
Then in the function, set this hidden field to have the same value as the respective button.
Well, you should simply name your submit buttons differently.
<form method="post" action="control" name="myform">
<input type="submit" name="SubmitA" value="Do A"/>
<input type="submit" name="SubmitB" value="Do B" />
</form>
This way, when submitted, the server will be able to distinguish which submit was clicked.
not sure if I got your Problem right, but why dont you just make a click event on those submit buttons?
like
$('#mysendbtn').click(function(){ ...do A });
I'm currently working on a basic form. When you hit the submit button, it should first change the value of a field, and then submit the form as usual. It all looks a bit like this:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
And this is how far I've come with the JavaScript code. It changes "myinput"'s value to 1, but it does not submit the form.
function DoSubmit(){
document.myform.myinput.value = '1';
document.getElementById("myform").submit();
}
You could do something like this instead:
<form name="myform" action="action.php" onsubmit="DoSubmit();">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" />
</form>
And then modify your DoSubmit function to just return true, indicating that "it's OK, now you can submit the form" to the browser:
function DoSubmit(){
document.myform.myinput.value = '1';
return true;
}
I'd also be wary of using onclick events on a submit button; the order of events isn't immediately obvious, and your callback won't get called if the user submits by, for example, hitting return in a textbox.
document.getElementById("myform").submit();
This won't work as your form tag doesn't have an id.
Change it like this and it should work:
<form name="myform" id="myform" action="action.php">
Here is simple code. You must set an id for your input. Here call it 'myInput':
var myform = document.getElementById('myform');
myform.onsubmit = function(){
document.getElementById('myInput').value = '1';
myform.submit();
};
No. When your input type is submit, you should have an onsubmit event declared in the markup and then do the changes you want. Meaning, have an onsubmit defined in your form tag.
Otherwise change the input type to a button and then define an onclick event for that button.
You're trying to access an element based on the name attribute which works for postbacks to the server, but JavaScript responds to the id attribute. Add an id with the same value as name and all should work fine.
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" id="myinput" value="0" />
<input type="text" name="message" id="message" value="" />
<input type="submit" name="submit" id="submit" onclick="DoSubmit()" />
</form>
function DoSubmit(){
document.getElementById("myinput").value = '1';
return true;
}
My problem turned out to be that I was assigning as document.getElementById("myinput").Value = '1';
Notice the capital V in Value? Once I changed it to small case, i.e., value, the data started posting. Odd as it was not giving any JavaScript errors either.
I have done this and it works for me.
At first you must add a script such as my SetHolderParent() and call in the html code like below.
function SetHolderParent(value) {
alert(value);
}
<input type="submit" value="Submit" onclick="SetHolderParent(222);" />
You can use the onchange event:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" onchange="this.form.submit()"/>
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
This might help you.
Your HTML
<form id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="save()" />
</form>
Your Script
<script>
function save(){
$('#myinput').val('1');
$('#form').submit();
}
</script>