CODEWITHSUNDEEP
phpjqueryajax
IT gIrLy GiRl
IT gIrLy GiRl

Reputation: 337

Replace a div with another div in ajax/javascript?

<div class="col" style="border-right:none; color: #FFFFFF;">
    <form id="form-search" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
        <span>
            <span class="style2">Enter you email here</span>:
        </span>
        <input name="email" type="email" id="email" required/>
        <input type="submit" value="subscribe" class="submit" style="height:30px;"/>
    <?php
            if($_POST['email']!="")
            {
                mysql_connect("localhost","","");
                mysql_select_db("");
                error_reporting(E_ALL && ~E_NOTICE);
                $email=$_POST['email'];
                $sql="INSERT INTO newsletter_email(email) VALUES ('$email')";
                $result=mysql_query($sql);
                if($result){
                    echo "You have been successfully subscribed.";
                }
                if(!$sql)
                    die(mysql_error());
                mysql_close();
            }
        ?>

    </form>
</div>

After the user got subscribed, I want to replace my subscription form and display the echo statement.

This code is running totally fine and is very good too; just want some more advantage with it.. ..

it shows like thisenter image description here

But i want to show it like this enter image description here

my code now

<div class="col" style="border-right:none; color: #FFFFFF;">
                    <script>
                     var form = $('#form1');
   $.ajax{
         type:form.attr('method'),
         url:form.attr('action'),
 data:$("#form1").serialize(),
  success: function(data){
    if(data=="You have been successfully subscribed."){
                     $(".col").html("<div>Welcome</div>")

    }

    }
                    </script>

<form id="form1" method="post" action="index.php">
<span><span class="style2">Enter you email here</span>:</span>
<input name="email" type="email" id="email" required/>
<input type="submit" value="subscribe" class="submit" style="height:30px;"/>
            <?php
if($_POST['email']!="")
{
mysql_connect("localhost","","");
mysql_select_db("");
error_reporting(E_ALL && ~E_NOTICE);
$email=$_POST['email'];
$sql="INSERT INTO newsletter_email(email) VALUES ('$email')";
$result=mysql_query($sql);
if($result){
    echo "You have been successfully subscribed.";
}
 if(!$sql)
die(mysql_error());
mysql_close();
}
?>

</form>
  </div>

Upvotes: 0

Views: 206

Answers (3)

ah-shiang han
ah-shiang han

Reputation: 330

after you submit the ajax you can simply hide the email input and button

$("#email").hide();

==========================================

<form id="form-search" method="post" onsubmit="return myFunction()" action="<?php echo $_SERVER['PHP_SELF'];?>">

then somewhere in your page

<script>
function myFunction(){
$("#email").hide();
$(".style2").hide();
$(".submit").hide();

return true;
}
</script>

Upvotes: 0

CY5
CY5

Reputation: 459

The ajax is used as agent between html and php, The details entered in html form is supplied to php through ajax and the result obtained from php is sent back through ajax.This can be done by php itself, but the use of ajax create a non-flickering page i.e a portion of webpage is updated without a full request.

   var form = $('#form1');
       $.ajax{
             type:form.attr('method'),
             url:form.attr('action'),
     data:$("#form1").serialize(),
      success: function(data){
        if(data=="You have been successfully subscribed."){
                         $(".col").html("<div>Welcome</div>")

        }

        }

HTML code:

       <HTML>
       <BODY>
       <div class="col">
           <form id="form1" action="index.php" method="POST">
              <input name="email" type="email" id="email" required/>
              <input type="submit" value="subscribe" class="submit" style="height:30px;"/>
          </form>
       </div>
       </body>
        </html>

Update ajax code

   var form = $('#form1');
       $.ajax{
             type:form.attr('method'),
             url:form.attr('action'),
     data:$("#form1").serialize(),
      success: function(data){
        if(data=="You have been successfully subscribed."){
                         $(".col").html("<div>Welcome</div>")
                     }    
       },
             error: function(xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
              }
       }

Upvotes: 1

mehmetakifalp
mehmetakifalp

Reputation: 455

edit your php code like this; 

if($result){
    <script>
      $(".class").hide(); // get input class name
    </script>
    echo "You have been successfully subscribed.";
}

Upvotes: 0

Related Questions