Div not replacing after form submission

Question

Hey I am making a simple form. The person just has to select among the two options - Male or female and then if any one radio button is checked, on submit I want the div to be replaced by another div. I've tried to accomplish this with a javascript function, but this doesn't seem to work for me.

    <?php
    $genderErr = $gender = "";
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (empty($_POST["gender"])) {
    $genderErr = "<div class='alert'>Please select a gender.</div>";
    } else {
    ?>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#2").css('display', 'block');
    $("div#1").replaceWith( $( "#2" ) );
    });
    </script>
    <?php }}
    ?>
    <div id="1">
    <h1>Step 1: Choose your gender</h1>
    <div>
    <form id="genderform" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
        <input type="radio" name="gender" value="male" <?php if (isset($gender) && $gender=="male");?>>Male<br />
        <input type="radio" name="gender" value="female" <?php if (isset($gender) && $gender=="female");?>>Female<br />
        <input form="genderform" id="submit" name="submit" type="submit" value="Submit">
        <?php echo $genderErr;?>
    </form> 
    </div>
    </div>
    <div id="2" style="display:none">
    <h1>Step 2:</h1>
    </div>

I don't know what I am doing wrong because if I replace the javascript with header("Location:http://example.com"); it works fine.

dont replace just hide the `div#1` and `display: block` the `div#2` it would look the same — Luminous_Dev, Feb 22 '17 at 09:16
You should check what are the error messages that console.log gives you in the browser, when you submit. You might be facing the cross-domain communication restrictions (misconfiguration of your server). — Vladimir M, Feb 22 '17 at 09:18
@Luminous_Dev If you are talking about `$("#1").css('display', 'none'); $("#2").css('display', 'block');` I also tried that. Didn't work. — user1928108, Feb 22 '17 at 09:19
@VladimirM I am using Xampp on a local server and also tried it on a Linux VPS. Both can't seem to run the script properly. — user1928108, Feb 22 '17 at 09:20
[jsfiddle](https://jsfiddle.net/qd8on1gs/) its works on jsfiddle..whats the issue? — Luminous_Dev, Feb 22 '17 at 09:23
@Luminous_Dev For me on jsfiddle, it directly displays `Step 2` — user1928108, Feb 22 '17 at 09:25
@user1928108 what does the browser console say, when it fails? — Vladimir M, Feb 22 '17 at 09:25
@VladimirM It says `Uncaught ReferenceError: $ is not defined at smple.php:7` and at line 7 on the php, I have ` if ($_SERVER["REQUEST_METHOD"] == "POST") {` Oh sorry, on console it shows `$(document).ready(function(){` is problematic at line 7 — user1928108, Feb 22 '17 at 09:28

score 0 · Answer 1 · answered Feb 22 '17 at 09:37

0

Okay I found out the issue. Though the same code worked on another script without any issue, probably because it was Bootstrap and already had imported the jquery library. The simple little fix for the whole trouble was adding the jquery library to <head>

    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

answered Feb 22 '17 at 09:37

user1928108

101
2
11

yep. that was the reason. and the reason, why it was working with header() call is because you were forcing the browser to redirect. As a side note, take a look at this (http://stackoverflow.com/questions/14093316/why-use-serverphp-self-instead-of/14093363#14093363) – Vladimir M Feb 22 '17 at 09:39
Thanks for the reference. – user1928108 Feb 22 '17 at 09:55

score 0 · Answer 2 · answered Feb 22 '17 at 11:53

Add this function to your script $("#submit").click(function()so when you click the script will trigger.

$("#submit").click(function() {
    $("#2").css('display', 'block');
    $("div#1").replaceWith( $( "#2" ) );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">
    <h1>Step 1: Choose your gender</h1>
    <div>
    <form id="genderform" action="#" method="post">
        <input type="radio" name="gender" value="male"> Male<br />
        <input type="radio" name="gender" value="female">Female<br />
        <input form="genderform" id="submit" name="submit" type="submit" value="Submit">
    </form> 
    </div>
    </div>
    <div id="2" style="display:none">
    <h1>Step 2:</h1>
    </div>

score -1 · Answer 3 · edited Feb 22 '17 at 09:22

-1

try this

$('#myForm').submit(function(){
   var field1 = $("#field1").serialize(); // If this doesn't work just remove the serialize()
   var field2 = $("#field2").serialize();
   $.ajax({
      type: "POST",
      url : "???",     //your processing page URL instead of ???
      data: "&field1="+field1+"&field2="+field2,
      success: function(){
         $("#formHolder").html("Your static content");
      }
   });
});

edited Feb 22 '17 at 09:22

B. Desai

16,414
5
26
47

answered Feb 22 '17 at 09:16

Rony Gohil

1
1

1

messy post tidy it up – Luminous_Dev Feb 22 '17 at 09:17
1

Yah, can you clean it up? – user1928108 Feb 22 '17 at 09:22

Div not replacing after form submission

3 Answers3