I've been through a lot of questions on similar issues, but can't seem to get this working. What I'm trying to do is when a button is clicked, replace the value of a form field with the word 'now' and then submit the form. Initially, the HTML form looks like this:

<tr id="row43" bgcolor="#FF0000">
<form id="form43" name="loggingUpdate" action="index.php" method="POST">
<td>PersonsName</td><td>SGS 1-26</td>
<td><input type="text" name="takeoff" id="takeoff43"/><a href='#' onclick='startTakeoff(43);return false;'><img alt='Start Now' src='brush_24.png' border='0'></a></td>
<td><input type="text" name="landing" /></td><td>0 Mins</td>
<td><input type="text" name="towHeight" /></td>
<td><input type="hidden" name="flightIndex" value="43"/><input type="submit" value="Update..." />  <a href=deleteEntry.php?flightIndex=43><img src="close_24.png" /></a></td>
</form></tr>

The Javascript that's triggered by the onclick is as shown below:

function startTakeoff(flightIndex) { 
    var flightForm = document.getElementById("form"+flightIndex);
    var flightRow = document.getElementById("row"+flightIndex);

    flightRow.cells[2].innerHTML = "<input type=\"text\" name=\"takeoff\" value=\"now\"><a href=\"#\" onclick=\"startTakeoff(43);return false;\"><img alt=\"Start Now\" src=\"brush_24.png\" border=\"0\"></a>";
    flightForm.submit();
}

So when the button is clicked, it should replace the cell's value with 'now' and submit the form. The trouble is while it does submit, the changed value doesn't actually get submitted. If I manually add something to one of the other fields (the towHeight for example) and click the button, it does get submitted successfully. In other words, it is only the 'takeoff' field that doesn't get submitted when the button is clicked. I've never worked with Javascript before, so this seems very odd to me.

In the way of background, there is a PHP script that's generating the HTML and taking the submitted input, hence some of the strange IDs. The entire page can be seen here in case I've left anything out .php I'd appreciate the help!

I've been through a lot of questions on similar issues, but can't seem to get this working. What I'm trying to do is when a button is clicked, replace the value of a form field with the word 'now' and then submit the form. Initially, the HTML form looks like this:

<tr id="row43" bgcolor="#FF0000">
<form id="form43" name="loggingUpdate" action="index.php" method="POST">
<td>PersonsName</td><td>SGS 1-26</td>
<td><input type="text" name="takeoff" id="takeoff43"/><a href='#' onclick='startTakeoff(43);return false;'><img alt='Start Now' src='brush_24.png' border='0'></a></td>
<td><input type="text" name="landing" /></td><td>0 Mins</td>
<td><input type="text" name="towHeight" /></td>
<td><input type="hidden" name="flightIndex" value="43"/><input type="submit" value="Update..." />  <a href=deleteEntry.php?flightIndex=43><img src="close_24.png" /></a></td>
</form></tr>

The Javascript that's triggered by the onclick is as shown below:

function startTakeoff(flightIndex) { 
    var flightForm = document.getElementById("form"+flightIndex);
    var flightRow = document.getElementById("row"+flightIndex);

    flightRow.cells[2].innerHTML = "<input type=\"text\" name=\"takeoff\" value=\"now\"><a href=\"#\" onclick=\"startTakeoff(43);return false;\"><img alt=\"Start Now\" src=\"brush_24.png\" border=\"0\"></a>";
    flightForm.submit();
}

So when the button is clicked, it should replace the cell's value with 'now' and submit the form. The trouble is while it does submit, the changed value doesn't actually get submitted. If I manually add something to one of the other fields (the towHeight for example) and click the button, it does get submitted successfully. In other words, it is only the 'takeoff' field that doesn't get submitted when the button is clicked. I've never worked with Javascript before, so this seems very odd to me.

In the way of background, there is a PHP script that's generating the HTML and taking the submitted input, hence some of the strange IDs. The entire page can be seen here in case I've left anything out http://ad7zj/logging/index.php I'd appreciate the help!

• javascript
• html
• forms

Share Improve this question Follow edited Sep 23, 2012 at 15:06 Jonathan Leffler 756k145145 gold badges951951 silver badges1.3k1.3k bronze badges asked Sep 18, 2012 at 21:13 ad7zjad7zj 4311 silver badge66 bronze badges 1

• Be careful about using this method - if a browser doesn't have JavaScript enabled, you could get bad values back on the server. As Jeremy said below, consider getting the time from the server, instead. – Mac Attack Commented Sep 18, 2012 at 21:27

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You are looking for the .onsubmit() event.

That said, you might be best off just getting the time from the server. It will save you from a whole world of time zones, day light savings time issues, and the number of puters out there with inaccurate time settings.

EDIT:

Ok, thanks to your ment I think I see what is going on.

You are trying to update the form using .innerHTML. .innerHTML is a rather strange beast and full of all sorts of heartache -- yield not to its temptations. It looks like the browser is waiting till the Javascript event is over before actually applying the innerHTML update. That would be my guess, anyways. Outside of the simplest of updates, I avoid the thing.

Nuke this:

  flightRow.cells[2].innerHTML = "<input type=\"text\" name=\"takeoff\" value=\"now\"><a href=\"#\" onclick=\"startTakeoff(43);return false;\"><img alt=\"Start Now\" src=\"brush_24.png\" border=\"0\"></a>";

Try this instead:

// Assuming only one form with one name 'takeoff'
var el = document.getElementsByName("takeoff")[0];
el.value = 'now';

// The rest of the updates shouldn't matter -- the form is being submitted, nothing should be seen.