Why wont this work? (probly easy answer)

[laytone]

function setAndSubmit(bdate, edate) {
bDateBox = document.getElementById('bDate');
eDateBox = document.getElementById('eDate');

bDateBox.value = bdate;
eDateBox.value = edate;

document.forms['reportRange'].submit();
}

After using a link that calls this function with a new bdate and a new edate, the form submits but the new values set are not submitted. What do I have to do to make the new values 'take' before I submit the form?

Thanks in advance.

[clueful]

Show the form or at least how the function is being called.

[laytone]

<form name="reportRange" id="reportRange" method="post" action="myposturl">
 <strong>Quick Select:</strong>  
 <a href="javascript:setAndSubmit('2010-07-09', '2010-07-09');">Today</a> | 
 <a href="javascript:setAndSubmit('2010-07-08', '2010-07-09');">Past 2 Days</a>  | 
 <a href="javascript:setAndSubmit('2010-07-02', '2010-07-09');">Past 7 Days</a>  | 
 <a href="javascript:setAndSubmit('2010-06-25', '2010-07-09');">Past 14 Days</a>  | 
 <a href="javascript:setAndSubmit('2010-06-09', '2010-07-09');">Past 30 Days</a> 

<br>
  <strong>Custom:</strong> <label for="bDate">From</label>
  <input name="bDate" type="text" id="bDate" value="2010-07-01">
<label for="eDate">To</label>
  <input name="eDate" type="text" id="eDate" value="2010-07-09">
  <input type="submit" name="refreshSubmit" id="refreshSubmit" value="Refresh Report"> 
  <br>

</form>

**note, everything works great if I enter dates into the text fields and click the submit button... but when I use the links to set values in the text box, the JavaScript sets the values but the values don't carry through the submit.

[clueful]

Never use javascript: This is the way to use an onclick handler in a link (if you must use a link):

<a href="#" onclick="setAndSubmit('2010-07-09', '2010-07-09');return false;">Today</a>

[laytone]

I appreciate your helped, this solved me problem. Do you mind me asking you, if you know, why you shouldn't use 'javascript:', and is it okay to use it in this context: href="javascript:void(0);" ?

Thanks again for you help.

Layton

[jscheuer1]

When you have an a tag with an href, if that tag fires, it's a signal to the browser to begin unloading the page. When you use:

<a href="javascript:whatever();" . . .

That process (unloading the page) starts. If there is no actual link there (as is the case with javascript:), the page won't change, but some things that might ordinarily happen before page unload begins (like submitting a form) will be skipped. This varies by browser. Other undesirable things can happen as well, though usually nothing bad happens. That's why it's still used so much.

Oddly enough, if you do use an onclick event that returns false as clueful instructs, you can use the the:

<a href="javascript:whatever();" . . .

too because it will be skipped. The only reason for doing so at that point is so that browsers that show the href in the status bar or elsewhere on hover of the link will have something to report to the user.

So you could do:

<a href="javascript:setAndSubmit('2010-07-09', '2010-07-09');" onclick="setAndSubmit('2010-07-09', '2010-07-09');return false;">Today</a>

That way the user will get an idea what clicking on the link will do before they click on it. But, since it won't fire anyway, you can tailor it more for informational purposes, like:

<a href="javascript:view(Today);" onclick="setAndSubmit('2010-07-09', '2010-07-09');return false;">Today</a>

[laytone]

When you have an a tag with an href, if that tag fires, it's a signal to the browser to begin unloading the page. When you use:

<a href="javascript:whatever();" . . .

That process (unloading the page) starts. If there is no actual link there (as is the case with javascript:), the page won't change, but some things that might ordinarily happen before page unload begins (like submitting a form) will be skipped. This varies by browser. Other undesirable things can happen as well, though usually nothing bad happens. That's why it's still used so much.

Oddly enough, if you do use an onclick event that returns false as clueful instructs, you can use the the:

<a href="javascript:whatever();" . . .

too because it will be skipped. The only reason for doing so at that point is so that browsers that show the href in the status bar or elsewhere on hover of the link will have something to report to the user.

So you could do:

<a href="javascript:setAndSubmit('2010-07-09', '2010-07-09');" onclick="setAndSubmit('2010-07-09', '2010-07-09');return false;">Today</a>

That way the user will get an idea what clicking on the link will do before they click on it. But, since it won't fire anyway, you can tailor it more for informational purposes, like:

<a href="javascript:view(Today);" onclick="setAndSubmit('2010-07-09', '2010-07-09');return false;">Today</a>

John,
Thank you for your very informative answer!