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 });
Related
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.
I have a fairly simple HTML form which has a number of HTML input buttons on it (input type="button"). The buttons use a small piece of JavaScript to change the displayed value when clicked (Yes and No). I am happy with this functionality but would like to know the best way to record the values for later submission into a database.
I have this at the moment:
<script>
function toggleynquestion(button)
{
if(document.getElementById("yn_toggle").value=="Yes"){
document.getElementById("yn_toggle").value="No";}
else if(document.getElementById("yn_toggle").value=="No"){
document.getElementById("yn_toggle").value="Yes";}
}
</script>
<form method="post" action="ynquestion_submit.php" name="yn_submit">
<p> Yes or No question :
<input type="button" name="yn_question" id="yn_toggle" value="Yes" onclick="toggleynquestion(this);"/>
</p>
<input type="submit" value="Save">
</form>
Any ideas would be greatly appreciated.
You can always use hidden form elements, they will get sent to the server just like text inputs:
function toggleynquestion(button)
{
if(document.getElementById("yn_toggle").value=="Yes"){
document.getElementById("yn_toggle").value="No";
document.getElementById("yn_answer").value="No";
} else if(document.getElementById("yn_toggle").value=="No"){
document.getElementById("yn_toggle").value="Yes";
document.getElementById("yn_answer").value="Yes";
}
}
<form method="post" action="ynquestion_submit.php" name="yn_submit">
<p> Yes or No question :
<input type="button" name="yn_question" id="yn_toggle" value="Yes" onclick="toggleynquestion(this);"/>
<input type="hidden" name="yn_answer" id="yn_answer" value="Yes" />
</p>
<input type="submit" value="Save">
</form>
<script>
function valid() {
document.getElementById("name").style.borderColor = "#ef0000";
}
</script>
<form method="post" action="">
<input type="text" name="name" id="name">
<input type="submit" onclick="valid()" value="click">
</form>
why on earth this code doesn't work? I se eonly blick of red and the border is in its initial state again. I beg your pardon guys, really.I know it's a duplicate (I have even found at least one working solution here: http://jsfiddle.net/bcxLz4wh/ ) I jsut wanna know what's wrong with my code and why it returns to its initial state.
It returns to it initial state because you are clicking on a submit button. It's default behaviour is to submit the form which refreshed the page. If you want to only change the border-color you need to override that default behaviour.
Something like:
function valid(e) {
document.getElementById("name").style.borderColor = "#ef0000";
e.preventDefault();
}
<form method="post" action="">
<input type="text" name="name" id="name">
<input type="submit" onclick="valid(event)" value="click">
</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.