Bootstrap Forms with jQuery

Bootstrap 4 forms use form-group, form-control, labels and layout utilities. jQuery can collect and submit the form without changing the underlying form semantics.

Basic Bootstrap Form Top ↑

<form id="login-form">
  <div class="form-group">
    <label for="userid">User ID</label>
    <input type="text" class="form-control" id="userid" name="userid">
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" name="password">
  </div>

  <button class="btn btn-primary" type="submit">Login</button>
</form>

Inline Form Top ↑

<form class="form-inline">
  <label class="sr-only" for="email">Email</label>
  <input class="form-control mr-2" id="email" name="email" type="email">
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

Submit with jQuery Top ↑

$( "#login-form" ).on(
    "submit",
    function ( event ) {
        event.preventDefault();

        $.post(
            "backend.php",
            $( this ).serialize()
        )
        .done(function ( response ) {
            console.log( response );
        });
    }
);

Bootstrap form inputs → · serialize()

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<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>

Original example 2

<form class="form-horizontal">

Original example 3

<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>

Original example 4

<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>

Original example 5

<?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);
?>

Original example 6

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

Additional Original Learning Routes Top ↑

• http-get.php
• http-post.php
• msg-demo/form-code-generator.php
• msg-demo/form-horizontal.php
• msg-demo/form-row.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: