sending values to self using jquery-ajax_问答_开发者

sending values to self using jquery-ajax

开发者 https://www.devze.com 2023-04-06 16:49 出处：网络

may i get the jquery-ajax equivalent of this code? thanks <html> <head></head> <body>

相关专题：jquery php

may i get the jquery-ajax equivalent of this code? thanks

<html>
<head></head>
<body>

<?php开发者_如何学C
/* if the "submit" variable does not exist, the form has not been submitted - display initial page */
if (!isset($_POST['submit'])) {
?>

    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    Enter your age: <input name="age" size="2">
    <input type="submit" name="submit" value="Go">
    </form>

<?php
    }
else {
/* if the "submit" variable exists, the form has been submitted - look for and process form data */
    // display result
    $age = $_POST['age'];
    if ($age >= 21) {
        echo 'Come on in, we have alcohol and music awaiting you!';
        }
    else {
        echo 'You're too young for this club, come back when you're a little older';
    }
}
?>

</body>
</html>

Phew, I just whipped this up:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>

$(document).ready(function() {

$("#go").click(function() {
    var age = $("#age").val();
    if(age >= 18) {
        document.getElementById('pre').style.display = 'none';
        document.getElementById('post_good').style.display = 'block';
    } else {
        document.getElementById('pre').style.display = 'none';
        document.getElementById('post_bad').style.display = 'block';
    }
})
})
</script>
<body>

<div id="pre">
<form action="" method="post">
Enter your age: <input name="age" size="3" maxlength="2" id="age">
<input type="button" name="submit" value="Go" id="go">
</form>
</div>

<div id="post_good" style="display:none;">
Come on in, we have alcohol and music awaiting you!
</div>
<div id="post_bad" style="display:none;">
Sorry, You're too young! 
</div>

</body>
</html>

I assume that you were looking for a solution that doesn't require a new pageload.

I don't want to just give you the answer without an explanation: The page simply contains all the information you wish to display, but keeps it hidden in a div. When you enter your age, the jquery simply 'unhides' the correct div.