Prevent loading image from appearing until form is complete - javascript

I'm building a site which requires the client clicking a submit button. This site includes HTML select menu's and input fields.
This information is then submit to a php file which then passes the data onto a MySQL database.
I've added some code to enable a loading image when the submit button is clicked. But currently, the user can click submit without filling in the form and the loading message appears as well as a message telling the user to enter data into the missing fields.
What I would like, is for the loading message to ONLY appear once the form has been filled out and when the data is being passed the PHP file.
I've crudely mocked this up in a JSFiddle below to better explain what I'm saying:
Link
JSFiddle throws up a POST error obviously, but on my site obviously the data is posted and that error doesn't exist, so ignore it.
HTML:
<form onsubmit="myButton.disabled = true; return true;">
<label for='name'>
Please Enter Your Name:
</label><br>
<input class="label" type="text" name="name" placeholder="Click/Tap here..." required><br><br>
<label for='urgency'>Urgency</label><br>
<select type="select" name="urgency" select id="urgency" required>
<option value="" disabled selected hidden>Please specify an urgency...</option>
<option value="1">1 - Least Urgent</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br><br>
<span>
<button type="submit" name='myButton' value="submit" id="submit">Submit</button>
<button type="reset" value="Reset">Reset</button><br>
</span>
<div id="loader" style="display:none;"><br>
<label>
Please Wait...
</label>
<img src="ajax-loader.gif" alt="Loading" />
</div>
</form>
JQuery:
$('#submit').click(function(e){
$('#loader').toggle();
});

Do not wire up the submit button. Instead use the submit event
do not use submit as id or name
use the id of the button if needed
$('#formID').on("submit",function(e){
var empty = false;
$("input:required",this).each(function() {
if (!$.trim($(this).val())) {
empty=true;
return false; // leave
}
});
if (empty) {
e.preventDefault();
}
else {
$('#loader').toggle();
$("#myButton").attr("disabled",true);
}
});

You could handle the toggling of loading images on the submit event (which is probably where you do your AJAX'ing):
$('form').on('submit',function(){
$('#loader').toggle();
});
The submit event won't fire until the form fields are valid.
You will have to toggle it "off" somewhere else, fx. the "success" and "error" callbacks of the AJAX-function.
Hope it helps.

Related

How to choose an action page from a form and then submit values to that page HTML,PHP,Javascript

I'm trying to create a page with <form>, <option> and <select> attributes in a php page where I can select an action page from a dropdown menu. Like this Linking to other pages in HTML via drop-down menu And then depending on the option selected ask the user to input a text and be able to submit that reason to that action page. Similar to this Add input-box when selecting a specific option into select drop down
Also please post how you would submit the values to the action page in the way you have your code setup as currently I have been following this method. https://stackoverflow.com/a/1977439/9010400
Example of my form submission which doesn't have the action page selection.
If the below form action page is selected then post the values to that page, but I would like it to ask for a text input for the "reason" before posting.
<form action="url/page.php" method="POST">
<input type="hidden" name="user" value="tester" />
<input type="hidden" name="reason" value="test" />
<input type="submit" value="Ok"/>
In a way I'm trying to combine those different questions/answers I have mentioned in this post. I hope I have been clear as to what I trying to ask for help. Any help is much appreciated. Thank you.
Edit:
Some more info:
I want to able to post values to the form action I select. For example:
Change form action on select option
But I would also like to add a user input option and then submit that value as well to the action form.
Try this.
It will look for the form which name matches the selected option value and show it. Every other form will be hidden.
function showSelectedForm(){
var selected_form = document.querySelector('select').value
var forms = document.querySelectorAll('form')
for(var i=0;i<forms.length;i++){
if(forms[i].getAttribute('name')==selected_form)
forms[i].style.display = 'block'
else
forms[i].style.display = 'none'
}
}
form{
margin-top: 25px;
display: none;
}
form label{
display: block;
}
Action:
<select onchange="showSelectedForm()">
<option disabled selected>Please choose</option>
<option value="change_name">Change Name</option>
<option value="report_user">Report User</option>
<option value="delete_account">Delete Account</option>
</select>
<form name="change_name" action="/php/change_name.php">
<label>Name <input type="text" name="name"></label>
<label>Reason <input type="text" name="reason"></label>
<input type="submit">
</form>
<form name="report_user" action="/php/report_user.php">
<label>User <input type="text" name="user"></label>
<label>Report <textarea name="report"></textarea></label>
<input type="submit">
</form>
<form name="delete_account" action="/php/delete_account.php">
<label>Name <input type="text" name="name"></label>
<label>Are you sure? <input type="checkbox"></label>
<input type="submit">
</form>

How to reset HTML5 form validation errors when click back button

Im having an issue clearing the HTML5 oninvalid red border around inputs. If a user clicks the submit button without correctly filling out the form, the HTML5 setCustomValidity errors will show and the default red outline will appear around any required input fields that were left blank...this all works great. Problem is, if a user clicks the back button, then comes back to this form or another section of the form within this form, the form will still display all invalid form elements with the red outline.
What i would like to happen, is if this forms "go back" button is clicked, that will reset/clear the form so that all form elements are reset and none will display the red outline unless the form was once again submitted and has empty/incorrect form information.
Here is a snippet of my code:
<form class="login-form" aria-label="Login" action="" method="post">
<div class="login-A">
<h4>Are you a client?</h4>
<div>
<button class="lx-button lx-button--small lx-button--primary" id="client-yes" type=button>
Yes
</button>
<button class="lx-button lx-button--small lx-button--primary" id="client-no" type=button>
No
</button>
</div>
</div>
<div class="login-B">
<h4>Existing client information</h4>
<button class="lx-button lx-button--small lx-button--tertiary back" id="olb-back-btn-2" type=button>
Go back
</button>
<p>Enter your online ID and Password</p>
<div>
<div>
<label for="olb-user-id">User ID</label>
<input id="olb-user-id" name="olbuserid" maxlength="20" type="text" required="required" oninvalid="setCustomValidity('User ID is required.')" oninput="setCustomValidity('')">
</div>
<div>
<label for="olb-password">Password</label>
<input id="olb-password" name="olbpassword" maxlength="28" value="" type="password" required="required" oninvalid="setCustomValidity('Password is required.')" oninput="setCustomValidity('')">
</div>
</div>
<button class="lx-button lx-button--small lx-button--primary" id="login-button" type=submit>
Continue
</button>
</div><!-- login-B -->
<div class="login-C">
<h4 class="text">New client</h4>
<button class="lx-button lx-button--small lx-button--tertiary back" id="olb-back-btn-3" type=button>
Go back
</button>
<label for="login-state">Select your state to view your account options.</label>
<div class="login-state-container">
<select id="login-state" name="login-state" required="required" oninvalid="setCustomValidity('State is required.')" oninput="setCustomValidity('')">
<option value="" selected="selected">State</option>
<option value="AL">AL</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="IN">IN</option>
<option value="WV">WV</option>
<option value="DC">Washington, DC</option>
</select>
</div>
</div>
</form>
Ive searched for days trying to figure out how to solve this issue. I have tried:
function clearValidity(){
document.getElementById('olb-user-id').setCustomValidity('');
document.getElementById('olb-password').setCustomValidity('');
document.getElementById('login-state').setCustomValidity('');
}
document.getElementById( 'olb-back-btn-2' ).onclick = function() {clearValidity()};
document.getElementById( 'olb-back-btn-3' ).onclick = function() {clearValidity()};
also tried:
$('.login-form').trigger("reset");
Along with many other trials from posts i have read but nothing seems to work. Please help! Thank you!
The back button is a save of how the last page ended. The only way to do this, is to change the form to post the data using Javascript.
Use javascript collect the data and HttpXML to post it
First collect the data with JavaScript
Then clear all the fields using javascript
Post the data using javascript a HttpXML request
Upon return (xml repsonse) Redirect if required or show an error for them to re complete the form (the form will now be blank and ready to start again)
If using this method be sure to disable the submit button until the response has been returned from the XML post to stop the user submitting multiple times

Button 404 on click with Jquery

I'm working to change a button on specific pages. Not just the text that's inside it, but also where it goes. Currently, it's part of a form that is meant to add a product to cart. I need that to change though and simple take the user to the contact form.
The closest I've come is getting it to take users to the contact page, but it appears as a 404. Could this be because of the form's method? The URL matches the contact page exactly and I've tried both the full path and relative path. Here's the code I have so far:
$( document ).ready(function() {
$(".grid-link__meta:contains('$0.00')").html('<strong>Contact Us for Quote</strong>');
$(".product-single__price:contains('$0.00')").text('');
if ( $('.product-single__price').text() == "") {
$("#AddToCartText:contains('Add to Cart')").html('<strong>Get Quote</strong>');
$('#AddToCartForm').click(function(){
$('#AddToCartForm').attr('action', '/pages/contact-us');
});
}
})
The code that's causing trouble is:
$('#AddToCartForm').click(function(){
$('#AddToCartForm').attr('action', '/pages/contact-us');
});
edit: Here's the code that I'm trying to update. :
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
<select name="id" id="productSelect" class="product-single__variants">
<option selected="selected" data-sku="" value="20267761543">Default Title - $0.00 USD</option>
</select>
<div class="product-single__quantity is-hidden">
<label for="Quantity">Quantity</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
</div>
<button type="submit" name="add" id="AddToCart" class="btn">
<span id="AddToCartText">Add to Cart</span>
</button>
</form>
edit: SOLVED. Thanks to #Barmar for the idea of changing the button's form from POST to GET. There are still some things that get passed in the URL, but the form works fine.

Javascript redirect to two thank you pages, depending on form response

There is a yes or no field on the form, depending on user's choice I would like to send them to a different thank you page depending on their answer.
With this, I just get a blank page. I've tried everything I can think of, so I appreciate any insight.
<form action="http://www.google.com/form" name="Lead" id="Lead" class="sem-form" onsubmit="return redirectTY()">
<label class="select">
<select name="Invest_RD" id="Invest_RD">
<option value="Yes">Yes</option>
<option selected="selected" value="No">No</option>
</select>
</label>
</form>
function redirectTY(){
var qualify = document.getElementById("Invest_RD".value);
if (qualify == "Yes"){
window.location.href='http://www.google.com';
} else {
window.location.href='http://www.bing.com';
}
}
Your code looks fine, except for this detail:
document.getElementById("Invest_RD".value);
This will crash all your javascript. Probably your console (developer tools) have red messages refered to this. To fix it write:
document.getElementById("Invest_RD").value;
That's because getElementById() is a method of document, and value is a property of the element returned by getElementById().
In your code snippet you are missing the submit button to submit the form or any other action call that executes the button submit. When the action call is done alone the form will submit and you can check upon the values.
Hence your HTML will look like
<form action="" name="Lead" id="Lead" class="sem-form" onsubmit="return redirectTY()">
<label class="select">
<select name="Invest_RD" id="Invest_RD">
<option value="Yes">Yes</option>
<option selected="selected" value="No">No</option>
</select></label>
<input type="submit" name="submit" value="SUBMIT" />
</form>
You no need an action to the since it is calling the JS after the form is submitted and you can catch up from there on.
The select tag value can be retrieved using the following JS and you can perform the calculations.
$('#Invest_RD').val(); // Getting the selected value from the select tag
Add submit button <input type ="submit" value="submit"> to trigger the onsubmit event in your html form. and change onsubmit = "redirectTY();return false;"
<label class="select">
<select name="Invest_RD" id="Invest_RD">
<option value="Yes">Yes</option>
<option selected="selected" value="No">No</option>
</select></label>
<input type ="submit" value="submit">
</form>

Html form with automatic submit

I have a problem with html forms, I searched for a solutions on google but I didn't find any help. I want to do a html form without submit button, like here (search for activities:) , when I select option it redirect me to the value of option selected
Bind a change event handler to your select element and call the submit() method of the form when it is triggered.
Then have your server side form handler redirect to the page you want.
<form action="redirector">
<select name="destination">
<option value="1">Some page</option>
<option value="2">Some other page</option>
</select>
<!-- Normal submit button for when the JS fails -->
<input type="submit" value="Go">
</form>
<script>
document.querySelector('select').addEventListener('change', submitForm);
function submitForm(event) {
event.target.form.submit();
}
</script>
This is a javascript question. Using jQuery, you would do it something like this:
$(document).ready(function($){
$("select").on("change",function(){
window.location.href = "http://example.com/"+$(this).val();
});
});

Categories

Resources