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.
Related
I'm working on a basic landing page with a one-field form. It's my first foray into forms so forgive me if this is basic or obvious.
Here's the code for the form:
<form action="#" method="post" onsubmit="alert('Thank you - we'll send an invite soon.')">
<p><label for="email">ENTER YOUR EMAIL: </label><input type="email" id="email" name="email"/>
<input name="Submit" type="button" value="Submit"/></p>
</form>
As you can see, it's pretty basic. However, the submit button doesn't work; you have to press enter to submit the form. On top of that, I can't get the onsubmit alert to work either. I've tried a thousand different configurations with minimal success, and I'm at the end of my rope.
Change the button type to submit
<input name="Submit" type="submit" value="Submit"/>
Change the Button type to submit and also fix your Javascript, you have an extra apostrophe:
<form action="#" method="post" onsubmit="alert('Thank you - we will send an invite soon.');">
<p><label for="email">ENTER YOUR EMAIL: </label><input type="email" id="email" name="email"/>
<input name="Submit" type="submit" value="Submit"/></p>
</form>
type="button" isn't a submit button. It's a "does nothing" button that you can hang JavaScript from.
You are looking for type="submit".
Since You want to submit a form you mast use input type = submit . For example:
<input type="submit" value="Submit"/>
You can also use
<button type="submit"> Submit </button>
I have some comment forms that I want to not be used unless the user is logged in with Google+. I initially have the "submit" button on my forms hidden by the CSS display:none property. I call javascript when the user logs in to change it back to display:inline.
Is this a valid way to prevent anonymous users from posting, or am I still vulnerable by leaving the rest of the comment form open for writing and whatnot...is there some clever way to submit the form without the submit button?
<form action="" method="post" name="form1" id="make">
<fieldset>
<legend id="makelegend">Log in to Post a Reference</legend>
<input type="hidden" name="loginname" id="loginname" />
<input type="hidden" name="logintype" id="logintype" />
<input type="hidden" name="loginspecial" id="loginspecial" />
<input type="hidden" name="reply" id="reply" value="0" />
<input type="hidden" name="identity" id="identity" value="<?php echo htmlspecialchars($_GET['pageno']); ?>" />
<p><label for="posneg">Positive or Negative?
<select name="posneg">
<option value="p">Positive</option>
<option value="n">Negative</option>
</select></label></p>
<textarea name="comment" rows="5" cols="70"></textarea>
<input type="submit" id="submitter" value="POST" style="display:none;" />
</fieldset>
</form>
It is ABSOLUTELY NOT safe! You're just not displaying the data to the user, but anyone who looks at the code can still find it - or just send the request manually. I can't stress this enough: ALWAYS use server-side validation! It's fine to validate things in the browser as well, but it's not a substitute for proper security measures.
I have two XHTML forms (below). I am looking for a way to submit the two forms with one submit button.
First Form Below
<form method= "post" action= "forum_add_111438076.xhtml" >
<input type= "hidden" name="d_token" value="2ab5b36d7d0e5f9fee88cc9a67553db6" />First
Name:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Last Name:<br/><input type="text" name="text" maxlength="20000"/>
<br/><input type="submit" name="submit" value="Submit" /></form>
Second Form
<form method="post" action="forum_add_111438075.xhtml" >
<input type="hidden" name="d_token" value="d0cb19bc6b0d162a11431213976206b8" />
Phone Number:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Address:<br/><input type="text" name="text" maxlength="20000"/>
<br/><input type="submit" name="submit" value="Submit" /></form>
Each form above has its own submit button, but I want to use only one submit button.
You cannot simultaneously submit two forms at once. (like one webpage cannot go to two)
One way around this would be to use Ajax and submit the forms one after another.
Some Example Code. (using jQuery)
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form id="form1">
<input type= "hidden" name="d_token" value="2ab5b36d7d0e5f9fee88cc9a67553db6" />First Name:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Last Name:<br/><input type="text" name="text" maxlength="20000"/>
<br/></form>
<form id="form2">
<input type="hidden" name="d_token" value="d0cb19bc6b0d162a11431213976206b8" />
Phone Number:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Address:<br/><input type="text" name="text" maxlength="20000"/>
<br/></form>
<input type="submit" name="submit" onclick="submitAction()" />
Javascript
submitAction() {
$.post('forum_add_111438076.xhtml', $('#form1').serialize())
$.post('forum_add_111438075.xhtml', $('#form2').serialize())
}
It's not exaclty possible to submit two forms at once to two different places.
The best thing you can do, if you require seperate processing, is to use your receiving page to gather the secondary form post, and send that along to the secondary processing page. PHP using CURL is perfect for something like that.
If you use the get or an ajax function it will allow you to know when the first or second form is completed. Using the get you would use .done if you use ajax you will use the .success Once your first form has completed the submission, you can then submit your other form as shown below.
//Submit your First form
$.get("postOne").done(function(){
//When your first form is completed you can then submit your second form.
$.get("postTwo").done(function(){
});
});
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?
I have the following snipet in a page. I cannot for the life of me figure out why the form is not submitting when clicking the button1 element. I get an error in IE syaing that this object does not support this property or method. I put the document.poform in an alert, and it alerts a form object. I get the feeling that I am missing something super obvious maybe??
<pre>
<?
var_dump($_POST);
?>
</pre>
<form action="" method="post" name="poform">
<input name="test" type="text" />
<input name="button" type="button" value="button1" onclick="document.poform.submit();" />
<input name="submit" type="submit" value="button2" />
</form>
Since you have an <input> named submit, document.poform.submit is that <input>, not the submit() method.
Use a different name.
Change type="button" to type="submit"