Get a HTML input value out of a file which is located in a subfolder?

Question

I'm trying out to develop a small shortcode Wordpress Plugin. Therefore, I created a main php-File and in a subfolder the HTML-File. The subfolder (classes) is located on the same level as the php-File. In the HTML-File I'm opening a Modal to enter data. By pressing the save button, a method in the php-File is called which should write date into the Wordpress-Database.

• php-File (shortcode-concerts.php)
• classes-Folder
  • HTML-File (mainLook.html)

The code snippet shows how I tried to get the values via JavaScript and document.getElementById() out of the HTML-File - which doesn't work cause it's returning null. By alerting concert.value the alert window doesn't even show up. I did find out that the DOM only works within the current document.

However, I don't know how to get the data in the php-File out of the HTML-Elements. Is there a way to do this?

The modal window in the /classes/mainLook.html File:

<div id="modal_createconcert" class="modal">
  <div class="modal-content">
      Concert: <input type="text" id="input_concert"/>
      Date: <input type="date" id="input_date"/>
      Time: <input type="time" id="input_time"/>
      Place: <select id="combo_place"></select>
      <button class="button" id="button_save" onclick='location.href="?button1=1"'>Save!</button>
   </div>
</div>

The php-File:

<?php
function shotcode_concerts(){
    include("classes/mainLook.html");
}


if($_GET['button1']){fun1();}

function fun1()
{
    ?>
    <script type="text/javascript">     
        var concert = document.getElementById('input_concert');
        alert(concert);
    </script>
    <?php
}
?>

Answer 1

The problem is the layout of your code, not the javascript itself. Your PHP code is executed on server side, so, it will be executed before the javascript, every time you press the button, PHP is called which causes to refresh the page and then the javascript part is called, there would not be any value on the input, which causes the alert to be blank.

Answer 2

In the HTML file, the fields aren't inside a form and the button isn't a submit...you need to do this or do a javascript that will get the values from the fields and send using POST or GET to the PHP file (POST is better).

mainLook.html

<div id="modal_createconcert" class="modal">
    <div class="modal-content">
        <form action="some/location/file.php" method="post">
            Concert: <input type="text" name="input_concert"/>
            Date: <input type="date" name="input_date"/>
            Time: <input type="time" name="input_time"/>
            Place: <select name="combo_place"></select>
            <button class="button" type="submit" id="button_save">Save!</button>
       </form>
   </div>
</div>

file.php

<?php
include("classes/mainLook.html");

function fun1($var_val)
{
    ?>
    <script type="text/javascript">
        alert("<?php echo $var_val; ?>");
    </script>
    <?php
}

if $_SERVER['REQUEST_METHOD'] == 'POST' {
    fun1($_POST['input_concert'])
}

Using this logic you can do this too by inserting a javascript in HTML file that will send the fields values to the PHP page.

I hope it helps in something.