pass variable between php and javascript without load page

Question

I'am new in javascript. This question is for improve my understanding about javascript. Passing variable maybe easy if page is loaded using get or post or request function. How about passing variable between php and javascript without loading the page? Let say i have this code

<body>
    <input type='hidden' name='textOption' id='mytext' /><br/>
    <?php
        // Get the value from <input type=hidden ....> from javascript to set as other             variable
        // For example but not logic
        // $variableFromJS = document.getElementById('textOption').value;
    ?>
    <select id="optionValue">
        <option value='none'>--Select--</option>
        <option value="first">First</option>
        <option value="second">Second</option>
        <option value="third">Third</option>
    </select>
    <script type="text/javascript">
    var optionValue = document.getElementById('optionValue');

    optionValue.onchange = function() {
        document.getElementById('textOption').value = optionValue.value;
    }
    </script>
</body>

You cannot because the basic point is, your PHP code is executed before any HTML or Javascript. If you need to pass some data to PHP without page reload, search on AJAX, it's not very difficult to use. — AyB, Jan 29 '14 at 04:54
Can you clarify what it is you are trying to do here? The concept you are looing for is called AJAX. This is a method for passing information to and from the server, using client side (Javascript) code. — Ben A. Hilleli, Jan 29 '14 at 04:54

score 3 · Accepted Answer · edited Jan 29 '14 at 05:18

3

Its possible through ajax calling in javascript,

<script type="text/javascript">
var optionValue = document.getElementById('optionValue');

optionValue.onchange = function() {
    document.getElementById('textOption').value = optionValue.value;

  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
      document.getElementById("textOption").value = xmlhttp.responseText;
     }
  }
    xmlhttp.open("GET","some_page.php",true);
    xmlhttp.send();
}
</script>

true -> async is false or true.

IN your some_page.php fetch this values and perform your actions accordingly

If you want to learn more ajax in javascript you can refer javascript ajax w3schools

edited Jan 29 '14 at 05:18

AyB

11,609
4
32
47

answered Jan 29 '14 at 05:09

Vikarn Singh Mankotia

306
1
2
9

so how to to pass that value to variable in php? sorry i dont get it. – Mohd Dhiyaulhaq Jan 29 '14 at 06:28
1

edit this function as this `xmlhttp.open("POST","some_page.php?q="+variable_name,true);` and in php function `$_REQUEST["q"];` use this code to fetch the value of the variable, use echo to see the value of q – Vikarn Singh Mankotia Jan 29 '14 at 07:38

score 0 · Answer 2 · answered Jan 29 '14 at 05:16

0

Your question was not clear but base from what I understand, you want to get whatever the value of hidden field and it will be the selected value of the select box. Am I right?

So you can do,

//in your html
<input type = "text" value = "first" id = "mytext">


var hidden_field = $('#mytext').val();
$('#optionValue option[value="first"]').attr('selected', true);

Disregard this if I miss the concept of the question

answered Jan 29 '14 at 05:16

HTTP

1,674
3
17
22

1

Not at all, the OP actually wants to pass `option` value through the hidden variable to PHP. – AyB Jan 29 '14 at 05:21
I did not get the question correctly so why the votedown? I did have this line `Disregard this if I miss the concept of the question` on my answer. – HTTP Jan 29 '14 at 05:32
The down-vote is not by me, I was simply explaining it to you. – AyB Jan 29 '14 at 05:37
So the problem is that if the select box on change, whatever the value of the select box then it will be the value of the hidden field? – HTTP Jan 29 '14 at 05:46
1

He is already doing that, he now wants THAT hidden value to be passed to PHP. If you see the commented code inside his PHP block, it says `//get the value from from javascript to set as other variable` – AyB Jan 29 '14 at 05:48

score 0 · Answer 3 · answered Jan 29 '14 at 05:22

0

You can use jquery ajax inline with ur php script...

$.ajax({
    url: 'www.example.com/delete_post/<?php echo $post_id; ?>';
}).done(function() {
    //do some html manipulation here if u want...
});

answered Jan 29 '14 at 05:22

Joshua Belarmino

546
9
24

pass variable between php and javascript without load page

3 Answers3

Linked