Form submits with href - forms

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>

Related

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 submit from Bootstrap 3 and JSP get parameter

I'm new to Bootstrap. But I'm pretty familiar with HTML. The thing is I cannot get parameter values from JSP. The parameters are from HTML page with Bootstrap 3. Here're the code. I don't understand. If I make simple html only page, then I could get the parameters.
<form class="form-horizontal" method="POST" action="makeResv.jsp">
<div class="container">
<div class="row">
<div class="control-group col-md-5">
<label for="checkIn">date1</label>
<div id="date-container">
<div class="input-group date">
<input type="text" id="checkIn" class="form-control"><span
class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="control-group col-md-5">
<label for="checkOut">date2</label>
<div id="date-container">
<div class="input-group date">
<input type="text" id="checkOut" class="form-control"><span
class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-success">search</button>
</div>
</div>
</div>
</form>
In a JSP page, I'm just doing the following.
String checkIn = request.getParameter("checkIn");
String checkOut = request.getParameter("checkOut");
out.println(checkIn + " " + checkOut);
What's wrong with the above HTML code with Bootstrap?? Please give me some advise. Thanks!!
BTW, I'm using datepicker JavaScript library, but I don't think that affect the results. I cannot add the library code here but it works great anyway.
https://github.com/eternicode/bootstrap-datepicker
Bootstrap is same as HTML. The problem you are having is because you do not have any name attribute defined in your input element. You define id but to access submited variables via POST (request.getParameter() function) you need to have name attribute defined:
Replace <input> lines like this:
<input type="text" name="checkIn" id="checkIn" class="form-control">
And
<input type="text" name="checkOut" id="checkOut" class="form-control"><

Forms nesting, more submit buttons in a form

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.

Whats wrong with my contact form?

Could someone please take a look at my website's code and tell me why my contact form isnt working?
Here are the relevant portions of code:
From the contact.html file:
<h3 class="indent-bot2">Contact Form</h3>
<form action="#" id="contact-form">
<div class="success"> Contact form submitted!<br>
<strong>We will be in touch soon.</strong> </div>
<fieldset>
<label class="name">
<input type="text" value="Enter Your Name:">
<span class="error">*This is not a valid name.</span>
<span class="empty">*This field is required.</span> </label>
<label class="email">
<input type="text" value="Enter Your E-mail:">
<span class="error">*This is not a valid email address.</span>
<span class="empty">*This field is required.</span> </label>
<label class="phone">
<input type="tel" value="Enter Your Phone:">
<span class="error">*This is not a valid phone number.</span>
<span class="empty">*This field is required.</span> </label>
<label class="message">
<textarea>Enter Your Message:</textarea>
<span class="error">*The message is too short.</span>
<span class="empty">*This field is required.</span> </label>
<div class="buttons-wrapper">
<a class="button" data-type="reset">Clear</a>
<a class="button" data-type="submit">Send</a>
</div>
</fieldset>
</form>
Also from the contact.html file:
<script type="text/javascript">
$(window).load(function(){
$('.slider')._TMS({
duration:800,
easing:'easeInCirc',
preset:'zabor',
pagination:false,
slideshow:7000,
banners:'fromTop',
nextBu:'.next',
prevBu:'.prev',
waitBannerAnimation:false,
pauseOnHover:true,
beforeAnimation:function(){
$('.slider .prev')
.stop()
.animate({top:'425px'},300,'easeOutCirc')
$('.slider .next')
.stop()
.animate({top:'425px'},300,'easeOutCirc')
},
afterAnimation:function(){
$('.slider .prev')
.css({top:'425px'})
.stop()
.animate({top:'327px'},300,'easeOutCirc')
$('.slider .next')
.css({top:'425px'})
.stop()
.animate({top:'327px'},300,'easeOutCirc')
}
})
$('#contact-form').forms({
ownerEmail:'info#dohatutor.com'
})
});
</script>
I think this is the piece of code that links to a javascript file which in turn calls "mailhandler.php".
<form action="some script" METHOD="POST" ENCTYPE="multipart/form-data"></form>
action="php or asp or pl script for processing form"
You didn't specify where the form should post to - what is the name of the script that you want to post this form to?
Now it says:
form action="#"
And it should say something like:
form action="contact.php"

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.