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.
Related
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.
In my Drupal 7 site I have some checkout pages where I need to check if a field value is changed or not after a form is submitted. If it is not changed I want to show a message to remind the customer to fill in the field. In some few cases it might happen that the field should remain empty or unchanged, so I need to take that into account too.
This is what I got so far:
function extracheck(){
var checkfield = document.querySelector("#edit-continue") !== null;
if (checkfield){
document.getElementById("edit-continue").addEventListener("click", function(event) {
var alertfield = document.getElementById('edit-customer-profile-kompl-info-field-ert-ordernummer-und-0-value');
if (alertfield.value == alertfield.defaultValue) {
event.preventDefault();
$('#edit-customer-profile-kompl-info-field-ert-ordernummer-und-0-value').css("background-color", "#FFFF33");
$('#output-box').addClass('output-box-style');
document.getElementById("output-box").innerHTML = "The highlighted field is empty. Do you really want to continue?<br><br><div class='button tiny' id='btn1'>YES, continue</div><div class='button tiny' id='btn2'>NO, I want to edit the field</div>";
btn1.addEventListener("click", yesfunction, false);
btn2.addEventListener("click", nofunction, false);
return false;
}
}, false);
}
}
extracheck();
function yesfunction(){
document.getElementById('commerce-checkout-form-checkout').submit();
}
function nofunction(){
$('#output-box').css("display","none");
// here I need to "undo" the preventDefault set above
}
First I need to check if this specific submit button exists on the page (with the id #edit-continue).
Then by using value and defaultValue I compare the initial state of the field's value with the current state. If the field is unchanged i bind a preventDefault action to the submit button, so the form isn't submitted. I then highlight the field and show a DIV box with the question "The highlighted field is empty. Do you really want to continue?" and 2 buttons: "Yes, I want to continue" and "No, I want to edit the field".
I then bind 2 eventlisteners to the buttons and assign them to the external functions nofunction() and yesfunction(). If the customer clicks yes, the form is submitted. If he clicks no, I hide the message box. I could have just reloaded the page, but then all values filled in in all other fields would be cleared.
So I need to just hide the box and then undo or reset the preventDefault action on the submit button, so the form can be submitted the normal way.
I am banging my head and have tried all I can think of. Does anyone have an idea on how I can let the form be submitted normallly after hiding the message box? I have tried to use removeEventListener and to use a function that returns true on the submit button element.
Everything works fine otherwise, if the field is unchanged the box opens, if the field is changed the form is submitted normally. If the field is unchanged and the user decides to continue all the same and clicks Yes, the form is also submitted.
i have a form in html with two submit buttons either one is enabled. if user is filling the form submit is enabled and the other button is diasbled.
when user clicks submit button other button gets enabled and displays all the field values with read only .when the 2nd button is clicked values are enterd in databse, using jquery or javascript
is it possible
$('input[type="text"]').each(function(){
$(this).attr('readonly','readonly');
});
If I read your question correctly, the first button does not actually submit the form?
$("#firstbutton").click(function() {
$("#myForm input").attr("readonly", "readonly"); //this makes the input fields readonly
$("#secondbutton").attr("disabled","disabled"; //this enable the second button
$(this).removeAttr('disabled'); //this disables the #firstbutton
}
Make sure that:
On page load, the second button is already disabled.
If you have dropdownlists in your form, you'll have to set those readonly as well, as they are not <input> but <select> items.
the firstbutton should not be of type="submit", it should either be of type="button" or be a <button> tag instead.
Your secondbutton can be a regular submit button, nothing fancy required. As long as your form posts to the correct actionlink, the form will be submitted fine.
Never use disabled attribute on your input fields. If you do, the form submit will ignore these fields and not post them as intended. You're already doing it right by using readonly.
$(document).ready(function(){
$('#myForm').submit(function(e){
e.preventDefault();
$myForm = $(this);
$myForm.find('input[type=submit]').attr('disabled','disabled');
$myForm.find('input#other-button').attr('enabled','enabled');
//do a $.post request
$.post('/path/to/my-file.php',
$myForm.serialize(),
function(data){
// make something after the post is complete
$myForm.find("input[type=text]").attr('readonly','readonly');
},
'json');
});
});
My question might be basic but i want it to clarify. i have one html form. it contain 2 submit button and some links. on click of one of the link i am trying to submit the form by java-script but not able to do so. but when i make all the button as normal button and submit the form by JavaScript then i am able to submit the form by link too.
Now my question is - if we have submit button in the form then can we submit the form by java-script too?
You don't need a submit button to submit a form - period. You can submit a form by javascript regardless of whether or not you have any fields or buttons at all, all you need is a form element.
My magic crystal ball tells me your form submits just fine, but your serverside script was written poorly and depends on the name/value of a submit button being sent.
Yes, you can, use the onsubmit event and then submit the form use javascript.
For example use jQuery:
$('#your_form').on('submit', function() {
if (/**some condition**/) {
$(this).submit();
}
return false;
});
If you submit your form with a link, i suppose you use this kind of code :
Submit my form
This is wrong because you submit the form and then you go on the link, you have to put "return false;" after your submit():
Submit my form
Well, the below snippet contains the text fields that I am filling in, whose values are used later in the JavaScript function.These are contained in a form.
The problem is when I submit the form, I get the correct value and then the contents of the fields filled in vanish after around 2 seconds. The same thing happen if I don't fill in the change in rate or change in capacity field, it gives the alert and then the value disappears. Any idea whats happening here? Im not even using 'refresh' anywhere. Thank you for your time.
You have bound your submit button a click listener. Therefore when you click the button the function runs, but the form is also submitted.
What you should do is to bind that function to form submit, like this;
<form ... onsubmit="calculateRevenue(this)">
And in that function, you should return false to prevent the form from being submitted.
if (form.ratechange.value == '')
{
alert('Please enter a value for the Change in Rate field. ');
return false;
}