Replace a div with another div in ajax/javascript?

Question

<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 this enter 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>

CY5 · Accepted Answer · 2013-12-25 09:04:40Z

1

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

edited Dec 25, 2013 at 9:04

answered Dec 25, 2013 at 7:52

CY5

4592 gold badges5 silver badges12 bronze badges

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

13 Comments

IT gIrLy GiRl Over a year ago

hey wat u ve described, this is what i want, but ur code dint work

CY5 Over a year ago

what is inside the echo "Success" should be same inside if(data=="Success"), otherwise it will not work

CY5 Over a year ago

Even if it does not works check your browser console to see for jquery error or show me your code

IT gIrLy GiRl Over a year ago

i ve updated my question with the code i m using(given by u) .. see it @cy5

Daedalus Over a year ago

@CY5 Your code won't work, for the simple reason that index.php does not contain the single line of content that you've specified.

|

mehmetakifalp · Accepted Answer · 2013-12-25 07:27:53Z

0

edit your php code like this;

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

answered Dec 25, 2013 at 7:27

mehmetakifalp

4556 silver badges16 bronze badges

1 Comment

IT gIrLy GiRl Over a year ago

but we cant use a script in php in that if statement na ??

ah-shiang han · Accepted Answer · 2013-12-25 12:36:19Z

0

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>

edited Dec 25, 2013 at 12:36

answered Dec 25, 2013 at 7:27

ah-shiang han

3301 silver badge10 bronze badges

4 Comments

ah-shiang han Over a year ago

or you can add onsubmit to your form and put a JS function to hide it

ah-shiang han Over a year ago

assuming you have jquery, and it's a really bad example, since it hides whether it's successful or not

Sergey Over a year ago

You have to hide whole form $('#form-search').hide(), instead hide each elements of this form

ah-shiang han Over a year ago

try now, i didn't type return true

Collectives™ on Stack Overflow

Replace a div with another div in ajax/javascript?

3 Answers 3

13 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

13 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related