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>
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'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.
As the user fills out the form, I have some buttons that dynamically add new questions. However, I can't get the value of these buttons to Post to the subsequent PHP page (all the other information posts fine).
In the example below, I'm not able to get the value of "add_email" in "process-form.php" via $_POST['add_email'];
Thanks in advance for your help. In reduced form, it looks like this:
HTML form
<form id="form" class="form" action="process-form.php" method="POST">
<input id="name" name="name" type="text" placeholder="Name">
<!-- Yes/No buttons asking if the user wants to enter their email-->
<div id="form_email">
<h4>Do you want to enter your email?</h4>
<input type="button" class="btn" id="add_email" name="add_email" value="Yes" onclick="showEmailQ(this.value)"></input>
<input type="button" class="btn" id="add_email" name="add_email" value="No" onclick="showEmailQ(this.value)"></input>
</div>
<input type="submit" class="btn" value="Submit ยป">
</form>
Javascript
<script>
//Function to process whether user wants to enter email and then display value
function showEmailQ(value){
var table_row = document.getElementById("form_email");
if(value == "Yes"){
table_row.innerHTML = '<input id="email" name="email" type="text" placeholder="Email">';
}
else{
table_row.innerHTML = '<p>You have chosen not to enter your email</p>';
}
}
</script>
PHP
//process-form.php
session_start();
$enteredEmail = $_POST['add_email'];
echo $enteredEmail; // Nothing prints to screen
You're destroying your form by overwriting the inputs with
table_row.innerHTML = '<input id="email" name="email" type="text" placeholder="Email">';
So maybe change the input name to match
table_row.innerHTML = '<input id="email" name="add_email" type="text" placeholder="Email">';
I'm making a html5 application which require all fields to be filled in before the submit button can be clicked.
What I want to do now is give an alert if a textbox is not filled in, the problem is that my submit button is disabled until all fields are filled in, so I can't really add an alert to that button.
Any idea's on how to solve this?
I want it so that after filling in the final textbox the submit button becomes available without first having to click on it.
Note that the 'required' does not work.
I have the following code:
HTML:
<form id="winForm">
<p>
<input type="text" id="name" name="name" required />
</p>
<p>
<input type="text" id="vorname" name="vorname" required />
</p>
<p>
<input type="text" id="email1" name="email1" required />
<label id="atteken" >#</label>
<input type="text" id="email2" name="email2 " required />
<textarea id="fullemail" name="fullemail"></textarea>
</p>
<p>
<input type="text" id="telefon" name="telefon" onclick="generateFullAdress()" required />
</p>
<p>
<input type="text" id="firma" name="firma" required />
</p>
<p>
<input type="submit" id="submitBtn" onclick="sendTheMail()" value=" ">
</button><div id="loading"><img src="images/loadingBar.gif" id="load"></img></div>
</p>
</form>
Jquery/JS
<script type="text/javascript">
function generateFullAdress() {
document.getElementById('fullemail').value =
document.getElementById('email1').value + '#' +
document.getElementById('email2').value;
}
</script>
<script>
var $input = $('input:text'),
$register = $('#submitBtn');
$register.attr('disabled', true);
$input.keyup(function() {
var trigger = false;
$input.each(function() {
if (!$(this).val()) {
trigger = true;
}
});
if(trigger) {
$register.attr('disabled',true);
}else {
$register.removeAttr('disabled');
}
});
</script>
Help would greatly be appreciated.
Thanks!
If you have a form as such:
<form id="form">
...
</form>
You can use the following jQuery code to do something before the form is submitted:
$(function() {
$('#form').submit(function() {
// DO STUFF
return true; // return false to cancel form action
});
});
OR
perform the samething with the onsubmit event like
<form action="youraction" onsubmit="validatefunction" method="post">
Hi I'm having some trouble getting this to work, pretty simple all I am wanting to do is show a div once my html form is submitted.
<head>
<script type="text/javascript">
function showHide() {
var div = document.getElementById(hidden_div);
if (div.style.display == 'none') {
div.style.display = '';
}
else {
div.style.display = 'none';
}
}
</script>
</head>
<body>
<form method="post" name="installer">
<label>Home Keyword</label>
<br />
<input type="text" name="hello" value="">
<br />
<input type="submit" value="" name="submit" onsubmit="showHide()">
</form>
<div id="hidden_div" style="display:none">
<p>Show me when form is submitted :) </p>
</div>
</body>
Any help would be much appreciated thank you :)
I think you're just missing quotes around "hidden_div" in your document.getElementById("hidden_div") call!
But actually, your page is probably posting back, resetting the state of the page and thus leaving hidden_div seemingly always in a hidden state -- are you intending on handling the form submission via AJAX?
If you want to see the intended behavior, you should move the showHide() call to the <form> element, and return false after it:
<form method="post" name="installer" onsubmit="showHide(); return false;">
and leave the submit button as:
<input type="submit" value="" name="submit" />
Also note that you haven't self-closed the <input /> button tag, or given any text to show inside it.
you need to put showhide function on form onsubmit instead of input
<form method="post" name="installer" onsubmit="showHide()">
you are also missing quotes as #Cory mentioned
I Hope this example works for you , I have used two different ways
first One for Hiding Form and second One for Showing DIV
document.forms['myFirstForm'].addEventListener('submit', function(event) {
// Do something with the form's data here
this.style['display'] = 'none';
event.preventDefault();
});
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<form action="" class="m-md-5 px-md-5" method="post" name="myFirstForm">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<button type="submit" class="btn btn-primary w-100 mt-5" onclick="myFunction()">Submit</button>
</form>
<div id="myDIV" class="2" style="display:none">
<h1>ThankYou</h1>
<h6>We will get back to you shortly on the same.</h6>
</div>