how can I post data from input field without submit by ajax

Question

I want to enter value, to input field so when I leave the input field by clcking out side from the input field I will run the ajax code and send the value input dataString to same file which in this case cald ajax.php. Thanks

my code:

$(document).ready(function()
{



    var dataString;

$("valueforajax").mouseleave(function() {//when  we leave the field.
    alert('test it is mouseup ');
    dataString=$("#valueforajax").val();
    alert(dataString);
  if ("" = dataString){//it is mean that input field not empty
        $.ajax({
        type: "POST",
         url: "../../ajax.php",
             data: dataString,
             cache: false,
             success: function(html)
             {
             alert("There is submited sucsses");
             }
             });//ajax
        }//if
    });//mouseup
});//ready

ajax.php

<?php
    if  (isset($_POST['dataString'])){
        echo ("dataString not empty:= ".$_POST['dataString']);}
    ?>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="./public/stylesheets/stylesheets.css"  >
    <script type="text/javascript" src="./public/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="./public/js/ajax.js"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
    <title>mange panel</title>
    </head>
    <body>

    <br>Type value for test in ajax<input id="valueforajax" type=text name='ajaxtest'>


    </body>
    </html>

thecodeparadox · Accepted Answer · 2012-05-28 15:39:36Z

3

You missed # sign in you selector

$("valueforajax") should be $("#valueforajax").

also

data: dataString should be data: 'dataString=' + dataString OR data: {"dataString": dataString} because in your php code you're searching for

$_POST['dataString'] i.e. for dataString key.

$("#valueforajax").blur(function() { // blur is perfect for what you searching

    dataString = $.trim(this.value); // you don't need $("#valueforajax").val(); 
                                     // here, this is enough

  if (dataString){  // checking for presence of value
        $.ajax({
        type: "POST",
         url: "../../ajax.php",
             data: 'dataString=' + dataString, // or {"dataString": dataString}
             cache: false,
             success: function(html) {
                alert("There is submited sucsses");
             }
          });
        }
    });

edited May 28, 2012 at 15:39

answered May 28, 2012 at 15:28

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dockeryZ · Accepted Answer · 2012-05-28 15:43:13Z

1

You want to use blur instead of mouseleave.

A blur event occurs whenever you leave a form element. It occurs when you hit TAB, click outside the field, change fields, etc....

mouseleave only occurs when your mouse literally leaves the element.

answered May 28, 2012 at 15:43

dockeryZ

4,0011 gold badge22 silver badges30 bronze badges

Comments

MJC · Accepted Answer · 2012-05-28 15:38:09Z

0

The data must be an object (eg {"dataString" : "test"} ) or a string (eg "dataString=test")

answered May 28, 2012 at 15:38

MJC

3,9494 gold badges26 silver badges36 bronze badges

Collectives™ on Stack Overflow

how can I post data from input field without submit by ajax

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related