CODEWITHSUNDEEP
phpjqueryhtml
Madzgo
Madzgo

Reputation: 104

Show form and get input on the same page, using jQuery

So, I'll try to describe what I'm trying to make.

A form should appear on the top. Just one input and a submit button. When you click submit, a pop-up should appear with the result.

Here is my code:

<html>
    <head>

        <script type="text/javascript">
            $(document).ready(function(){
                $(".show").click(function(){
                $("#popup").fadeIn();
                return false; 
                });
            });
        </script>
    </head>

    <body>    
        <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
            Number: <input type="number" name="number" />
            <input class="show" type="submit" name="submit" />
        </form>

        <div id="popup">    
            <?php
                if(isset($_POST["number"])) {
                    echo $_POST["number"];
                }
            ?>
              <a id="iks">Close</a>
        </div>
    </body>
</html>

(I removed a part of the <head> to keep it smaller, but there's style that states display:none; for #popup)

The problem is that it won't update: it remains the same. The pop-up works, but it always gives the same number, no matter what I type.

I tried without jQuery, and it works, so it's not about php/html.

Upvotes: 1

Views: 3748

Answers (3)

gilly3
gilly3

Reputation: 91527

You are getting client side code mixed up with server side code. All of your PHP runs before any of your JavaScript. Once the JavaScript starts running, the PHP is long done and wont do anything more in this page.

You have to think of Web Development as a kind of meta-programming. That is, software that generates software. Your PHP is code that runs on your server and generates code to be run in a browser. Your PHP is run once for each HTTP web request. Your JavaScript is run based on things that happen in the browser. Your JavaScript doesn't know anything about the web request or the server. It only knows about the page it is on, the browser, the DOM. Similarly, the PHP doesn't know anything about the browser or what the JavaScript is doing. JavaScript and PHP run completely independent of one another, with no interaction.

That is, until you introduce AJAX. AJAX style programming provides a mechanism for letting JavaScript talk to PHP.

Create a PHP page specifically to handle AJAX requests. You want a separate page because you won't be returning a full html page, but just a small amount of data, possibly as html, but usually as JSON, or maybe XML.

If your Ajax handler PHP page looked like this:

AjaxHandler.php

<?php 
    if(isset($_POST["number"])) { 
        echo $_POST["number"]; 
    } 
?>

Then You could ajax-ify your JavaScript like this:

$(".show").click(function(){ 
    $.post("ajaxHandler.php", { number: $("input[name=number]").val() }, function (response) {
        $("#popup").text(response).fadeIn(); 
    });
    return false;  
});

This code issues an http request, posting number=[n] to ajaxHandler.php. The response is given to the callback function to use however it needs to.

Upvotes: 0

Brad Christie
Brad Christie

Reputation: 101614

Your .show is a submit button, yet you're return false; within the click event (effectively stopping the submission and therefore no new value will be present).

I would either bind the show to a new button or maybe use AJAX to submit the value and display the result in #popup after it's returned.

For the sake of redundancy and further explanation, here's a working example along with the code:

First, add this to the top of your current PHP file:

<?php
  // check if a value is being submitted
  if (isset($_REQUEST['number'])){
    // there is one, output it then exit PHP (so we don't output the
    // rest of the page--an ajax call only needs the response, not
    // the layout)
    echo $_REQUEST['number'];
    exit;
  }
?>

Note that I don't check for a valid value nor which method it came from. This gives you the ability to change method="POST" into method="GET" and have the example still work. otherwise, you probably want to stick with $_POST[] superglobal and also validate the input.

Now, modify your <script></script> to use the following instead of what you have:

$(document).ready(function(){

// we want to trigger this function when the form's submitted
$('form').on('submit',function(e){
     // store the form element
     var $form = $(this);

     // make an AJAX call to the action of the form
     // using the method supplied.
     $.ajax({
         'type': $form.prop('method'),
         'url': $form.prop('action'),
         'data': $form.serialize(), // send the value of "number"
         'dataType': 'html',
         'success': function(html){
            // we now have the value back, let's add it to the #popup
            // element, add a close button and then fade both in.
            $('#popup').html(html).append(
                $('<a>',{'href':'#','html':'Close','id':'iks'}).on('click',function(e){
                     $(this).parent().fadeOut();
                })
            ).fadeIn();
        }
    });
    // prevent the form from submitting the traditional way
    e.preventDefault();
});

});

Because the above takes advantage of what the form has specified (in both the action and method attributes) it shouldn't need much customization. Now it will use AJAX to POST/GET the value in the number input and because we added the PHP code that number will be re-outputted and the success function will receive it back, add it to the #popup element (along with a close button) and fade it in.

Upvotes: 4

Alexander Larikov
Alexander Larikov

Reputation: 2339

Well, you did it in a wrong way. Along with showing pop-up you need to send AJAX request to your PHP script, wait for result and then show it in pop-up. So to summarize what you need is - one php script and one html file. It may looks like

ajax.php

<?php
if (isset($_POST['number'])){
    echo $_POST['number'];
}

form.html

<html>
<head>
<script type="text/javascript">
    $(document).ready(function(){
        $('#form').on('submit',function(e){
            e.preventDefault();
            $.post('ajax.php', $(this).serialize(), function(response){
                $('#result').html(response);
                $('#popup').fadeIn();
            }
        });
    });
</script>
</head>
<body>

<form id="form" method="post">
    Number: <input type="number" name="number" />
    <input class="show" type="submit" name="submit" />
</form>

<div id="popup">
  <div id="result"></div>
  <a id="iks">Close</a>
</div>
</body>
</html>

Upvotes: 0

Related Questions