SID-01042: ShowCalendar click triggers form to submit

Status:	Answered	TWiki version:	5.0.0	Perl version:	perl 5.8.8 x86_64
Category:	JSCalendarContrib	Server OS:	cent0S 5.3 Linux 2.6.18 64bit	Last update:	15 years ago

I have this form and I would like to use the JSCalendar to fill the date field. The problem is that when i click on the calendar icon, the form submits. What am I missing? Thanks in advance

%INCLUDE{"%SYSTEMWEB%.JSCalendarContribInline"}%
<Form name="newcandidate" action="%SCRIPTURLPATH{edit}%/%WEB%/" method="post">
| <label for="newreqname"><nop>FirstName</label> | <input name="newreqname" class=twikiInputField size=40 onblur="this.form.topic.value = 'Req' + this.value);"/> |
| Requirement Due Date  | <input name="DueDate" value=' ' class=twikiInputField onblur="my_replace(this.form);" /><input type="image" src="%PUBURL%/%SYSTEMWEB%/JSCalendarContrib/img.gif" onclick="return showCalendar('DueDate','%Y-%m-%d')" /> |
| Requirement Page Name  | <input name="topic" value=' ' class=twikiInputField /> |
|| <input type="submit" class="twikiSubmit" value="Create New Candidate" /> |
<input type="hidden" name="topicparent" value="RequirementPage" />
<input type="hidden" name="onlynewtopic" value="on" />
<input type="hidden" name="onlywikiname" value="on" />
<input type="hidden" name="templatetopic" value="RequirementTemplate" />
<input type="hidden" name="NewAction" value='%A<NOP>CTION{ created="%GMTIME{"$day $month, $year"}%" creator="%WIKIUSERNAME%" due="%GMTIME{"$day $month, $year"}%" state="open" who="" notify="" }% Begin Review of Candidate %ENDACTION%' />
</form>

<script type="text/javascript">
<!-- Hide JavaScript and <pre> escape TWiki rendering

function my_replace(my_form) {
var str = my_form.NewAction.value;
my_form.NewAction.value = str.replace(/due="[^"]*"/i, 'due="' + my_form.DueDate.value+ '"');
}

// Stop hiding and stop </pre> escaping TWiki rendering -->
</script>

-- ScottGutman - 2010-11-29

Discussion and Answer

OK, i figured out that I needed have an ID attribute instead of a NAME attribute. That solved the clicking and submitting problem.

But, now I have a new problem. When I click the Icon, the calendar appears. Then when I click on a date nothing happens. If I click on the month forward and backward buttons, the field is updated with the 1st of that month. Do I need to do something special to make the click on a date save to the field?

Thanks again.

-- ScottGutman - 2010-11-29

Ok, so now i find that this line is the culprit %INCLUDE{"%SYSTEMWEB%.JSCalendarContribInline"}%

I am guessing that this is already somewhere in the templates.

So in summary:

If you click on the Calendar Icon and the form is submitted = Check that you have an ID attribute and that it is spelled correctly (including case)

If you click on a date in the calendar and get no results, then the JSCalendarContribInline js files are called more than once.

One final question, is it possible to have the calendar popup have a selector for time?

-- ScottGutman - 2010-11-29

-- ScottGutman - 2010-12-08

I recommened in JSCalendarContribDev to convert the contrib into a plugin and name it DatePickerPlugin. That way you can simply use a %DATEPICKER{ name="start_date" value="2010-12-01" }% to add an HTML input field with a date picker. ScottCranston is currently working on this.

-- PeterThoeny - 2010-12-08

If you answer a question - or someone answered one of your questions - please remember to edit the page and set the status to answered. The status selector is below the edit box.