Input AJAX parameters

Asked

Viewed 64 times

-1

I’m starting to learn AJAX and I’m having a simple doubt. I want to pass the value of an input but I’m having a mistake when performing the test. The Code is very simple so I will paste it complete. When I pass the fixed value the alert works. When I try to pass the value through the input the following error appears :

Undefined Index .

I have looked in some forums , vidéos and etc but so far I could not .

In summary, I want to get the input value by the ID but the Undefined Index error .

<script>
$.ajax({ method: "POST", url: "php.php", 
data: { 
    nome: $('#nome').val(), 
    senha:"John" } }) 
.done(function( msg ) { alert( "Data Saved: " + msg ); });

</script>
</head>


<form id="form">

    <label>nome:</label>
    <input name="nome" id="nome"> </input>

    <label>senha:</label>
    <input name="senha" id="senha"> </input>

    <button type="submit"> Enviar </button>

</form>

PHP page:

$nome =$_POST['nome'];
echo $nome;
echo " recebido";
php ajax json

  • It is not very clear what the problem is. Pass the value of msg? to which input?

  • The consultation AJAX is done when? On page startup or form submission?

  • The query is performed when sending the form. The intention is that the entered value is received in the alert

  • There is no need to put on the form the method="post"?

  • I believe that if I put the method and the action I will not use Ajax. The idea would be to work asynchronously collecting the variable via php and expressing the value typed via ajax

1 answer

-1

What happens is that you have not determined an event for the firing of Ajax. As you declared the script tag before your html form the function was executed before the form was loaded.

If you declare the script tag below the form you will see that it will send the request and will no longer return the Undefined error, but you still will not receive the desired data.

For this to happen, you must determine an event for Ajax firing after you have filled the fields.

It is also interesting that you add this event inside the $(Document). ready() to make sure that the document was fully loaded before performing the functions.

Example: In this case I assigned an event click to the button element only to demonstrate, but you can put the type of event that best fits your code.

<form id="form">
    <label>nome:</label>
    <input name="nome" id="nome"> </input>

    <label>senha:</label>
    <input name="senha" id="senha"> </input>

    <button type="submit"> Enviar </button>
</form>

$(document).ready(function(){
    $("button).click(function(){
        $.ajax({ 
            method: "POST", 
            url: "php.php", 
            data: { 
                nome: $('#nome').val(), 
                senha:"$('#senha').val()" } }) 
         .done(function( msg ) { 
             alert( "Data Saved: " + msg ); 
        });
    });
});

  • It worked! Thank you very much :)

Browser other questions tagged php ajax json

You are not signed in. Login or sign up in order to post.