send html input as variable into jquery which then sends it to PHP

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.

GBD · Accepted Answer · 2012-12-21 17:26:58Z

3

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);
     });
     });
     });

edited Dec 21, 2012 at 17:26

answered Dec 21, 2012 at 17:12

GBD

16k2 gold badges49 silver badges52 bronze badges

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

1 Comment

sad electron Over a year ago

oh, well that did it for me, i knew it was something very obvious, thank you. Wait, it didn't completely do it, the input does go through, but if i type in "pass" into the html input box it doesn't throw out the "<3" part, it throws out the ":(" part, it seems it's not reading the input correctly for me

Sharlike · Accepted Answer · 2012-12-21 17:13:23Z

1

You can use jquery to select the value as well:

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

answered Dec 21, 2012 at 17:13

Sharlike

1,7992 gold badges19 silver badges30 bronze badges

2 Comments

sad electron Over a year ago

Thanks, how would i use this part? Could i just plug in $("#in").val(); right into the jsvar: a part?

Sharlike Over a year ago

It would store the value from the input in variable a, so you wouldn't need to change that line

dewyze · Accepted Answer · 2012-12-21 17:16:43Z

1

One of the great benefits of jQuery is that the line:

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

becomes

$("#in") and you can just grab the value $("#in").val()

answered Dec 21, 2012 at 17:16

dewyze

9791 gold badge8 silver badges21 bronze badges

1 Comment

sad electron Over a year ago

Ok, i figured out you can put the $("#in").val() part right into the jsvar : part, thank you!

Collectives™ on Stack Overflow

send html input as variable into jquery which then sends it to PHP

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related