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.
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())
})
}
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 multiple html forms on a page with pre-filled value. For each form, the user has the option to modify the form and submit. But there is also a cancel button. If the user clicks the cancel button (after some modification), the original value will be retained in the form. What is the best way to do it using javascript?
I could retrieve the original value from the server. But really want to do it on the client side.
From MDN
type: reset: The button resets all the controls to their initial values.
So:
<button type="reset">Cancel</button>
I wrote a page that calculates some values. I wanted to use form and then get the value from an input, get the value from another input, and then display the result value in another input when I press a button.
However, when I'm trying to set the value of the input, it displays it a few milliseconds then quickly disappears.
Here is the code I'm interested in.
<input id="initialInput" type="text" name="in" />
<button onclick="calcFnc()">Calculate</button>
function calcFnc() {
document.getElementById("initialInput").value = "test";
}
How do I make the value stay ?
EDIT:I figured out why the value disappeared, I put the button inside the form, and for some reason it refreshes the page, but I pretty much figured it out. Should I delete this post?
If you will not set type="button" then this button will be considered as submit button and your form will submitted when you will click on that button.
<button onclick="calcFnc()" type="button">Calculate</button>
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;
}