Develop Reference

HTML: Conditional submission of hidden input without JavaScript

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.

Button of 2nd form submits 1st form that doesn't have a submit button

I have 2 forms on one page.
Form 1
<form id="form1" method="get" action="action1.php">
<input type="text" id="input1">
</form>
This form is submitted by:
$('#input1').on('keydown', function(e) {
if (e.keyCode == 13) {
$('#form1').submit();
}
});
as I don't want a submit button on this form.
The 2nd form:
<form id="form2" method="post" action="action2.php">
<input type="text" id="input2">
<button type="submit">Save</button>
</form>
Now if I press the button on the 2nd form, it submits the 1st form. Not sure why that happens as the submit button is inside the second <form> tag.
Also; as form 1 will be on many pages (it's a search bar in a navigation bar) I'd like to 'future proof' this so that I don't run into problems in the future when I place multiple forms on a page. Ideally that would mean that this issue is fixed by changing form 1.
Update
Stupid mistake...! I had $('form:first').submit(); on the <button type="submit">Save</button> somewhere else in my code, so the first form got submitted...

make this change in form 2
<form id="form1" method="get" action="action1.php">
<input type="text" id="input1">
</form>
<form id="form2" method="post" action="action2.php">
<input type="text" id="input2">
<button type="submit" form="form2">Save</button>
</form>
read this to know more about form attribute

Something else is going on.
try hitting enter in these two fields - you will see there is no need for script
$("form").on("submit",function(e) {
e.preventDefault();
console.log(this.id + " submitted");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" method="get" action="action1.php">
<input type="text" id="input1"> Submits on enter
</form>
<hr/>
<form id="form2" method="post" action="action2.php">
<input type="text" id="input2"> Submits on enter or on click
<button type="submit">Save</button>
</form>

Chrome - how to submit by javascript a form having input name=submit?

I run into absolutely wierd Chrome's behavoir. Below is the code
<form method="post" id="form" accept-charset="UTF-8" action="/lalala">
<input type="submit" />
<input type="text" name="submit" value="Post this" />
</form>
<script>
setTimeout(function(){
var forma = document.getElementById("form");
console.log(forma.submit);
forma.submit();
},30000);
</script>
it prints to Chrome debug window
<input type="text" name="submit" value="Post this">
Uncaught TypeError: object is not a function
i.e. document.getElementById("form").submit is an input, but not submit callback!!
Is it possible to submit this form keeping input name=submit?

Is it possible to submit this form keeping input name=submit?
I believe, the answer is NO.
I run into absolutely wierd Chrome's behavoir.
I could find the problem in Firefox too.
The moment you use the key word submit as either the name or id of an element within a form, the form.submit turns in to an object referring the corresponding node instead of the function to submit the form.
Please refer the JSFiddle
<form method="post" id="form" accept-charset="UTF-8" action="/lalala">
<input type="submit" />
<input type="text" name="submit" value="Post this" />
</form>
var form = document.getElementById("form");
console.log(typeof form.submit);

OK I've found the solution:
<input id="submit" type="submit" />
<script>
var button = document.getElementById("submit");
button.click();
</script>

Change form action based on submit button

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.

how to get the value by javascript?

HTML:
I want to pass the value from the gsearch to the q parameter. The following is the ways I make but it couldn't work. How should I do it?
action="http://test.com/search.php?q=<script type="text/javascript">document.getElementById('gsearch').value;</script>">
updated:
in my site. i want to make a google custom search: so i put the following code in the homepage. 0156290304977:8texhu0mrk the google search value. gsearch.php page which i put the google custom search code in and show the searched result
<form method="get" action="http://test.com/gsearch.php?cx=0156290304977:8texhu0mrk&cof=FORID:11&ie=UTF-8&q=..." >
<input type="text" title="" value="" name="q" class="search-input" id="gsearch" />
<input type="submit" value="" name="sa" id="search-button"/>
</form>
now, i want to when the user input the searched text in the gsearch text box, if he click the submit button,. then on the gsearch.php page shows the searched result.

if you want to submit to this: http://test.com/search.php?q=theinput
just do this:
<form target="_top" method="get" action="http://www.cnn.com/search.php" >
<input type="text" title="" value="theinput" name="q" class="search-input" id="gsearch" />
<input type="submit" value="submit" id="search-button"/>
</form>
the entire idea behind the <form> element is that it is making sure that all of the inputs from the user will be sent to the action.
the form will take the input from the q and add it to the action automatically.
so in your simple case. no manipulation is required.
Test it here
http://jsfiddle.net/L4rHG/1/
this will be submitted to http://edition.cnn.com/search.php?q=theinput

Or you need over javascritpt
<script>
function SubmitForm(){
window.open("http://test.com/search.php?q="+document.getElementById('gsearch').value)
return false;
}
</script>
<form method="get" action="http://test.com/search.php" onSubmit="SubmitForm();false" >
<input type="text" title="" value="" name="q" class="search-input" id="gsearch" />
<input type="submit" value="" name="sa" id="search-button"/>
</form>

<form action="http://test.com/search.php?q=">
<script>
document.forms[0].action += 'new_action.html';
</script>