Question

i am new to jquery, i have only recently discovered its amazing use so be easy on me please.

What i am trying to do is have an html input text box, have a variable instantly parse the input, and send that variable which contains the input text box string into a php switch statement through jquery.

The part from jquery to php works, but the part from transmitting a dynamic input text box into a variable for jquery doesn’t.

Here’s what i have:

  <script src="jquery-1.8.3.js"></script>
   <input id="in" type="text" onchange="myFunction()" />
   <script>
 function myFunction()
 {
  var a = document.getElementById("in");
  }
  // i am trying to make this var a equal to what is typed in the input box so that it can go into the "jsvar: a" part //
  $(document).ready(function(){

  $("button").click(function(){

  $.post("runphp.php", {  jsvar: a}, function(jsvar){ alert(jsvar);
     });
     });
     });
     </script>
     <button>Run php switch statement with input</button>

and the “runphp.php” file is simply a switch statement that works

  <?php 
   switch($_POST['jsvar'])
    {
     case "pass": 
      echo "<3"; break;
     case "other stuff":
     echo "</3"; break;
      default:
     echo ":("; 
     }
    ?>

The php part works fine.
But the thing is, if i declare, for example, var a = “pass” instead of doing onchange & myFunction(); then the jquery part works perfectly and passes on that value into jquery and into the php switch statement, yet when i try to make var a = that input box, it won’t go through to php. I tried making an onchange function, but it still won’t make var a equal to what i type in the input box so that it passes into the php switch statement through jquery.

Answer 1

You are missing .value

var a = document.getElementById("in").value;

Second

You are use jquery as below

var a = $("#in").val();

Change JS function as below

$(document).ready(function(){

  $("button").click(function(){

  $.post("runphp.php", {  jsvar: $("#in").val()}, function(jsvar){ alert(jsvar);
     });
     });
     });