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
– AyB, Commented Jan 29, 2014 at 4: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
– Ben A. Hilleli, Commented Jan 29, 2014 at 4:54

AyB · Accepted Answer · 2014-01-29 05:18:10Z

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, 2014 at 5:18

AyB

11.6k4 gold badges34 silver badges49 bronze badges

answered Jan 29, 2014 at 5:09

Vikarn Singh Mankotia

3261 gold badge2 silver badges9 bronze badges

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

2 Comments

Mohd Dhiyaulhaq Over a year ago

so how to to pass that value to variable in php? sorry i dont get it.

Vikarn Singh Mankotia Over a year ago

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

HTTP · Accepted Answer · 2014-01-29 05:16:53Z

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, 2014 at 5:16

HTTP

1,7343 gold badges19 silver badges22 bronze badges

5 Comments

AyB Over a year ago

Not at all, the OP actually wants to pass option value through the hidden variable to PHP.

HTTP Over a year ago

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.

AyB Over a year ago

The down-vote is not by me, I was simply explaining it to you.

HTTP Over a year ago

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?

AyB Over a year ago

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 <input type=hidden ....> from javascript to set as other variable

Joshua Belarmino · Accepted Answer · 2014-01-29 05:22:37Z

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, 2014 at 5:22

Joshua Belarmino

54610 silver badges24 bronze badges

Collectives™ on Stack Overflow

pass variable between php and javascript without load page

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related