CODEWITHSUNDEEP
javascripthtmlforms
ad7zj
ad7zj

Reputation: 43

Change a form value before submitting via JavaScript

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.net/logging/index.php I'd appreciate the help!

Upvotes: 2

Views: 8743

Answers (1)

Jeremy J Starcher
Jeremy J Starcher

Reputation: 23873

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 computers out there with inaccurate time settings.

EDIT:

Ok, thanks to your comment 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.

Upvotes: 3

Related Questions