I have a simple JSF form:
<h:form>
<h:inputText value="#{textBean.firstName}"/>
<h:inputText value="#{textBean.lastName}"/>
<h:commandButton value="confirm" action="textBean.confirm"/>
<h:commandButton value="submit" action="textBean.submit"/>
</h:form>
It is necessary that before you click "submit" user must press the button "confirm". Otherwise, next to the button "submit" display an error message. A user can not click the submit button, if not pre-pressed to confirm. It is very desirable to do it on a layer of the UI. Some might suggest something about this?
You might want to change the logic so that on click of the submit button a confirmation dialog box is presented to the user. Something simple like this:
<h:form>
<h:inputText value="#{textBean.firstName}"/>
<h:inputText value="#{textBean.lastName}"/>
<h:commandButton value="submit" action="#{textBean.submit}" onclick="return confirm('Confirm form submit?');"/>
</h:form>
Otherwise if you want to get the behaviour mentioned above you could disable / hide the submit button until the user has clicked the confirm button, something like:
<h:form>
<h:inputText value="#{textBean.firstName}"/>
<h:inputText value="#{textBean.lastName}"/>
<h:commandButton value="confirm" action="#{textBean.confirm}"/>
<h:commandButton value="submit" action="#{textBean.submit}" disabled="#{textBean.btnDisabled}"/>
</h:form>
The disabled attribute can be replaced with the rendered attribute if you want to hide the button. It takes a boolean. This boolean variable can be set in your confirm method to true so that when the request comes back the button will be enabled.
Related
I have a JSF form with only one input and no submit button. The form is submitted when the user presses Enter. I would like to trigger a backing bean method on submit of that form. How can I achieve this?
<h:form>
<h:inputText value="#{searchBean.propertyName}" />
</h:form>
I don't think that what you are trying to achieve could be done without a submit type input component in the form. If you just don't like a button to be displayed you can hide it in the resulting xhtml page with style="display: none". The form still will be submitted when Enter is pressed and you will get a desired behavior.
<h:form>
<h:inputText value="#{searchBean.propertyName}"/>
<h:commandButton actionListener="#{searchBean.method()}" style="display: none"/>
</h:form>
You can attach a handler to the submit event of the form. If you give your form an ID (eg: "myForm"):
document.getElementById('myForm').addEventListener('submit', function () {
// do stuff
});
You came submit with ajax call-
<h:form>
<div class="search">
<span class="searchIcon icon-magnifier"></span>
<h:inputText value="#{searchBean.propertyName}" id="propertyName"
a:placeholder="" readonly="false"></h:inputText>
<f:ajax event="change" listener="{searchBean.beanMethod}"/>
</div>
I have two text inputs and each has a submit button. Each button has an on click AJAX function that calls a php script and populates the page.
I need to find a way to make the enter key submit the button of the input text focused.
For example if I type something the in the "product_code" input text and press the Enter key I want to call the AJAX function of that input's assigned button (getByCode()).
Product name: <input type="text" name="product_name" id="product_name">
<input type="submit" value="Search" onClick="searchByName(document.getElementById('product_name').value)"> <br />
Product code: <input type="text" name="product_code" id="product_code">
<input type="submit" value="Search" onClick="getByCode(document.getElementById('product_code').value)"> <br />
I don't necessarily require input buttons, I could use images for example if that helps.
All browsers support document.activeElement which will tell you which element has focus. On your keypress event handler, check this value against your two inputs to see which has focus. If neither has focus, then ... ?
When focus is placed into an input of this form, iPhone shows input keyboard and Go button, which acts as submit. Is it possible to change the label to e.g. "Create"? I tried value, title or name but none of those work.
<form>
<input name="foo" type="text"/>
<input type="submit" name="Create" value="Create" title="Create"/>
</form>
No, something like this is not possible.
I need to get the value from outside the form. My gsp looks like this
<g:textField name="email" value="${someInstance?.email}"/>
<input type="button" id="checkEmail" class="button" value="Validate" onclick="checkEmail()"/>
<span id="responseDiv"></span>
<g:form action="save">
someCode
<g:submitButton disabled="true" style="color:#999999;" class="save" name="save" action="save" id="saveButton" value="${message(code: 'default.button.save.label', default: 'Submit')}"/>
</g:form>
First, to check if an email is in use, click button (id="checkEmail") and onclick goes to js code checkEmail() which has remoteFunction that updates responseDiv. After that, user enters information to the form, and user clicks submitButton. When that submit button is clicked, I would like my gsp to send email value along with other information to the controller. Any suggestion?
Thanks in advance.
Easy, put the input inside the form.
If that isn't an option for some reason, use the callback to update a hidden field inside the form with something like $("#hiddenEmail").val(emailAddress);
PS. I like how you gave a span an id of responseDiv :)
In IE 7 the zip code search form on my page reacts differently when someone clicks submit vs pressing enter. It works correctly when sumbmit is clicked and incorrectly when enter is pressed.
http://getridofit.com
<form name="zip" action="<?php bloginfo('url'); ?>" method="get">
<input type="text" id="zipper" name="locations" size="5" maxlength="5" class="junk-input" onsubmit="return checkForm()" />
<input type="submit" value="" name="schedule" src="/wp-content/uploads/remove-my-junk.png" align="center" class="junk-button" style="background: #f67a3e url(/wp-content/uploads/remove-my-junk.png); border: none; width: 201px; height: 45px;"/>
</form>
The correct result for a zip search of 85718 looks like this: http://getridofit.com/l/85718/?schedule
but pressing enter produces a result like this: http://getridofit.com/l/85718/
Because the button wasnt clicked in order to submit the form. If you dont click the button then the input for #name[schedule] isnt sent. However if that button input has focus when enter is pressed i think it will send it along properly... You might jsut want to make schedule a hidden input.
It looks like you are checking for the presence of the submit button variable (schedule) in the URL bar. The submit button variable is only supposed to be submitted when the user physically clicks the the submit button. However, I can't reproduce the problem in Safari, so it may also depend on what your JavaScript is doing when the form is submitted.