CODEWITHSUNDEEP
phpajaxjquery
Anon
Anon

Reputation: 1221

Verify a submitted form without the PHP redirection to the action page

I'd like to submit a form thanks to AJAX and display the error messages contained in "form_treatment.php" (form verification) without the php redirection to "form_treatment.php" when I submit. What have I to write in the following lign ?

$.post("form_treatment.php",name, ???);

I have a basic form in form.php :

<form method="post" action="form_treatment.php" >
    <input type="text" name="user_name" value="Your name..." /> 
    <button type="submit" >OK</button>
</form>

This form is treat in form_treatment.php :

if ( empty($_POST['user_name']) ){      
    echo 'You have to enter your name.';        
} else { 
    $already_existing = verify_existence( $_POST['user_name'] ); 
    // verification in the DB, return true or false

    if( $already_existing ){
        echo 'Name already used.';
    } else {    
        // Entering the name in the DB
    }
}

Upvotes: 0

Views: 192

Answers (2)

Seder
Seder

Reputation: 2763

You can accomplish this by two ways 1st One in the same page 2nd one via AJAX The first way can be done like this 

<?php
if(isset($_POST['sub']) && $_POST['sub'] == 'true'):
if ( empty($_POST['user_name']) ){      
    echo 'You have to enter your name.';        
} else { 
    $already_existing = verify_existence( $_POST['user_name'] ); 
    // verification in the DB, return true or false

    if( $already_existing ){
        echo 'Name already used.';
    } else {    
        // Entering the name in the DB
    }
}

endif; 
?>
<form method="post" action="<?php echo $PHP_SELF; ?>" >
    <input type="text" name="user_name" value="Your name..." /> 
    <input type="hidden" name="sub" value = "true" >
    <button type="submit" >OK</button>
</form>

The 2nd way via ajax can be done like this 

<div id="errors"></div>
<form method="post" id="myFrm">
        <input type="text" name="user_name" value="Your name..." id="name" /> 
        <button type="submit" >OK</button>
</form> 

<sctipt>
$("#myFrm").submit(function() {
  var NameFromForm = $('#name').val(); 
   $.post("form_treatment.php", { "user_name": NameFromForm },
 function(data){
   $("#errors").html(data); 
 });
    event.preventDefault();
});
</script>

If you need any explanation leave a comment

Upvotes: 1

Alex
Alex

Reputation: 1722

You can try something like the following:

<form id="myForm" method="post" action="form_treatment.php" >
    <span id="message"></span>
    <input type="text" name="user_name" value="Your name..." /> 
    <input type="submit" >OK</button>
</form>

And the javascript: 

$('#myForm').submit(function() {
  var myForm = $(this);
  $.ajax({
    type: 'POST',
    url: 'form_treatment.php',
    data: myForm.serialize(),
    success: function (data) {
       $('#message').html(data);
    }
  }); 
  return false;
});

Upvotes: 3

Related Questions