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.

Can POST and GET be combined within a single input type?

I have a form running a shopping cart style application on my site. To add items, I POST values to a form using a submit button. To remove items, I have to use a GET command.
What I want to do is to limit the selection possibilities - as you select one option, others are removed. For instance, if I have three options: Apples, Oranges, Bananas you are only able to select one.
Apples
Oranges
Bananas
If you select Apples, I want to post the value "Apples" whilst using a GET command to remove "Bananas" and "Oranges".
Currently I am doing this to post the values:
<form method="post">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="id" value="Apples" />
<input type="hidden" name="name" value="Apples" />
<input type="hidden" name="color" value="red" />
<input type="hidden" name="shape" value="round" />
<div id="apples" >
<input type="submit" name="my-add-button" class="add" value="&nbsp"/>&nbsp Apples
</div>
</fieldset>
</form>
And to remove the items I do this:
remove Bananas and Oranges
Is there a way to do both at the same time? I have tried doing an onclick event like this:
<div id="Apples" >
<input type="submit" name="my-add-button" class="add" value="&nbsp" onclick="location.href='index.php?jcartRemove[]=Bananas&jcartRemove[]=Oranges';" />&nbsp Apples
</div>
and I have also tried to use an action at the start of the form
But neither of these work - they will still submit the new item, but will not remove the item. Any idea of a good way to do both together?

Technically, yes, but it's a hack:
<form method="post" action="foo.php?x=y">
<input type="text" name="a" value="b" />
</form>
If the form is set to POST, then any <input> and <textarea> within the form will go as POST data, but any query strings you place into the action's url will show up at the server as GET data:
$_GET['x'] -> 'y'
$_POST['a'] => 'b'
$_POST['x'] => undefined index
But note that clicking a link that's inside a <form> does NOT submit the form. it's like clicking any other link and will just go to the new address.

You can use $_REQUEST. As per the php documentation, quoted as follows:
An associative array that by default contains the contents of $_GET, $_POST and $_COOKIE
As above, you can then use the following hack:
<form method="post" action="foo.php?x=y">
<input type="text" name="a" value="b" />
</form>
EDIT: If both of the GET and POST requests work individually, it is possible that your PHP is where the problem lies - You haven't posted it, so I can't see where the issue could be. You could just put together some javascript to fire the remove request then fire the add request when clicked:
jQuery("input[name|='my-add-button']").click(function() {
var addform = jQuery(this);
event.preventDefault();
$.get("index.php?jcartRemove[]=Bananas&jcartRemove[]=Oranges", function(data) {
addform.submit();
});
});

Passing between two hidden fields

I seem to have an issue with passing a value between two hidden fields.
I'm using a jquery plugin for for geolocation from google maps. The plugin uses a fieldset which includes two hidden fields, one for lat and one for lon. Each time then pin is moved the two values change, which is definitely happening and can be viewed in the developer tools.
I have a form that I'm bringing all of my values into to be sent to a php file all in one go. I've managed to get it working for all the other inputs I need but this one just wont work.
Heres the map with the two hidden fields. The hidden classes come with a value of 20 preset which changes.
<div class="gllpMap">Google Maps</div>
<input type="hidden" class="gllpLatitude" value="20"/>
<input type="hidden" class="gllpLongitude" value="20" />
<input type="hidden" class="gllpZoom" value="3"/>
</div>
And here is my search that is going to be sent to the php.
<form method="post" action="getData.php">
<input type="text" name="username" class="mySearch" value="" />
<input type="hidden" name="fromTest" id="fromTest"/>
<input type="hidden" name="untilTest" id="untilTest"/>
<input type="hidden" name="lat" id="lat"/>
<input type="hidden" name="long" id="long"/>
<input type="submit" class="myButton" value="">
</form>
For some reason I just cant get this to work. What I'm looking for is the simplest way to get this lat and long to equal the values set by the two hidden fields. The simpler the better, I'm pretty new to coding and this is just a first mock-up which I hope to revisit properly when I have more time available.

You can take and set the value using JQuery .val()
$("#lat").val($(".gllpLatitude").val());
$("#long").val($(".gllpLongitude").val());
DEMO

JavaScript value not set during form submit

I've searched for a solution to this issue all over the web. After no success, here I am. I have a form that where I have 3 fields that should contain data. Field 1 is the Zip Code, Field 2 and 3 are City and State respectively.
The JS function getCityByZipHome and getStateByZipHome dynamically return the city and state and insert the values into the the city2 and state2 input fields.
For whatever reason, when I submit the form via mouse-click.. I see the data via $_POST. If the users presses ENTER, the data is never captured and I never see that data from the hidden fields.
Any idea what's wrong here? Note, I've tried almost all the event handlers onblur, onclick, onchange..etc.
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onkeypress="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
I've tried adding onsubmit # the form level as such:
<form method="post" name="something" action="xxSome.php" onsubmit="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
And I've tried onblur without any luck # the input level as such:
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onblur="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
After all the messing around, I actually never solved the issue; rather, I disabled the ENTER key as a submit method.
I have some pretty serious time constraints, but I'm sure this will come up later and I will definitely come back to this issue.

You should do the getcitybyzip and getstatebyzip in the form onSubmit.

Change the type of the submit to button and then add on onClick method to it. ie instead of make it but you need an id on the form to do that. I would be interested though in finding the cause of what is going wrong. Did you try firebug?

Form submit fails to generate query parameters if input element's are in multple div's

If I have a form element as given below, then calling the form's submit will automatically generate the request body/query parameters in the url-encoded form as "username={username}&password={password}&submit=submit" where values in {} are taken from the corresponding input element's text boxes.
<form action="/action.php" method="POST">
<input id="username" type="text" />
<input id="password" type="password" />
<input type="submit" id="submit" value="submit" />
</form>
But if I am going to place my input elements in multiple levels of div's, then the form submit will fail to generate the request body/query parameters.
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" id="submit" value="submit" />
</div>
</div>
</form>
Can anyone tell me the reason why it is like that? The specification doesn't mention that the input elements should be immediate children of Form element. I was wondering a proper reason for this behavior.
The values will be populated to the elements and you can check the values also if you edit the changes as given below
<script type="text/javascript">
function logincheck() {
alert ('hi ' + document.getElementById('username').value);
alert ('hi ' + document.getElementById('password').value);
}
</script>
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" onclick="logincheck()" />
</div>
</div>
</form>

A bit more detail:
I am assuming you are using PHP for the rest of this, you can substitute any other server side language.
You are missing the name attribute on your inputs. Unless you are actually using the id attributes for something you can get rid of them. Form data is listed by the name attribute - for instance the PHP $_GET, $_POST, and $_REQUEST arrays which will be keyed by names of your inputs. No name and the data is ignored.
You can also create an array of inputs by using a pair of brackets after matching names.
Example:
<input name="answers[]" type="text" id="answer1" />
<input name="answers[]" type="text" id="answer2" />
This will create one GET/POST entry that is an array. It will have the key answers with two elements inside the array.
For checkboxes, you will only get a value in the GET/POST when they are checked. You will not get a result if it isn't checked. Important to know. If someone, for instance, turns something "off" you will need to know the list of original inputs to compare against.

The first thing I notice is that your inputs are missing the "name" attribute. It's not required by the HTML spec afaik, but I think this is why the values are not sent with the request.
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" name="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" name="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" onclick="logincheck()" />
</div>
</div>
</form>
This should do the trick

The input elements don't have to be directly inside the form element! they can be inside divs tables etc... How about trying to use names along with the ids in the text fields, like the following:
<input type="text" id="username" name="username" />
note the name="username" in the previous example -
to all input elements.