contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Submit Form di Modal Bootstrap dengan Jquery

Posted in Tutorial Bootstrap Life at 25 Juli 2019 With 0 Comments


Selamat Sore Semua.. dan salam suckittrees untuk anda semua... OK pada kesempatan kali ini admin akan Share tentang sebuat artikel Bootstrap , dengan Judul Membuat Form dengan Modal Bootstrap dan Jquery

Ok... Langsung saja, perlengkapan apa saja yang kita butuhkan untuk uji coba kali ini ..???? yup yang pertama mungkin secangkir kopi, dan laptop,, gunakan saja text editor kesukaan anda, anda bisa menggunakan notepad++ atau sejenisnya

modal form bootstrap dan jquery

Hal pertama saya akan membagi beberapa bagian penting untuk Membuat Submit Form dengan Bootstrap Jquery ini :

  • index.php
  • kontak.js
  • save_kontak.php

Jadi ada 3 file atau tiga bagian yang nanti akan kita buat. sekarang kita masuk pada bagian Pertama membuat File index.php

index.php

pada file index ini kita akan menempatakan form dan memanggil file-file bootstrap yang kita butuhkan untuk membuat design Form nya

--Memanggil komponen untuk bootstrap--

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- jQuery -->
<title>Suckittrees.com : Submit Form dengan Modal Bootstran dan Jquery</title>
<script type="text/javascript" src="kontak.js"></script>

 langkah selanjutnya kita buat form kontaknya

    <div id="contact">
    <button type="button" class="btn btn-info btn" data-toggle="modal" data-target="#contact-modal">Tampilkan Form</button>
    </div>
    <div id="contact-modal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">×</a>
                    <h3>Form Kontak</h3>
                </div>
                <form id="contactForm" name="contact" role="form">
                    <div class="modal-body">                
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" name="name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" name="email" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea name="message" class="form-control"></textarea>
                        </div>                    
                    </div>
                    <div class="modal-footer">                    
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-success" id="submit">
                    </div>
                </form>
            </div>
        </div>
    </div>   

kontak.js

file ini kita buat untuk melakukan handle atau controler pada action form , berikut kodenya :

$(document).ready(function(){    
    $("#contactForm").submit(function(event){
        submitForm();
        return false;
    });
});
// function to handle form submit
function submitForm(){
     $.ajax({
        type: "POST",
        url: "save_kontak.php",
        cache:false,
        data: $('form#contactForm').serialize(),
        success: function(response){
            $("#contact").html(response)
            $("#contact-modal").modal('hide');
        },
        error: function(){
            alert("Error");
        }
    });
}

Untuk Yang terakhir, kita buat file untuk proses ke database

save_kontak.php

<?php
if (isset($_POST['email'])) {
    $name = strip_tags($_POST['name']);
    $email = strip_tags($_POST['email']);
    $message = strip_tags($_POST['message']);
    //query ke database
}
?>

 Demo Download

Artikel Rekomendasi

Artikel Terkait

Diskusi