Bootstrap form design and posting data to backend script using JQuery

There are two important concepts about forms
1. Design of the form
2. Posting data to backend script.

Bootstrap design of the form

In default design all inputs are stacked one over the other
All form input elements are with style =form-control occupies 100% of width
All form inputs along with the labels are kept within class=form-group

<form>
<div class='form-group'>
    <label for='userid'>User ID</label>
    <input type='text' class='form-control' id='userid' placeholder='userid'>
  </div>
  <div class='form-group'>
    <label for='password'>Password</label>
    <input type='password' class='form-control' id='password' placeholder='password'>
  </div>
</form>

Horizontal form inputs

We can add class="form-horizontal" to our form.

<form class="form-horizontal">

Inline Form

We can add form class=form-inline to keep all input elements in horizontal line using full available width.
Each form group behaves like a row so no need to keep one extra row tag to align inputs in a row.

<form class='form-inline'>
<div class='form-group'>
    <label for='userid'>User ID</label>
    <input type='text' class='form-control' id='userid' placeholder='userid'>
  </div>
  <div class='form-group'>
    <label for='password'>Password</label>
    <input type='password' class='form-control' id='password' placeholder='password'>
  </div>
<button type='button' class='btn btn-info btn-sm'>Submit</button>
</form>

FROM CLASS='FORM-ROW'

Horizontal form with width control for different form elements

Posting data to a backend script.

You can read more on http POST method and http GET method of posting data to a backed script. We will discuss how to post data using JQuery serialize function and then display the response we get from the backend script.

Here is a form with a button to trigger data submission ( you will get retrun data from backend script )

Once the button is clicked we will trigger form submission process and receive the data from backend script by using JSON.

<div id=display></div>
<form class='form-inline' id='f1'>
<div class='form-group'>
    <label for='userid'>User ID</label>
    <input type='text' class='form-control' id='userid' name='userid' placeholder='userid'>
  </div>
  <div class='form-group'>
    <label for='password'>Password</label>
    <input type='password' class='form-control' id='password' name='password' placeholder='password'>
  </div>
<button type='button' class='btn btn-danger btn-sm' id=b1>Submit</button>
</form>

<script>
$(document).ready(function() {
////////////////////////////////////////////
	$('#b1').click(function(){
$("#display").css("background-color", "yellow"); // Set Background color to yellow
$("#display").html("Please wait ....");     
$("#display").show();
var data = $('#f1').serialize();  
$.post( "bs-formck.php", data,function(return_data,status){
$("#display").html(return_data.msg); 
setTimeout(function() { $("#display").fadeOut('slow'); }, 4000);
},"json");
	})
////////////////////////////////////////////
});
</script>

Using PHP here is the backend script.

<?Php
error_reporting(0);// With this no error reporting will be there
$row=array("t1"=>"","t2"=>"","msg"=>"","status_form"=>"OK");
$msg='testing';
$t1=$_POST['userid'];
$t2=$_POST['password'];
////
// Your data processing scripts here ///
////

$msg="Userid : $t1 , Password : $t2 ";
$row["msg"]=$msg;
echo json_encode($row);
?>

Auto submission of form to a different page.

$('#f1').attr('action', "dropdown3-ck.php").submit();

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Form Design using Bootstrap

Bootstrap design of the form

Horizontal form inputs

Inline Form

FROM CLASS='FORM-ROW'

Posting data to a backend script.

Subscribe

1

2

3

4