Develop Reference

How do i create a search link after user selects search criterias in webpage?

I have created a search.html where users can select/enter search criteria and click the search button to search the database of 1000 records. I have done the HTML part but I don't know how to generate the action link.
<form action="/bookings/search?" method="POST">
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" name="email" placeholder="Email" value="">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">Number of Tickets</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputPassword3" name="numTickets" min=1 max=4
value="">
</div>
</div>
<button type="submit" class="btn btn-primary">Search</button>
So, when the user enters the email or number of Tickets, the submit button will direct the result to /bookings/search javascript that goes through the database (Mongo DB). The email supports partial matching.
I want to do is: say, the user enters 'atom' in email and 2 in number of Tickets, then the action query should look like /bookings/search?email=atom&numTickets=2.
I believe it is related to javascript, but I am not sure how to do it.
My bookings/search looks like this:
bookings/search

Just changed the method to "get" instead of "post" and it works.

Multi-step Form When Resizing on Mobile Devices

So, I'm trying to create a mobile responsive web app, I've already managed to fit it properly on mobile devices, but I don't want the "second form" to go above the first one, but to create a multi-step form when viewing on mobile devices.
Here's my code so far:
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
</form>
</div>
(I have two forms like this one)

Use this code for Multistep Form its easy use for you...
and if you are using bootstrap so multi step form is so easy on bootstrap with fully responsive.
Custome Multistep
Bootstrat Multistep

How to display error above input with bootstrap validator

I'm using Bootstrap validator for bootstrap 3 and trying to display error messages above the input.
Here is the provided HTML code example:
<form role="form" data-toggle="validator">
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" id="inputEmail">
<div class="help-block with-errors"></div>
</div>
</form>
this works fine but I want to display the error like this:
<!-- display error -->
<div class="help-block with-errors"></div>
<!-- input -->
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" id="inputEmail">
</div>
Am I missing something here, how to do it right?
or, is there another way to accomplish this task by using JavaScript? (if the first block of code is used, can I move the error above the input like the example of the 2nd code?)

Put the error inside the same parent div as the input. Try this:
<div class="form-group">
<div class="help-block with-errors"></div>
<label for="inputEmail">Email</label>
<input type="email" id="inputEmail">
</div>

html5 contact form with PHP [duplicate]

This question already has answers here:
How can I send an email using PHP?
(20 answers)
Closed 6 years ago.
This is the HTML contact form I created and I have been trying to get the PHP code that will make it work however I am not sure the best way to handle this. I have read through other questions and answers where they use separate files I am not an expert in PHP but I can assume the two files must be linked by name this is the HTML form I have:
<section class="our-contacts slideanim" id="contact">
<h3 class="text-center slideanim">Contact Us</h3>
<p class="text-center slideanim">Got a project in mind? Shoot as an email below!</p>
<div class="container">
<div class="row">
<div class="col-lg-12">
<form role="form">
<div class="row">
<div class="form-group col-lg-4 slideanim">
<input type="text" name="name" class="form-control user-name" placeholder="Your Name" required/>
</div>
<div class="form-group col-lg-4 slideanim">
<input type="email" name="email" class="form-control mail" placeholder="Your Email" required/>
</div>
<div class="form-group col-lg-4 slideanim">
<input type="tel" class="form-control pno" placeholder="Your Phone Number" required/>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12 slideanim">
<textarea name="message" class="form-control" rows="6" placeholder="Your Message" required/> </textarea>
</div>
<div class="form-group col-lg-12 slideanim">
<button type="submit" href="#" class="btn-outline1">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>

The form tag needs to have an action and a method attribute, like this:
<form role="form" method="post" action="path/to/file.php">
The method will normally be post (you can look up the difference between post and get if you like). The action is the path to the php file that will process the data.
In the php file you can access the data through the $_POST global variable which will be an array containing each of the inputs eg $_POST['tel'] will be the telephone number field from your form.
Then you need to send the email. You can try one of the implementations in the php manual (http://php.net/manual/en/refs.remote.mail.php) or you could try using a 3rd party service like mail gun.

How do you get an item from a dropdown and input it as text?

So I'm using bootstrap form helpers to make selecting a country and region easier. Here is some of the code. I want to take this and input it into my db. It currently won't.
<div id="countries_states2" class="bfh-selectbox bfh-countries" data-country="US" data-flags="true" name="country">
<input type="text">
</div>
<div class="bfh-selectbox bfh-states" data-country="countries_states2" name="stateOrProvince">
<input type="text">
</div>
</div>
However, this does
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" placeholder="ironbat#example.com">
</div>
How can I enter the former into the form without wrecking the formatting (its very pretty :) )
As a template, here is a similar setup/strategy:
https://scotch.io/tutorials/easy-node-authentication-setup-and-local