How empty input value when success submit in jquery

Question

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.

If the inputs are in a form, and blank when the page loads, you could use $("#form-id").reset(); — user2182349
– user2182349, Commented Jul 8, 2017 at 11:32

Mate Solymosi · Accepted Answer · 2017-07-08 11:38:28Z

1

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("");
  }
});

answered Jul 8, 2017 at 11:38

Mate Solymosi

6,00726 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

behi Over a year ago

With this method, my problem was solved. thank you very much.

Mate Solymosi Over a year ago

If this answer solved the problem, please mark it as the solution.

Palani Samy · Accepted Answer · 2017-07-08 12:12:25Z

0

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

edited Jul 8, 2017 at 12:12

answered Jul 8, 2017 at 11:34

Palani Samy

16910 bronze badges

2 Comments

behi Over a year ago

I do not want this method, this way, if the fields are empty, inputs are cleared I just want the inputs to be cleared when the information is inserted

Palani Samy Over a year ago

Now i changed my code. Now if status true that input fields will be empty

Collectives™ on Stack Overflow

How empty input value when success submit in jquery

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related