I'm working on a webpage where the user has to fill up the required fields.
I have this sample form:
<form action="mypage.php">
First name:<br>
<input type="text" name="firstname" required>
<br>
Last name:<br>
<input type="text" name="lastname" required>
<br><br>
<input type="submit" value="Submit">
</form>
The validation works for the required fields. If fields are not blank, the form can be submitted succesffully. While if blank, fields are highlighted and the user can't submit the form.
Now, I added a spinner on button's click event using javascript:
<script type="text/javascript">
$(function () {
$("#Update").click(function () {
$("#loading").fadeIn();
});
});
</script>
The spinner shows and works fine once the button is clicked. But the problem is it shows regardless if the form was submitted or not. It shows even if the fields are blank and since the form wasn't submitted and no function to run, the spinner just keeps spinning.
How can I show the spinner only after the fields validation?
Please help. Thank you in advance.
Try to use this instead of .click()
$(document).ready(function(){
$('form').on("submit",function(){
console.log("Loading...");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="mypage.php">
First name:<br>
<input type="text" name="firstname" required>
<br>
Last name:<br>
<input type="text" name="lastname" required>
<br><br>
<input type="submit" value="Submit">
</form>
If you want the loader spinner after the default form validations are done, then I suggest to do that in form submit event.
<form action="mypage.php" id="updateForm">
First name:<br>
<input type="text" name="firstname" required>
<br>
Last name:<br>
<input type="text" name="lastname" required>
<br><br>
<input type="submit" value="Submit" id="Update">
</form>
<script type="text/javascript">
$(function () {
$("#updateForm").submit(function () {
$("#loading").fadeIn();
});
});
</script>
Make sure your submission button has update as ID. Then, it will work.
In JavaScript you must have to give Id or function to submit button then call this id in javascript function.
Invoking JavaScript function on form submission:
In our example, we call ValidationEvent() function on form submission.
That will first validate the form fields and will return a boolean value either true or false. Depending upon the returned value the form will submit if it will be true.
JavaScript Function:
// Below Function Executes On Form Submit
function ValidationEvent() {
......
return true; // Returns Value
}
if your page only one form and use jquery, you can follow this code:
<form action="mypage.php" id="updateForm">
First name:<br>
<input type="text" name="firstname" required>
<br>
Last name:<br>
<input type="text" name="lastname" required>
<br><br>
<input type="submit1" value="Submit" id="Update">
</form>
<script type="text/javascript">
$(function () {
$(":submit1").click(function () {
// your page should have a spinner dom with id loading
// but I think you should not hide loading here because your page with auto reloads after submit, only your page cannot pass form.checkValidity, you need to hide loading element
var flag = $("input[name='firstname']").checkValidity() && $("input[name='firstname']").checkValidity()
if (flag) $("#loading").fadeIn();
this.submit();
});
});
</script>
why your code not works:
yours submit button without id, so you can not listen to the click event. your code will never work.
Related
Hello so I have a problem with submit button leading to another page.
I figured it out how to make it go to another page but it doesn't recognize the required attribute.
Does anyone have any ideas ?
Html
<input type="submit" form="product_form" id="searchsubmit" onclick="myFunction()">
<form action="welcome.php" method="post" id="product_form">
<label>SKU</label> <input type="text" name="sku" class="sku" required>
</form>
JS
function myFunction() {
window.location.href = "index.html";
}
i have created form with basic verification in html like this.
<form class="" action="submit/save" method="POST" enctype="multipart/form-data" id="submit_form">
<input class="form-control" name="name" id="name" required>
</form>
<a onclick="submitProduct()">Submit</a>
function submitProduct() {
$('#choice_form').submit();
}
then after click the <a> tag i have submit form as the
$('#submit_form').submit();
but required validations not sporting when submitting
Your code won't submit anything at all, because it's using the wrong ID to identify the form. But assuming that was just a typo then...
Instead of using an anchor tag, just use a regular submit button, then you won't need any script:
<form class="" action="submit/save" method="POST" enctype="multipart/form-data" id="submit_form">
<input type="text" class="form-control" name="name" id="name" required>
</form>
<input type="submit" form="submit_form">Submit</input>
i have entered this jQuery code,
$(document).ready(function(){
$('#submit_form').submit(function(e){
if($(this).closest('form')[0].checkValidity()){
if(submitProduct() == 1 ){
return true;
}else {
return false;
}
}
});
});
submitProduct() is a my another custom function if that function done i have submitted form, if not done then form submission action killed.
$(document).ready(function(){ });
it's helped me to use form validations also like 'required'
When I load a page, I need to show form for name, but when I click "submit" i need hide that form. How can i do that with javascript?
<div id="small-form">
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit" onclick="hideForm()">
</form>
</div>
In the hideForm() function set display:none style for the div small-form.
Like that:
var myFormDiv = document.getElementById("small-form");
myFormDiv.style.display = "none";
You cannot just hide the form if it submits to the server unless you either Ajax the form to the server or target an iframe or new tab
When the form submits, a new page is loaded. If it loads the same page, you can either hide it on the server or set an instruction in localStorage to tell the page to not show the form
I also strongly suggest you do NOT use onclick of a submit button but the submit event
document.getElementById("myForm").addEventListener("submit",function(e) {
e.preventDefault(); // if you want to NOT submit the form
document.getElementById("small-form").classList.add("hide");
// here you can ajax or do other stuff without submitting
})
.hide { display: none; }
<div id="small-form">
<form id="myForm">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit">
</form>
</div>
You can set the display style to none in the hideForm() function in javascript to hide the form.
But, because you are using a submit button on the form it will try to redirect when the submit button is pressed. A simple solution to this (if you don't want the form to actually be submitted) is to change the type of the input to button rather than submit.
function hideForm()
{
document.getElementById('small-form').style.display = 'none';
}
<div id="small-form">
<form >
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="button" value="Submit" onclick="hideForm();">
</form>
</div>
If you wish to permanently hide the form you can do something like this. Just set the display property of the form to none. This will hide the form but it will exist there in the HTML code.
function hideForm() {
event.preventDefault();
var myForm = document.getElementById("My-Form");
myForm.style.display = "none";
var name = document.getElementById("Name");
alert(name.value);
}
<div id="small-form">
<form id="My-Form">
<label for="fname">First name:</label><br>
<input id="Name" type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit" onclick="hideForm(event)">
</form>
</div>
Another way to achieve what you are trying to do is simply remove the form. You can do this by calling remove() function on the form. This permanently removes the form.
function hideForm(event) {
event.preventDefault();
var myForm = document.getElementById("My-Form");
var name = document.getElementById("Name");
alert(name.value);
myForm.remove();
}
<div id="small-form">
<form id="My-Form">
<label for="fname">First name:</label><br>
<input id="Name" type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit" onclick="hideForm(event)">
</form>
</div>
How can I know which form I clicked? Is it possible with a button class instead of buttons with id?
$(document).ready(function () {
$(".form-buttons").click(function () {
//I only want the form which corresponds to the button I clicked
var formDates = $(form).serialize()
alert ("You clicked "+formDates)
})
})
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<button type="button" class="form-button"></button>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<button type="button" class="form-button"></button>
</form>
Yes use class instead of id for similar elements. Please try this.
Note: form-button is the class name in your HTML and not form-buttons
$(document).ready(function () {
$(".form-button").click(function () {
var formDates = $(this).closest('form').serialize();
alert ("You clicked "+formDates)
})
})
I think you be looking for
$('.form-button').on('click', function () {
alert($(this).parents('form').attr('id')); // Check the ID of the form clicked
});
something Maybe Like mentioned above.
You can get the name of the element by using the this keyword which refer, in a DOM event, to the cibled element :
$(document).ready(function () {
$(".form-buttons").click(function () {
alert('You clicked the form' + this.parentElement.getAttribute('id'));
})
})
You can do this in a few different ways. You can traverse up the DOM and see which form is used or -and this is my favorite- you can submit the form!
Solution 1: Traversing up the DOM
<script>
$(document).ready(function () {
$(".form-button").click(function () {
var clicked_form = $(this).parent();
var formDates = clicked_form.serialize();
alert ("You clicked "+formDates);
})
})
</script>
</head>
<body>
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<button type="button" class="form-button"></button>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<button type="button" class="form-button"></button>
</form>
</body>
Solution 2: Submit the form
You already are using the form, so why not submit it? Change the buttons to input elements with type submit and intercept the submit event, like this. This is how I think it should be done. It is also better for user experience because the user can just submit the form by pressing enter.
<script>
$(document).ready(function () {
$("form").on('submit', function (e) {
e.preventDefault();
var formDates = $(this).serialize()
alert ("You clicked "+formDates)
})
})
</script>
</head>
<body>
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<input type="submit" class="form-button"></input>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<input type="submit" class="form-button"></input>
</form>
</body>
Check this fiddle on how I would do it.
https://jsfiddle.net/xtfeugav/
Simple use
$("form").submit(function(e) {
to listen for every submit on all the forms you have. To get the ID of the form you use
var formid = $(this).attr('id');
I used e.preventDefault(); to prevent the form don't update the page.
Remember to use <input type="submit" value="Submit"> on your forms to make this work.
Its a simple code, hope it helps.
This is my Html code:
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
function logiin()
{
name_sent = document.getElementById('username').value;
pass_sent = document.getElementById('pass').value;
$.post(
'login.php',
{
name: name_sent
},
function show(data) {alert (data); }
);
}
</script>
</head>
<body>
<!--<form>-->
Username: <input type="username" name="username" id="username"> <br>
Pass: <input type="password" name ="pass" id="pass"> <br>
<input type="submit" onclick="logiin();">
<!--</form>-->
</body>
It works with ajax and JQuery and works very well, too! :) But if i add form tag it doesn't work! why.?
It's not working because, when contained in a form, the submit button will try to submit the form.
The easiest way to prevent that from happening is to add return false; to the onclick handler:
<input type="submit" onclick="logiin(); return false;" />
The better way, though, would be to add the handler to the form itself (in case the user submits the form another way):
<form onsubmit="logiin(); return false;">
<!-- Form elements here -->
</form>
Just disable submit. If there is no button with type as submit, the form won't be submitted, unless you do it in your JavaScript code explicitly.
<body>
<form>
Username: <input type="username" name="username" id="username"> <br>
Pass: <input type="password" name ="pass" id="pass"> <br>
<input type="button" onclick="logiin();">
</form>
</body>
Probably because you are using an input button of type submit. Try using input of type button.
<input type="button" onclick="logiin();">
A button of type submit will automatically try to submit the form using post. See w3c Schools for more information.