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>
Related
I have a simple (mostly-working) submission form:
<form action="http://127.0.0.1:3000/books" method="POST" class="addBook">
<input type="text" placeholder="Title" name="title" required>
<input type="text" placeholder="ISBN" name="isbn" required>
<button id="submitBook" type="submit" onclick="addingBooks()">Submit</button>
</form>
My form properly adds the input values to my database and it then appears in the DOM when I go back and refresh the page.
I have applied an preventDefault() function in my JavaScript code for the 'addingBooks()' function to stop it from submitting twice, but I am still unable to stop it from forwarding to the action page after submission which only shows the JSON of the submitted data.
If you need more then please let me know.
To prevent the default action of an event you'll need an event object to call preventDefault on. Some browser do in fact have a global event object but that might not be reliable.
The simplest option would be to return false from the onlick event, not from a function you call in it
<button id="submitBook" type="submit" onclick="addingBooks();return false;">Submit</button>
another simple and better solution would be to make the button be a regular button instead of a submit button and remove the preventDefault from addingBooks.
<button id="submitBook" type="button" onclick="addingBooks()">Submit</button>
another and even better solution would be to not use the onclick attribute at all, use the addEventListener function
document.getElementById('submitBook').addEventListener("click", function(e){
e.preventDefault();
//other stuff
});
This prevent enter submit,but at the moment prevent enter in inputs.
I need that enterkey work in inputs but not submit form.
<template id="form-template">
<form action="save-passport" #keypress.enter.prevent method="post" enctype="application/x-www-form-urlencoded" >
<input type="submit" v-show="loaded" v-on:click="saveForm" value="Save" />
<input type="text" required="required" name="field-11" >
<select required="required" name="field-13"><option value=""></option>
</select>
</form>
</template>
Had the same problem. Solution I did was to put the submit method on the opening form tag. Then no need for the input/button type="submit" inside the form at the bottom.
<form class="form" action="" method="POST" #submit.enter.prevent="createForm()">
Also other options available on inputs:
#keydown.enter.prevent
#keyup.enter.prevent
#submit.enter.prevent
I did it this way
first i removed vue modifiers from form tag.
second i chaged type of input from submit to button
and third this my saveForm function
saveForm:function(){
if (someCondition){
event.preventDefault();
}else{
document.forms[0].submit();
}
}
You need to use the prevent modifier. Another thing, your webpage itself must have the focus. Meaning, if you just visit the webpage, prevent won't work. But, if you click somewhere in the form, prevent will work for you.
You can still submit the form via JavaScript using something like document.forms[0].submit();
So i have a JSF Application. If i submit a form, it gets resubmitted when i refresh the page. and of course i don't want that.
Index.xhtml:
[...]
<h:form >
<h:outputText value="Form"/><br/>
<h:inputText label="first" value="#{example.newExample.firstWord}" autocomplete="off"></h:inputText>
<h:commandButton value="click" actionListener="#{example.NewExample()}">
</h:commandButton>
</h:form>
[...]
The method that gets runned:
public void NewExample(){
pfDB.InsertNewExample(NewExample);
NewExample.setFirstWord(null);
NewExample.setSecondWord(null);
}
So everytime i refresh index.xhtml after i submitted the form, NewExample() get runned.
It was indeed the resubmitting off the form that was the problem. But the browser(opera) didn't showed an alert.
I fixed it by adding
FacesContext.getCurrentInstance().getExternalContext().redirect("index.xhtml");
in my function
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 :)
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.