CODEWITHSUNDEEP
phpjqueryajax
behi
behi

Reputation: 73

How empty input value when success submit in jquery

I want to clear the input values when the form is submitted correctly, But there is a problem, if not inserted, the inputs are erased. I will be grateful for help me. This is my code:

$(document).ready(function(){
    $("#Insert").click(function(){
        var email = $("#email").val();
        var title = $("title").val();
        var text = $("text").val();
        var cSend = true;
$.post("ajax.php",{email:email,title:title,text:text,cSend:cSend},function(data){
        $("#contactResualt").html(data);

        });
    });
});

//ajax.php

if(isset($_POST['cSend'])){
  if (empty($_POST['email']) || empty($_POST['title']) || empty($_POST['text'])){
    echo '<div class="alert alert-warning">Fill empty fields</div>';
}
else{
    $email = $_POST['email'];
    $title = $_POST['title'];
    $text = $_POST['text'];
    $Contactus = new Contactus();
    $resualt = $Contactus->SendPM($email,$title,$text);
        if($resualt){
        echo '<div class="alert alert-success">Insertion was successful</div>';
        }
        else{
        echo '<div class="alert alert-warning">Insertion failed</div>';
        }
    }
}

So, I just want the information to be correctly inserted, Inputs will be cleared.

Upvotes: 2

Views: 2021

Answers (2)

Palani Samy
Palani Samy

Reputation: 169

You can clear the input field by using $('input').val('');

$(document).ready(function(){
$("#Insert").click(function(){
    var email = $("#email").val();
    var title = $("title").val();
    var text = $("text").val();
    var cSend = true;
    $.post("ajax.php",
    {email:email,title:title,text:text,cSend:cSend},function(data){
    var json_obj = $.parseJSON(data);//parse JSON
    $("#contactResualt").html(json_obj.msg);
          if(json_obj.status){
            $('input').val('');
         }
    });
    });
});

Ajax.php

if(isset($_POST['cSend'])){
 if (empty($_POST['email']) || empty($_POST['title']) || 
 empty($_POST['text'])){
 $result['status'] = false;         
  $result['msg'] =  '<div class="alert alert-warning">Fill empty 
 fields</div>';
 }
 else{
 $email = $_POST['email'];
$title = $_POST['title'];
$text = $_POST['text'];
$Contactus = new Contactus();
$resualt = $Contactus->SendPM($email,$title,$text);
    if($resualt){
    $result['status'] = true;
    $result['msg'] = '<div class="alert alert-success">Insertion was successful</div>';
    }
    else{
    $result['status'] = false;          
    $result['msg'] =  '<div class="alert alert-warning">Insertion failed</div>';
    }
   }
   echo json_encode($result);
}

Upvotes: 0

Mate Solymosi
Mate Solymosi

Reputation: 5967

If you only want to erase the fields when the insert was successful, you can put an indicator attribute into the response HTML:

if($resualt) {
  echo '<div class="alert alert-success" data-success="true">Insertion was successful</div>';
}
else {
  echo '<div class="alert alert-warning" data-success="false">Insertion failed</div>';
}

Then use the indicator in the AJAX callback to determine whether you should reset the form:

$.post("ajax.php", {
  email: email,
  title: title,
  text: text,
  cSend: cSend
}, function(data) {
  $("#contactResualt").html(data);
  if($("#contactResualt [data-success]").attr("data-success") === "true") {
    $("#email, #title, #text").val("");
  }
});

Upvotes: 1

Related Questions