Passing form Value into PHP include inside HTML DOM innerHTML

Question

I am trying to pass a value from a <select> dropdown into a HTML DOM innerHTML JS so it is written into a div on the page. However I want the value to be passed into a PHP include so it changes the included php content being passed into the div on change of the dropdown.

I have gotten it to work passing the value into the innerHTML w/o wrapping it in a php include. So it will write into the div as 'purple.php' instead of the file itself, but when I try and wrap it in an include it breaks.

This is what I have gotten to so far.

Thanks for input, I have searched to no avail.

<script>
function gift(value)
    {
       document.getElementById("gift_post").innerHTML=('<?php echo include (value);?>');
    }
</script>

<form action="" method="post">
    <select name="slct" id="name" onchange="gift(this.value)">

        <option value="" selected="selected"> Select </option>
        <option value="purple.php"> purple </option>
        <option value="green.php"> green </option>
        <option value="blue.php"> blue </option>
    </select>
</form>


<div id="gift_post"></div>

PHP is processed first by the server side. JavaScript works in the client side. So, this is your problem. You are trying to change dynamically a value already processed. How about use [jQuery.ajax()](http://api.jquery.com/jquery.ajax/) to work asynchronously? — Fernando Miguel, Sep 27 '16 at 18:28
Thank you @FernandoMiguel for you suggestion. This is actually my first project working directly with AJAX and am unfamiliar with jQueryAjax. I am reading into it now here http://api.jquery.com/jquery.ajax/ . Any other suggestions? — E_Bloomquist, Sep 27 '16 at 18:35

score 0 · Answer 1 · edited Sep 27 '16 at 20:03

0

function gift(value)
{
  document.getElementById("gift_post").innerHTML=('<?php echo include (' + value + ' ); ?>');
}

edited Sep 27 '16 at 20:03

Vural

8,666
11
40
57

answered Sep 27 '16 at 18:29

O.Rares

1,031
1
16
19

Yes, as I mentioned in my initial post I was able to accomplish this. This works to pass the value as plaintext into the #gift_post div, I am trying to write that value into a php_include so it then writes the php file into #gift_post. – E_Bloomquist Sep 27 '16 at 18:32
So try $("#gift_post").load(var1); where var var1= value +".php"; – O.Rares Sep 27 '16 at 18:34
How exactly would this be implemented @O.Rares ? Just like? $("#gift_post").load(var1); var1= value +".php"; – E_Bloomquist Sep 27 '16 at 18:44
You mean the load function? Add jquery api before this code. – O.Rares Sep 27 '16 at 18:45
var1 should be declared before the load function – O.Rares Sep 27 '16 at 18:46
The page is running jquery 1.x – E_Bloomquist Sep 27 '16 at 18:47

score 0 · Accepted Answer · answered Sep 27 '16 at 19:53

Thank you @O.Rares with your help I was able to figure it out. I stripped it down from what you had suggested since the .php is in the value so it doesn't need to be passed to the var. So that could be stripped. Then if i were to use the .load() function instead of php_include I dont need to worry injecting the .php into the innerHTML function because it can be passed directly with the form values. So I ended up with this and it is working perfectly. (note: '$' was changed to 'jQuery' due to further Wordpress conflict.)

<script>

function gift(value){
    jQuery("#gift_post").load(value); 
}

</script>



<form action="" method="post">
    <select name="slct" id="name" onchange="gift(this.value)">

        <option value="" selected="selected"> Select </option>
        <option value="purple.php"> purple </option>
        <option value="green.php"> green </option>
        <option value="blue.php"> blue </option>
    </select>
</form>


<div id="gift_post"></div>

Passing form Value into PHP include inside HTML DOM innerHTML

2 Answers2