PHP

PHP and AJAX form submit

Pinterest LinkedIn Tumblr
<form action="" class="contact_form" id="comment">
  <center>
    <div id="result">
    </div>
  </center>
  <div class="form-group">
    <label for="name">Name*
    </label>
    <input type="name" class="form-control" name="name" placeholder="Type Here">
  </div>
  <div class="form-group">
    <label for="organization">Organization name
    </label>
    <input type="text" class="form-control" name="organization_name" placeholder="xyz">
  </div>
  <div class="form-group">
    <label for="email">Email*
    </label>
    <input type="email" class="form-control" name="email" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="sel1">Service you provide
    </label>
    <select class="form-control" name="service_provider">
      <option>Sell
      </option>
      <option>2
      </option>
      <option>3
      </option>
      <option>4
      </option>
    </select>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">
      <span class="label_span">I accept the terms and conditions. T&C
      </span>
    </label>
  </div>
  <button type="submit" class="btn btn-default btn_submit">Submit
  </button>
</form>

After Html Part Just put ajax request

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
$(function(){
    $("#comment").submit(function(){
        dataString = $("#comment").serialize();
        $.ajax({
            type: "POST",
            url: "db.php",
            data: dataString,
            success: function(data){
                $("#result").html('Successfully updated record!');
                $("#result").addClass("alert alert-success");
                document.getElementById("comment").reset();
                setTimeout(function() {
                    $('.alert-success').addClass('sss');},5000);
            }
        });
        return false;  //stop the actual form post !important!
    });
});
</script>
<style media="screen">
    .sss {
        display: none;
    }
</style>

Write A Comment