javascriptajaxformsinnerhtmlphp-include

Passing form Value into PHP include inside HTML DOM innerHTML


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>

Solution

  • 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>