Integrating GWT with static HTML forms

[Phil]

I've been looking at GWT as a way of building client-side components
for a customer service style web application. Because we are required
to support 'no javascript' situations - i.e. basic browser, javascript
turned off, and providing accessible web pages, we are designing
static pages which are then 'decorated' with GWT; the idea being that
the system works with any browser/screen reader etc but provides the
best experience when using a JavaScript enabled browser. I've combined
GWT and the GWT Widget library (http://gwt-widget.sourceforge.net) to
wrap existing form objects.

I've been fairly successful with this but for one problem. If I create
a GWT Button instance inside a form, clicking on the button causes a
form post to occur. The abbreviated scenario is as follows:

HTML:

<form method="post" action="some-url">

<p>Post Code: <input type="text" id="searchPostCode"></p>
<p>House No: <input type="text" id="searchHouseNo"></p>

<div id="jsSearchButton" align="right"></div>

... address fields ...

... other fields ...

<button type="submit">Next &gt;</button>

</form>

GWT Code:

RootPanel.get("jsSearchButton").add(new Button("Find Address"));

This is neat in that the search button is not present if JavaScript is
not supported, thereby gracefully degrading.

Can anyone offer an insight into how to stop the form submission being
caused by the GWT button? The actual form has a number of fields after
the address and will probably have other GWT buttons as well.

Many thanks for a great framework.

[Peter Blazejewicz]

hi,

are you using M2 or M1 1.5 milestone builds? I've noticed some bizzare
event bubling,
in 1.4.61 (tested on OSX) you could do:

RootPanel rootPanel = RootPanel.get("jsSearchButton");
clickMeButton = new Button("Click me") {
public void onBrowserEvent(Event event) {
if (DOM.eventGetType(event) == Event.ONCLICK) {
DOM.eventPreventDefault(event);
DOM.eventCancelBubble(event, true);
}

}
};
rootPanel.add(clickMeButton);


Note that you had to override onBrowserEvent and cancel bubling on
button (and pass event to super implementation) if you want to stop
form from submition (e.g. to submit a form via javascript when you
process your custom button click),

regards,
Peter

[Peter Blazejewicz]

hi,
Ops, that's full code I was to post:

public void onModuleLoad() {

RootPanel rootPanel = RootPanel.get("jsSearchButton");
clickMeButton = new Button("Click me") {
public void onBrowserEvent(Event event) {
if (DOM.eventGetType(event) == Event.ONCLICK) {
DOM.eventPreventDefault(event);
DOM.eventCancelBubble(event, true);
}

super.onBrowserEvent(event);
}
};
clickMeButton.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
Window.alert("I'm was clicked: " + sender + "(that's me)");
}
});
rootPanel.add(clickMeButton);
}


regards,
Peter

On Apr 26, 1:42 pm, Peter Blazejewicz <peter.blazejew...@gmail.com>
wrote:

[mP]

Add a click handler to the button and do a prevent the default action
(the form submitt) from occuring by calling
DOM.eventPreventAction(Event). Im typing this off the top of my head
but if its wrong yhou should be able to spot the coirrect method.