How do I pass value of a variable in jquery to PHP without submitting form or refreshing the page?

Question

My ajax is this:

$.ajax({
    type: "POST",
    url: 'index.php',
    datatype: 'html',
    data: { password : password}
});

Have been trying to store it in $pword . But it doesn't store. PHP:

if(isset($_POST['password']))
{
    // store session data
    $pword=$_POST['password'];
}

HTML is this:

<input type="password" placeholder="password" id="password" name="password"/>

Please help.

Answer 1

first of all : there is nothing wrong with server side (PHP) and HTML code.

so for jQuery portion : you need to correct a line like i did below:

 $.ajax({ type: "POST", url: 'index.php', datatype: 'html', data: { password : $("#password").val() //here i asked jquery to fetch entire value of my html input(with an id of "password") as text(Not an Object) so it gives me the entered text value. }}) .success(function(data) { alert(data.toString()); });//optional function:runs when server responses to your request 

i can leave more detailed help if you explain what exactly you r going to do.

Answer 2

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#password').on('blur',function(){
    var password = $('#password').val();

     $.ajax({
            type: "POST",
            url: 'index.php',
            datatype: 'html',
            data: { password : password
           },
            success: function(data){
            alert(data);
        }

        });


})
})
</script>

<form method="post">
    <input type="password" placeholder="password" id="password" name="password"/>
</form>

Answer 3

use form.serialize() to send data.

$.ajax({
            type: "POST",
            url: 'index.php',
            datatype: 'html',
            data: form.serialize()
});

Answer 4

From jquery documentation the $.ajax request should look like this:

$.ajax({
  method: "POST",
  url: "some.php",
  dataType: 'json',
  data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
  alert( "Data Saved: " + msg );
});

Another suggestion would be to create a button. When pressing it the data will be sent to the PHP file.

<input type="password" placeholder="password" id="password" name="password"/>
<input type="button" id="submit" name="submit" value="submit" />

The jQuery code would be:

$(document).ready(function(){
    $('#submit').click(function(){
        $.ajax({
          method: "POST",
          url: "my-php-file.php",
          dataType: 'json',
          data: { password: $('#password').val() }
        })
        .done(function( msg ) {
          alert( "Data sent: " + msg );
        });
    });
});

Answer 5

HTML

 <input type="password" placeholder="password" id="password" name="password"/> <input type="button" onclick="sendData()" value="Ok"> 

Javascript

 function sendData(){ $.ajax({ type: "POST", url: 'index.php', datatype: 'html', data: { password : $("#password").val()} }); } 

Answer 6

You can use javascript setTimeout function to pass the form value into php page as mentioned below,

I have added a function called passData() inside the setTimeout function, so it calls the passData() function mentioned delay.

HTML:

<input type="password" placeholder="password" id="password" name="password"/>

Javascript:

setTimeout(function() { passData() }, 3000);

function passData(){
   var password = $("#password").val(); 
    $.ajax({
        type: "POST",
        url: 'index.php',
        datatype: 'html',
        data: { password : password}
    }); 
}