Problem with data transfer by jquery to php-CodePudding

I want to use Ajax to get data from #f1 (.Val()) and show it by PHP (echo) and it is successful in Ajax but I cant get data in PHP. and it always says : false. here is the code:(line 86~93 is not important). can anybody help please...?

<form action="index.php" method="post" id="submit-form">
                    <div >
                        username:
                    </div>
                    <div >
                        <input type="text" ,  , name="username" placeholder="username" id="f1">
                    </div>
                    <div >
                        password:
                    </div>
                    <div >
                        <input type="text" ,  , name="sing2" placeholder="password">
                    </div>
                    <div >
                        email:
                    </div>
                    <div >
                        <input type="email" ,  , name="sing3" placeholder="email">
                    </div>

                    <div >
                        <input type="button" ,  , name="sing4" value="submit">
                    </div>
                </form>

<script type="text/javascript">

   
    $("#f1").keypress(function(){
        
        $.ajax({
            type:'POST',
            url:'index.php',
            
            data:{
            uen:$("#f1").val(),
                
            },
            success: function(data) {
                alert($("#f1").val());
            },
            failure: function(data) {
                alert("0");
            },
            
        });
    });
});
</script>
<?php
if(isset($_POST['uen'])){
   echo $_POST['uen'];
}else{
    echo 'false';
}
?>

CodePudding user response：

success: function(data) {
    alert($("#f1").val());
},

The response to the Ajax request will be placed in the data argument to the success function, but you are ignoring it.

Unless you are examining the data in the Network tab of the browser's developer tools, you can't know if it is returning false or something else.

When you make the initial GET request to render the page, this chunk of code:

<?php
if(isset($_POST['uen'])){
   echo $_POST['uen'];
}else{
    echo 'false';
}
?>

… will render false on the HTML document (because it is a GET request).

Subsequent Ajax requests will not travel back in time and alter the response to the earlier request to cause the browser to update the DOM.

To do that you need to read the value of data in the success function and use JavaScript to modify the DOM based on it.

CodePudding user response：

I see some errors in your code, including commas in the form input tags. Here is the code as it should be written:

<form action="form_request.php" method="post" id="submit-form">
<div >
    username:
</div>
<div >
    <input type="text"  name="username" placeholder="username" id="f1">
</div>
<div >
    password:
</div>
<div >
    <input type="text"  name="sing2" placeholder="password">
</div>
<div >
    email:
</div>
<div >
    <input type="email"  name="sing3" placeholder="email">
</div>

<div >
    <input type="button"  name="sing4" value="submit">
</div>

You also have some syntax errors in the jquery code, the correct way is the following:

$("#f1").keypress(function () {
    $.ajax({
        type: 'post',
        url: 'ajax_request.php',
        data: {
            async : true,
            uen: $("#f1").val()
        },
        success: function (data) {
            console.log($("#f1").val());
        }
    });
});

At the end, modify your PHP snippet so that it only interprets requests that are sent with the "async" post variable, this in my example should be in a file called "ajax_request.php" as follows:

if (isset($_POST['async'])) {
   echo $_POST['uen'];
}

Typing to the username field will asynchronously send the "keypress" event to the PHP code and the response to the browser console (it was originally shown in alert).

I hope to be helpful