仅更新PHP / HTML上的特定变量

Question

<form>
<table>
    <tr>
        <!--starting time is enter by user-->
        <th>Start Time:</th>
        <td><input type="time" name="startTime"></td>
    </tr>
    <tr>
        <!--interval is select by user-->
        <th>Interval:</th>
        <td>
            <select name="interval" >   
                <option value="30 minutes">30 minutes</option>
                <option value="1 hours">1 hours</option>
            </select>
        </td>
    </tr>
    <tr>
        <th>End Time:</th>
        <td>
        <!-- show end time here
        and data should be readonly(not editable) -->
        </td>
    </tr>
</table>
</form>

end time should be update (add startTime&interval) itself after start time and interval is selected. And data from start time and interval should remain. So I only want it to update the end time variable. How can I achieve that?

I had try used input type:button to update the end time. But the start time and interval data is refreshed.

Answer 1

If you want to change the site without reloading the site itself, you should use javascript/jquery, since javascript is only client-sided the user could change the values all by himself. (But still it wouldn't change anything on the server itself).

If you want to do it over this way you have to change a few things in the form

<td><input type="time" name="startTime" id="startTime" onchange="changeTime()"></td>

<select name="interval" id="interval" onchange="changeTime()">
     <option value="30">30 minutes</option>
     <option value="60">1 hours</option>
</select>

<th>End Time:</th>
  <td>
    <p id="endTime"></p>
  </td>

After that I wrote a JavaScript which updates every time something is changed. Since I don't really know how to handle the input type time, I just split it in to an array and then just updates those values:

<script>
function changeTime(){
    var startTime = document.getElementById("startTime").value;
    startTime = startTime.split(":");
    var hours = startTime[0]; 
    var minutes = startTime[1];
    var interval = document.getElementById("interval").value;

    minutes = parseInt(minutes)+parseInt(interval); 

    if (minutes > 60) {  //check if an hour should be added
        minutes-= 60;
        hours++;
    }
    document.getElementById("endTime").innerHTML = hours+":"+minutes;
}

And after that, if you are sending the values to your server, you can still just take the values and load it into a php file, but this is not client-sided so the user won't see it directly without a reload.

Here are a few things I used here:

Split

GetElementByID

More Infos about Javascript

Or if you have any open questions feel free to ask me