We Keep Coding

Multiple <buttons> in single form - Values not getting passed to POST

It's been an hour of straight out binging on SO and can't seem to find a solution anywhere.
I have a single form that has multiple buttons.
Buttons:
Fetch Email
Save
Skip
Ban
The first one fetches an email address from MySQL using Ajax. This one works fine.
The last 3 should refresh the page and perform an action based on the value.
The problem is that the button tags are not getting passed through to POST. All other form fields get passed without a problem.
I've built it using Chrome, tested on Firefox and IE and the same issue occurs. No submit values.
Here's some of the JS that's involved
<script type="text/javascript">
//saves and goes to next page
function submitForm(action)
{
document.getElementById('ajaxform').action = action;
document.getElementById('ajaxform').submit();
}
**Form **
<form name="ajaxform" id="ajaxform" action="inc/scripts/email_api.php" method="POST" >
<input type="text" name="fname" placeholder="First Name" id="fname" required />
<input type="text" name="lname" placeholder="Last Name" id="lname" required/>
<input type="hidden" value="<?php echo $domain;?>" name="domainName" id="domainName">
<input type="hidden" value="<?php echo $article_id;?>" name="articleId" id="articleId">
<button id="run-code" name="getEmail" onclick="return validateForm()" >Run Code</button>
<input type="radio" value="blog" name="websiteType" id="blog">
<input type="radio" value="junk" name="websiteType" id="junk">
<input type="radio" value="guest" name="websiteType" id="guest">
<input type="button" name="save" value="save" onclick="submitForm('<?php echo $_SERVER['PHP_SELF'];?>')" id="saveContinue" disabled />
<input type="button" name="skip" value="skip" onclick="submitForm('<?php echo $_SERVER['PHP_SELF'];?>')" id="skip" />
<input type="button" name="ban" value="ban" onclick="submitForm('<?php echo $_SERVER['PHP_SELF'];?>')" id="ban" />
</form>
I should also mention that I have tried having it as type="submit" and the values still do not get passed. I have also tried with having all of the buttons have the same name, but that did not work either.
Any thoughts/suggestions would be appreciated. Thanks!

type="button" elements do not get submitted in a form
Try changing to type="submit" which by default will submit the form without needing any javascript

Found the problem for anyone else struggling with this.
The issue was submitting the submit buttons using the line of Javascript which I found here on SO.
I'm no expert in JS, but for whatever reason, the function was preventing the post Vars from being sent. So I found a workaround to add an onclick outside of a function to the buttons.
<input type="submit" name="save" value="save" onclick='this.form.action="<?php echo $_SERVER['PHP_SELF'];?>"' id="save" disabled />
<input type="submit" name="skip" value="skip" onclick='this.form.action="<?php echo $_SERVER['PHP_SELF'];?>"' id="skip" />
<input type="submit" name="ban" value="ban" onclick='this.form.action="<?php echo $_SERVER['PHP_SELF'];?>"' id="ban" />
After doing this, the buttons would no longer work. So the trick to fix this is to add novalidate to your <form> tag.

Why isn't my JS redirecting the webpage?

I'm trying to make a HTML form that on submit does a google search with JS.
This is the HTML:
<form name="form">
<input type="text" name="search" id="searchBox" onkeyup="changeLogo()" autofocus>
<input type="submit" id="button" value="Submit" onclick="googleSearch()">
</form>
And the JS function:
function googleSearch() {
var searchText = document.getElementById("searchBox").value;
window.location.href = "http://google.com/";
}
The Google URL isn't right but it isn't redirecting at all.. I put alert(searchText) in the function and the alert showed so not really sure what's going on.

If you use button type as 'submit', it will submit your form.
So you can change your button from
<input type="submit" id="button" value="Submit" onclick="googleSearch()">`
to
<input type="button" id="button" value="Submit" onclick="googleSearch()">
It will work.

because the page refreshed when you click submit button before excuting localtion.href line
try change with your code like below
<form name="form" onsubmit="return false">
....
</form>

Your form is submitted which might be the issue. Change the type="submit" to type="button" this will make sure the form is not submitted on click of this button

How to make a form submit on div click using jquery?

I already tried this in single php file but doesn't work out, so i tried now in two separate php file one for form and another one for process.
How to submit the form on a div or link click?
Code i tried
$(document).ready(function(){
jQuery('.web').click(function () {
$("#g_form").submit();
alert('alert');
});
});
FORM
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="submit"/>
</form>
<div class="web">click</div>
Here is the process file code p.php
<?php
if(isset($_POST['f1'])){
echo $_POST['f1'];
} ?>
When i click the submit button the form is submitting but when i click the .web div it is not submitting the form even i get the alert message but not submitting.
What wrong am doing here? It'll be helpful if i get a idea.

.submit() docs
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method.
Name conflicts can cause confusing failures. For a complete list of
rules and to check your markup for these problems, see
DOMLint.
You give your submit button a name of submit, which the above passage tells you will cause "confusing failures"
So if you accessed the dom element and looked at the .submit property you would see that since you name the button submit instead of .submitbeing a function its a reference to the buttons dom element
HTML
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="submit"/>
</form>
<div class="web">click</div>
JS
//Get the form element
var form = $("#g_form")[0];
console.log(form.submit);
//prints: <input type="submit" value="submit!" name="submit"/>
And when you change the submit name
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="psubmit"/>
</form>
<div class="web">click</div>
JS
var form = $("#g_form")[0];
console.log(form.submit);
//prints: function submit() { [native code] }
so simply give your submit button a different name that does not conflict with a form's properties.

You can trigger submit button click.
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" id="f_submit" name="submit"/>
</form>
<div class="web">click</div>
$(document).ready(function(){
jQuery('.web').click(function () {
$("#f_submit").trigger( "click" );
alert('alert');
});
});
DEMO : http://jsfiddle.net/awladnas/a6NJk/610/

HTML (provide a name for the form, strip the name from the submit):
<form action="p.php" name="g_form" id="g_form" method="post">
<input type="text" name="f1" value="">
<input type="submit" value="submit!"/>
</form>
<div class="web">click</div>
JavaScript
//use jQuery instead of $ in the global scope, to avoid conflicts. Pass $ as parameter
jQuery(document).ready(function($){
//use on(), as it's the recommended method
$('.web').on('click', function () {
//use plain JavaScript. Forms are easily accessed with plain JavaScript.
document.g_form.submit();
alert('alert');
});
});

Change the name of the submit and Try,
<input type="submit" value="submit!" name="mySubmit"/>

Remove the submit from the form and try again:
<form action="http://test.com" id="g_form" method="GET">
<input type="text" name="f1" value=""/>
</form>
<div class="web">click</div>
I changed the action to a real URL and the method to a GET so something is seen changing.
Fiddle

$(".web").live('click', DivClick);
function DivClick(){
$("#g_form").submit();
}

Maintain button submit value when using link to submit a form

i am trying to create a link that submits a form. I use this and works fine :
<a name="submit" href="javascript:document.theForm.submit();" class="rollover-button gray small"><span>Send Message</span></a>
However, i have a problem. My previous submit button was :
<input type="submit" name="submit" value="Send Message" />
When this was clicked, i was getting a $_POST['submit'] value that i was checking with isset in my php script, to see whether the form is submitted or not. However, this does not work with my submit link. Does anybody know how i can do that ?
EDIT:
I tried that, as suggested :
<form action="." name="theForm" class="contactForm" method="post">
<input type="hidden" name="submit" value="Send Message" />
</form>
<a name="submit" href="javascript:document.theForm.submit();" class="rollover-button gray small"><span>Send Message</span></a>
But still does not work.

You can create input type of hidden and check for its existence:
if (isset($_POST['hiddenName'])) {....}

You can use a hidden field instead. So when the form is submitted, you can check if the hidden element exists.
Like this:
<input type="hidden" name="submit" value="Send Message" />
This way, you can check for $_POST['submit'] when you submit the form. Just make sure the hidden <input> is inside the <form> element, so it will POST with the rest of the form.

add a hidden input.
<input type="hidden" name="submit" value="Send Message" />
it will not be visible to the user, but it will be send with the form contents.

You can always hide the submit button (with css display: none) and click it with JavaScript:
document.forms.theForm.elements.submit.click();

How To Submit An HTML Form Using PHP?

This is what I am trying to do without success :
<form name="something" action="ht.php" method="post">
Submit
</form>
When I click on the link I want to post the value helloworld to ht.php. How can I do this?

You can't just do document.url.submit(), it doesn't work like that.
Try this:
<form id="myForm" action="ht.php" method="post">
<input type="hidden" name="someName" value="helloworld" />
Submit
</form>
That should work!

Using jQuery, its rather easy:
$('form .submit-link').on({
click: function (event) {
event.preventDefault();
$(this).closest('form').submit();
}
});
Then you just code as normal, assigning the class submit-link to the form submission links:
<form action="script.php" method="post">
<input type="text" name="textField" />
<input type="hidden" name="hiddenField" value="foo" />
Submit
</form>
I find this method useful, if you want to maintain an aesthetic theme across the site using links rather than traditional buttons, since there's no inline scripting.
Here's a JSFiddle, although it doesn't submit anywhere.

try
<form id="frmMain" action="ht.php" method="post">
Submit
</form>

Try this,
<!-- you need to give some name to hidden value [index for post value] -->
<form name="something" action="ht.php" method="post">
<input type="hidden" name="somename" value="helloworld" />
Submit
</form>
Also try this
<!-- you need to give some name to hidden value [index for post value] -->
<!-- also you can use id to select the form -->
<form name="something" action="ht.php" method="post" id="myform">
<input type="hidden" name="somename" value="helloworld" />
Submit
</form>

You could add a hidden field on the page (set it's name property), set it's value to helloworld.
Then in your hyperlink's onclick call form.submit()