I have a problem with validation on form submit. When the user hits the submit button I want to validate the input with javascript. I also need some data from the server/database for the validation, which could lead to a yes/no popup.
<h:commandButton id="Speichern"
value="Speichern"
onclick="if(!termPflSubmit('#{TermPflBean.flagThatComesFromValidationWithDataFromDatabase}')) {return false;}"
action="#{TermPflBean.speichernAction}"
type="submit"
rendered="true" />
The javascript function pops up a dialog based on the flagThatComesFromValidationWithDataFromDatabase.
function termPflSubmit(flagThatComesFromValidationWithDataFromDatabase) {
// Some other validation
if (flagThatComesFromValidationWithDataFromDatabase) {
if (!confirm("Really?"))
return false;
}
return true;
}
The isFlagThatComesFromValidationWithDataFromDatabase() java method compares values entered into the form fields to corresponding values in the database. The problem here is, that this method is called once the page is loaded, and there are no values entered into the form fields yet. So the value for the flag is always the same and not correct.
I see two options here:
1. I somehow force the jsp framework to update the value for flagThatComesFromValidationWithDataFromDatabase either before submit or everytime something is entered into the form. But how do I do that?
2. I do the validation on serverside and trigger the confirm dialog from the server. But how do I do that?
I thought about ajax, but could not find if f:ajax or p:ajax tags are already supported in jsp 1.1.
Related
I have two forms on one page.
The first form is used to make a calculation (fieldvalue1 + fieldvalue2 = calculatedfield)
The second form is simply just to capture information (Name, Email, etc.)
The first form has no submit button, but the second form has a submit button. Currently, when the user fills in all the info and clicks submit, then only the second form's fields get sent to my admin email.
Is there a way to send calculatedfield along with the form fields sent to my email when clicking the submit button on the second form?
I would like to add a code snippet to command the calculatedfield to also be sent along with the fields of the second form. Not sure which code to use...
I would greatly appreciate any assistance.
Add a new hidden field (lets call it hiddenCalculatedField) to your second form.
In the first form, add a onChange hook to the calculatedfield, and copy the value to the hidden field. This will get submitted when the second form is submitted.
In this example, it assumes
$(document).ready(function() {
$("input[name='calculatedfield']").change(function() {
$("input[name='hiddenCalculatedField']").val($(this).val())
})
}
HTML in question is pretty simple:
<form>
<input type="text" name="locSearch" id="locSearch" />
<button id="locSearchBtn"><i class="fa fa-search" id="search-icon"></i></button>
</form>
js:
$(document).ready(function() {
getsWeather('seattle, wa', 'f');
$("#locSearchBtn").click(function() {
getsWeather(document.getElementById('locSearch').value, 'f');
});
When I submit the form (either by pressing enter or by clicking the submit icon, the page reloads but with the default setting (i.e with 'Seattle, wa as the default argument for the getsWeather function). I need it to pull whatever is in the input box and use that as the argument in the getsWeather function but that currently isn't working.
Any ideas? Let me know if you need more of the code to understand it
If you want to modify the page, you need to prevent the form from being submitted when you click the button. Two ways to do that:
Add return false to the end of your click handler for the button. This will prevent form submission (if JavaScript is enabled on the client).
Add type="button" to the button so it's not a submit button anymore.
Ideally, you'd combine #1 with handling a form submission if the client doesn't have JavaScript enabled, to handle the small number of people who surf with JavaScript disabled via the form submission while handling JavaScript-enabled clients with the in-page update.
How do you validate a form but also get information from one form to the other using JavaScript?
I can get the information from a field using the getElementById, but i cannot seem to validate the form.
//Iam trying to build a drivers license renewal form
//This is my JavaScript code
//Iam retrieving from one form and showing it on a different form.
function validateForm(){ // i tried this code but it doesnt seem to work
var x = document.forms["licenceform"]["surname_value"].valueOf;
if (x == null || x == "") {
alert(" Surname name must be filled out");
return false;
}
}
How do you validate a form
Typically by adding a listener for the form's submit event, then checking that the values of form controls fit your validation criteria. You can also check values as they are entered or when focus moves off a control and it's been changed.
There is no need for getElementById, all form controls with a name are available as properties of the form and in the form's elements collection, so you just iterate over that and check values as you go.
but also get information from one form to the other using JavaScript?
If the second form is in the same page, you can get set the value of a form control based on the value of some other form control, either in the same form or another.
If the second form is in a different page, the easiest method is to submit the first form, read the value at the server and set it in the second form before sending it to the client.
Once you have made an attempt at the above, post some code here if you have further questions.
I am working on a form with multiple fields and of course, a submit button.
How do I cancel the form submission if some fields are empty?
I tried putting a validation of javascript, input type="submit" onclick="check()" on the submit button.
But what I actually want is that, the page won't load so that, all other information in the text fields won't go away.
Like, what if the form has 100 fields and the user forgot to input one field and click the submit, it will show him an error message and all other fields will be cleared so he has to type it again.
I'm trying to prevent that.
I have multiple options to create this effect but I am currently trying to find a way on doing this.
Any other ways would be appreciated (like disabling the button when all mandatory fields are not filled, then enabling it at when everything is complete)
if the condition will be false click(event) returns false and nothing will happend
function check(){
if(validate === false)
return false;
}
Enjoy :)
You can simply return false from inside your check function to prevent the form from submitting.
How can I get the data that is submitted from a form with jQuery?
I know I can bind the submit function to the form
$('form').bind('submit',function(){});
and I know I can serialize the data in the form:
$('form').serialize();
But how do I get the data that was actually submitted from the form? Like if there are two submit buttons, I want to know which one was pressed. If I handle the submission with PHP I can do that, but ideally I want to get a copy of the submitted data, then return true so that the form goes on to be processed by PHP normally.
Thanks!
The pressed submit button should be available in the serialized field list - and the other submit buttons shouldn't be in there.
However, apparently jQuery does not add submit buttons in there (testcase). See http://forum.jquery.com/topic/submit-event-serialize-and-submit-buttons-get-the-button-name for a workaround.