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.
Related
I have a basic script which sets the value of a html input field after a form has been submitted
<button id='submitbutton' name="Submit" class="btn btn-primary" onclick="Refresh()">Submit</button>
<script>
function Refresh() {
document.getElementById("mrent").value = "20";
}
</script>
and I have a basic error animation which makes the invalid fields I have go red
If the user inputs a correct input the box will not go red signifying it has passed the error check, however every time I submit a form and a value inputted is incorrect every value is reset. My original function tries to set the previous values back to their old state with the stored variables they were given, however every time I click my submit button and submit my form the red circle around the input box does not come up meaning the value is correct and has been passed in but the value disappears.
I can see the set value come in for a split second before it is cleared, however when I manually set the html input boxes value the value stays but when I use a function and a button it instantly clears. How do I make it so the value stays and does not automatically clear? and is there another way I can keep the previous values of my form after I have submitted my form when some values in my form are wrong?
Every time you click the button the form is submitted and inputs value are reset. If you want to prevent form submit, inside your form tag you can add onsubmit="return false". You now can check the input value and if they are correct you can submit the form with javascript.
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.
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');
});
});
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;
}
I have an html form and within the form I have a <button> element. I am using jquery to redirect the page upon clicking the button (essentially I wanted to nest form elements but since its not valid xhtml I used a javascript workaround).
Furthermore, clicking the button grabs text from an input field, appends it to the query string then redirects the page (note that both the input field and the button are inside of the html form).
Now for what I want to do: I also want to have the same functionality when the user hits the 'enter' key from within the previously mentioned input field (i.e. same functionality as if the <button> was pressed. I have already written code that binds to the enter key (when I press enter in the input field I can get an alert to pop up). The problem is that since this input field is within <form> tags, I cannot seem to override the default action which is: upon pressing enter trigger the submit button. Is it even possible to override this and have the pressing enter event redirect the page to something other than whatever <form action is set to? Thanks.
Try
$('form').submit(function () {
return false;
});
This would really go against accessibility, but I think you could cancel the default action which is on the 'submit' event, with:
$('form#foo').submit(function(e) { e.preventDefault(); });
If I'm understanding correctly... or program that function to be dynamic and have it submit or not submit depending on a factor/flag.