Update only specific variable on 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.

yes can only be done with javascript don't know why the php tag — Gert
– Gert, Commented Mar 29, 2017 at 8:02

Dead Master · Accepted Answer · 2017-03-29 08:37:56Z

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

Collectives™ on Stack Overflow

Update only specific variable on PHP/HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related