Home Why is the form's onSubmit method not called when a DateTimeField is present?
Reply: 2

Why is the form's onSubmit method not called when a DateTimeField is present?

ScarOnTheSky
1#
ScarOnTheSky Published in 2017-09-14 09:28:16Z

A question regarding Apache Wicket: I have a form which contains several text input fields. It works fine until I add a DateTextField. The overriden method onSubmit() is simply not called anymore. I looked at the Wicket examples but cannot see a major difference to my code.

Here's the html code:

<html xmlns:wicket="http://wicket.apache.org">
	<head>
		<title>Students</title>
	</head>
	<body>
		<div class="container">
			<form id="createStudent" wicket:id="createStudent">
				<div>
					<span id="lastNameLabel"><wicket:message key="lastNameLabel" /></span>
					<input id="lastName" wicket:id="lastName" type="text" />
				</div>
				<div>
					<span id="firstNameLabel"><wicket:message key="firstNameLabel" /></span>
					<input id="firstName" wicket:id="firstName" type="text" />
				</div>
				<div>
					<span id="dateOfBirthLabel"><wicket:message key="dateOfBirthLabel" /></span>
					<input id="dateOfBirth" wicket:id="dateOfBirth" type="text" />
				</div>
				<div>
					<input id="submit" type="submit" value="" wicket:message="value:submitLabel"/>
				</div>
			</form>
		</div>
	</body>
</html>

The corresponding java file:

package it.foo;

import java.util.Locale;

import org.apache.wicket.Session;
import org.apache.wicket.datetime.StyleDateConverter;
import org.apache.wicket.datetime.markup.html.form.DateTextField;
import org.apache.wicket.markup.html.form.Button;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.model.CompoundPropertyModel;
import org.apache.wicket.spring.injection.annot.SpringBean;
import org.joda.time.DateTime;

public class CreateStudentForm extends Form<Student> {

private static final long serialVersionUID = 1L;

private String lastName;
private String firstName;
private DateTime dateOfBirth;

@SpringBean
StudentDao studentDao;

public CreateStudentForm(String id) {
    super(id);
    setDefaultModel(new CompoundPropertyModel<>(this));
    add(new TextField<String>("lastName"));
    add(new TextField<String>("firstName"));

    final DateTextField dateOfBirthField = new DateTextField("dateOfBirth", new StyleDateConverter("S-", true)) {
        private static final long serialVersionUID = 1L;

        @Override
        public Locale getLocale() {
            return Session.get().getLocale();
        }
    };

    dateOfBirthField.setType(DateTime.class);
    add(dateOfBirthField);

}

@Override
protected void onSubmit() {
    // does not get called as soon as the DateTextField is present. Works fine otherwise. 
    Student student = new Student(this.lastName, this.firstName, this.dateOfBirth);
    studentDao.store(student);
    setResponsePage(StudentsPage.class);
}

}

I had a look at the html which is rendered in the browser. If the dateTextField is NOT present, it looks like this:

<html>
	<head>
		<title>Students</title>
	</head>
	<body>
		<div class="container">
			<form id="createStudent" method="post" action="./?2-1.IFormSubmitListener-createStudent"><div style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;overflow:hidden"><input type="hidden" name="createStudent_hf_0" id="createStudent_hf_0" /></div>
				<div>
					<span id="lastNameLabel">Nachname: </span>
					<input id="lastName" type="text" value="" name="lastName"/>
				</div>
				<div>
					<span id="firstNameLabel">Vorname:</span>
					<input id="firstName" type="text" value="" name="firstName"/>
				</div>
				 <!-- <div>
					<span id="dateOfBirthLabel"><wicket:message key="dateOfBirthLabel" /></span>
					<input id="dateOfBirth" wicket:id="dateOfBirth" type="text" />
				</div> -->
				<div>
					<input id="submit" type="submit" value="Schüler anlegen"/>
				</div>
			</form>
		</div>
	</body>
</html>

As soon as the dateTextField is present, the form has additional divisions with JavaScript calls.

<html>
	<head>
		<title>Students</title>
	</head>
	<body>
		<div class="container">
			<form id="createStudent" method="post" action="./?6-7.IFormSubmitListener-createStudent"><div style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;overflow:hidden"><input type="hidden" name="createStudent_hf_0" id="createStudent_hf_0" /></div><div style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;overflow:hidden"><input type="text" tabindex="-1" autocomplete="off"/><input type="submit" tabindex="-1" name="p::submit" onclick=" var b=document.getElementById('submit'); if (b!=null&amp;&amp;b.onclick!=null&amp;&amp;typeof(b.onclick) != 'undefined') {  var r = Wicket.bind(b.onclick, b)(); if (r != false) b.click(); } else { b.click(); };  return false;"  /></div>
				<div>
					<span id="lastNameLabel">Nachname: </span>
					<input id="lastName" type="text" value="Matthias" name="lastName"/>
				</div>
				<div>
					<span id="firstNameLabel">Vorname:</span>
					<input id="firstName" type="text" value="Tonhäuser" name="firstName"/>
				</div>
				 <div>
					<span id="dateOfBirthLabel">Geburtsdatum: </span>
					<input id="dateOfBirth" type="text" value="06.09.17" name="dateOfBirth"/>
				</div>
				<div>
					<input id="submit" type="submit" value="Schüler anlegen" name="p::submit"/>
				</div>
			</form>
		</div>
	</body>
</html>

I don't quite understand why the additional divisions are there all off a sudden. My guess is that the JavaScript call does not work.

Thanks.

soorapadman
2#
soorapadman Reply to 2017-09-18 11:24:43Z

It is likely that the onSubmit() method does not call may be because of incorrect validation of dateField's value. You have to add feedback panel to you page and check .

RobAu
3#
RobAu Reply to 2017-09-19 06:57:18Z

You can override the onError(...) method and look whats going on..

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.447869 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO