Values Disappearing in Form - javascript

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;
}

Related

How to prevent form from instantly clearing Value='' attribute

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.

How can I reset a preventDefault in Javascript?

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.

jQuery issues on testing form elements values

Good day all.
I have a form where users must fill out some fields, and this form is created dinamically y a php script.
I've done a script that do a test on input fields to check if the users has filled everything.
It is basically a cascade test in where if an error variable is true, the form isn't submitted.
I have done some modifications and I have added a new hidden field to the form, filled by jquery when user clicks a image.
$( '.selectLogo' ).bind("click",function(e){
$( "#operator" ).val( $(this).data("opvalue") );
});
then, on the submit event, there is the whole test...
if ( !$( "#operator" ).val().length ){
$(".operatorError").show();
error=true;
} else{
$(".operatorError").hide();
}
if(error){
return false;
}
this is the last test I've added on the function, just before testing the error variable and decide if return true or false.
the problem is that:
IF i'm debugging the script, i.e. I put a breakpoint just over the if(error), everything is fine.
IF i filled the whole form, i.e. the checkForm function just go throught every test and arrive on the decision of returning true or false, everything is ok.
BUT if i filled the form partially, and I try to make a submit without selecting the operator (the new field i've added), the checkForm function stops me, display the error, but at this point, I must click on the operator logo to make the hiden field fills, then I have to click SEVERAL (read 2,3 or sometimes 4) times the submit button to have the form submitted.
It sounds like that the error variable retain the value, and the jQuery cache it... or something, does anyone has experienced a similar problem? it is possible to "force" jQuery to "really" test a variable...? Am I complitely wrong and maybe the problem is elsewhere?

Cancel form submission when entries are invalid

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.

jquery redirect on enter press within a form?

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.

Categories