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

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

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.

Advertisement

Answer