1

I am currently using php in my html page and there is an action in the same page which gets executed upon form submission. Currently whole form gets reloaded while I want the php action to be run in the background with out reloading. How do I do it. I would also want to clear the text box after submit button is clicked. Following is the code I am currently using

<html>
<head>
</head>

<body>
    <form action="index.php" method="post"  role="form">
        <input type="email" placeholder="Enter email"  name="email_address">
        <button class="btn btn-primary custom-button red-btn">Sign Up</button>
    </form>

<?php



if(isset($_POST['email_address'])  !(trim($_POST['email_address']) == ''))

// do some action
}

?>
</body>

</html>

Note: Following code worked for me

<script type="text/javascript">
    $('#contactForm').submit(function () {
       $.post("mailer.php",$("#contactForm").serialize(), function(data){
       });
        return false;
    });
</script>
raju
  • 4,788
  • 15
  • 64
  • 119

3 Answers3

3

You need to use AJAX for this, for without reloading. Or, if you want to do it without disturbing the page, you need to set target.

Using AJAX

$("form").submit(function(){
  $.post($(this).attr("action"), $(this).serialize());
  return false;
});

Using target

<form action="index.php" method="post" role="form" target="_blank">
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • 1
    I would use `return false;` cautiously - typically preferring `e.preventDefault()` because returning false will also stop event propagation, might affect other functions if you rely on event bubbling. – Terry Apr 21 '14 at 11:36
  • 1
    $('#contactForm').submit(function () { $.post("mailer.php",$("#contactForm").serialize(), function(data){ }); return false; }); worked for me – raju Apr 29 '14 at 17:30
1

Using ajax

HTML

<html>
<head>
</head>

<body>
    <form id="myform"><!--changge-->
        <input type="email" placeholder="Enter email"  name="email_address">
        <button class="btn btn-primary custom-button red-btn" id="signup">Sign Up</button>
    </form>
</body>
</html>

<script>
    $(document).ready(function()
    {
        $('#signup').click(function()
    {
         $.ajax({
          url:'index.php',
          method:'post',
          data : $('#myform').serialize(),
          success:function()
         {
         } 

    )};
    );
    });
</script>
valdeci
  • 13,962
  • 6
  • 55
  • 80
Chetan Gawai
  • 2,361
  • 1
  • 25
  • 36
  • it gave me syntax error while this worked $.post("mailer.php",$("#contactForm").serialize(), function(data){ }); – raju Apr 29 '14 at 17:28
0

You can try this

<html>
<head>
</head>

<body>
    <form id="myform" action="index.php"><!--changge-->
        <input type="email" placeholder="Enter email"  name="email_address">
        <button class="btn btn-primary custom-button red-btn" id="signup">
         Sign Up</button>
    </form>

<script>
$(document).ready(function(){
    $('#signup').click(function(){
        $.post($(this).attr("action"), $("#myform").serialize(),function(response){
            alert(response) // you can get the success response return by php after submission success
        });
    )};
});

sandipshirsale
  • 791
  • 7
  • 11