Forms nesting, more submit buttons in a form - forms

I am aware that you can't nest forms in html. Therefore I need help to make the following feature.
I have a list of checkboxes:
<form action="addAll.php" method="post">
<ul>
<li><input type="checkbox" name="boxes[]" value="1"> No. 1</li>
<li><input type="checkbox" name="boxes[]" value="2"> No. 2</li>
<li><input type="checkbox" name="boxes[]" value="3"> No. 3</li>
<li><input type="checkbox" name="boxes[]" value="4"> No. 4</li>
</ul>
<input type="submit" value="Add all">
</form>
When clicking the submit button "Add all", the values are gathered and sent to the addAll.php file. So far, so good.
There are links in the list, as shown. The wanted feature is now that when I click a link, the form is submitted to ANOTHER page than addAll.php.
So actually, instead of the links I need four submit buttons in place of each link, that each will submit the form to THEIR OWN file and not addAll.php.
I simply need to be able to save, which checkboxes the user has checked when he navigates between the links and back again, until he finally at some point clicks the "Add all" submit button. Therefore I want to bring the checked boxes with the user to the new page after clicking the link, so it is save and so I can re-check the checkboxes by looking at the POST data, if he returns later to click "Add all".
Is there a solution for this?

I would not recommend doing anything like this, but to me it seems to be the closest thing I can think of as a solution w/o using javascript.
addAll.php
...
function redirect($url) {
$query_string = urlencode('?boxes=['.implode(',', $_POST['boxes']).']');
$base_url = some_awkward_way_of_getting_the_base_url();
$url_full = $url_base.$url;
header('Location: '.$url_full.$query_string);
}
function alternative($url) {
$_SESSION['boxes'] = $_POST['boxes'];
$base_url = some_awkward_way_of_getting_the_base_url();
$url_full = $url_base.$url;
header('Location: '.$url_full);
}
if (isset($_POST['submit_nr1']))
redirect('nr1.php');
else if (isset($_POST['submit_nr2']))
redirect('nr2.php');
else if (isset($_POST['submit_nr3']))
redirect('nr3.php');
else if (isset($_POST['submit_nr4']))
redirect('nr4.php');
else if (isset($_POST['submit_all']))
handle_accordingly();
...
Alternatively you could have addAll.php include/require different files based on the different cases instead of doing header redirection.
checkboxes.php
...
<form action="addAll.php" method="post">
<ul>
<li>
<input type="checkbox" name="boxes[]" value="1">
<input type="submit" name="submit_nr1" value="No. 1"/>
</li>
<li>
<input type="checkbox" name="boxes[]" value="2">
<input type="submit" name="submit_nr2" value="No. 2"/>
</li>
<li>
<input type="checkbox" name="boxes[]" value="3">
<input type="submit" name="submit_nr3" value="No. 3"/>
</li>
<li>
<input type="checkbox" name="boxes[]" value="4">
<input type="submit" name="submit_nr4" value="No. 4"/>
</li>
</ul>
<input type="submit" name="submit_all" value="Add all">
</form>
...
Disclaimer: I haven't written PHP in a good while, and this is untested, but should at least illustrate a possible solution.

Related

Form is submitting and redirecting without information

I'm really terrible with forms, so any help you can provide would be great.
This form initially had a modal that came up on submission, but I had to change it to a redirect. Now it's redirect without any data being entered.
<form id="contact-form" method="post" onsubmit="return redirect()">
<div class="contact-form-loader"></div>
<fieldset>
<div class="contact-form_top-section">
<label class="name">
<input type="text" name="name" placeholder="Parent's Name:" value="" data-constraints="#Required #JustLetters">
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid name.</span>
</label>
<label class="email">
<input type="text" name="email" placeholder="Parent's E-mail:" value="" data-constraints="#Required #Email">
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid email.</span>
</label>
<label class="phone">
<input type="text" name="phone" placeholder="Parent's Cellphone:" value="" data-constraints="#JustNumbers">
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid phone.</span>
</label>
<label class="message">
<input type="text" name="message" placeholder="Tell us about your children:" value="" data-constraints="#Required">
<span class="empty-message">*This field is required.</span>
<span class="error-message">*The message is too short.</span>
</label>
</div>
<div class="contact-form_bottom-section">
Clear
<input type="submit" class="btn btn__hover bg-color-6" value="Send">
</div>
</fieldset>
The .js page has a ton of data, and I'm not exactly sure which part you need. Here's the first part.
;(function($){
$.fn.TMForm=function(opt){
return this.each(TMForm)
function TMForm(){
var form=$(this)
opt=$.extend({
okClass:'ok'
,emptyClass:'empty'
,invalidClass:'invalid'
,successClass:'success'
,responseErrorClass:'response-error'
,responseMessageClass:'response-message'
,processingClass:'processing'
,onceVerifiedClass:'once-verified'
,mailHandlerURL:'bat/MailHandler.php'
,successShowDelay:'4000'
,stripHTML:true
,recaptchaPublicKey:''
,capchaTheme:'clean'
},opt)
init()
function init(){
form
.on('submit',formSubmit)
.on('reset',formReset)
.on('focus','[data-constraints]',function(){
$(this).parents('label').removeClass(opt.emptyClass)
})
.on('blur','[data-constraints]:not(.once-verified)',function(){
$(this)
.addClass(opt.onceVerifiedClass)
.trigger('validate.form')
})
.on('keyup','[data-constraints].once-verified',function(){
$(this).trigger('validate.form')
})
.on('keydown','input',function(e){
var $this=$(this)
,next=$this.parents('label').next('label').find('input,textarea')
if(e.keyCode===13)
if(next.length)
next.focus()
else
form.submit()
})
.on('keydown','textarea',function(e){
if(e.keyCode===13&&e.ctrlKey)
$(this).parents('label').next('label').find('input,textarea').focus()
})
.on('change','input[type="file"]',function(){
$(this).parents('label').next('label').find('input,textarea').focus()
})
.attr({
method:'POST'
,action:opt.mailHandlerURL
})
Your best bet is to put the redirect function at the end of the formSubmit function which should be somewhere in your JS file. By doing what you did your form never gets to hit the 'formSubmit' function which I assume handles the data.

Get iPhone Go Button to Submit Form

I have a mailing list sign up form on my website, and the button that fires it has got <input type="submit" . However, when I visit my website on my iPhone, the go button does not do anything. How do I fix this? Here is my full code:
<div id="mc_embed_signup">
<form action="//isaacadni.us10.list-manage.com/subscribe/post?u=0db50d6b1ce1ac34d3194a969&id=0026019372" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="form-group">
<input type="email" value="" name="EMAIL" class="email form-control input-lg" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_0db50d6b1ce1ac34d3194a969_0026019372" tabindex="-1" value=""></div>
<br>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" btnSubmitclass="btn btn-primary btn-lg">
</div>
</form>
</div>
Remove target="_blank" from the <form> element.
You can force it by replacing your input line with this,
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" onclick="document.getElementById('mce-EMAIL').submit()" btnSubmitclass="btn btn-primary btn-lg">

Form submits with href

Any suggestion to use href to submit a form when you have more than 1 submit?
<form id="form-id">
<input type='text'name='name'>
<input type='submit' value='Preview' name='preview'/>
<input type='submit' value='Add' name='add'/>
</form>
I just know the way to do that using one submit in this way:
submit
Edited
use this way:
<input type='submit' id='PrevSubmit' value='Preview' name='preview'
style='display:none;' />
<input type='submit' id='addSubmit' value='Add' name='add'
style='display:none;'/>
add two a tag like this:
<a href="javascript:void(0);"
onclick="document.getElementById('PrevSubmit').click();">
Preview
</a>
<a href="javascript:void(0);"
onclick="document.getElementById('addSubmit').click();">
Add </a>

html / iphone - getting a form alert when attempting to refresh the page

I'm building a site which has a form but for some reason, even if a user doesn't enter info into the form (even if the form hasn't been presented yet - it starts out hidden) - if I refresh the page, iOS gives me a browser alert stating:
are you sure you want to submit this form again?
Any idea why this happens or how to suppress that?
This is my form code:
<div id="vehicle_form">
<form method="post" name="emailForm">
<input class="dField" id="dfEmail" type="email" name="email" value="Email"/><br/>
<input class="dField" id="dfName" type="text" name="firstname" value="First Name"/><br/>
<input class="dField" id="dfLast" type="text" name="lastname" value="Last Name"/><br/>
<input class="dField" id="dfZip" type="text" maxlength="5" name="zip" value="Zip Code"/><br/>
<button id="dFormBack">Back</button><button type="submit" id="dSubmit">Submit</button>
</form>
<div id="dErrors"></div>
</div>
I also have this javascript acting on the form fields:
$j('.dField').focus(function(){
clearInput($j(this)[0]); //The [0] seems to be necessary to retrieve the element at the DOM object level
}).blur(function(){
restoreInput($j(this)[0]);
});
as well as some other form related javascript.
Not sure if this is exactly what you're looking for, but try this:
<form method="post" name="emailForm">
<input type="text" name="email" value="Email" size="30" onfocus="value=''"><br>
<input type="text" name="firstname" value="First Name" size="30" onfocus="value=''"><br>
<input type="text" name="lastname" value="Last Name" size="30" onfocus="value=''"><br>
<input type="text" name="zipcode" value="Zip Code" size="30" onfocus="value=''"><br>
<button id="dFormBack">Back</button><button type="submit" id="dSubmit">Submit</button>
</form>

How to setup a posting form in React with the reactstrap library?

I'm new to React and reactstrap and I was wondering how to setup a form that posts to a post-route on submit using the Form-tag. I couldn't find an example in the documentation that did this. So I'm looking for an equivalent of this:
<form action='/signup/insert' method = 'POST'>
<div class="form-group">
<input id ='signup' type='text' name='uid' placeholder='Username'><br>
<input id ='signup' type='password' name='pwd' placeholder='Password'><br>
<input id ='signup' type='text' name='email' placeholder='E-mail address'><br>
<button id = 'switch' type='submit'>Sign Up</button>
</div>
</form>
And I want something like this:
<Form>
<FormGroup>
<Label for="exampleEmail">Email</Label>
<Input
type="email"
name="email"
id="exampleEmail"
placeholder="noreply#noreply.com"
/>
</FormGroup>
<FormGroup>
<Label for="examplePassword">Password</Label>
<Input
type="password"
name="password"
id="examplePassword"
placeholder="password"
/>
</FormGroup>
<Button>Sign Up</Button>
</Form>
Do I have to add this in the button tag? How to do this? My route is by the way already set up, so I just need to post it from here.
Exactly the same way as in your example without Reactstrap. Form component passes any properties that you provide to the <form> tag that gets rendered on your page so this code <Form action='/signup/insert' method='POST'> will work (if your backend is set up to handle the request.