I am doing a simple form using HTML/CSS and Javascript. The idea is that the form will ask the user to type his name, email, age and phone number. After that whenever the user clicks on the "Done" button, these headers will disappear.
"Enter your name"
"Enter your age"
"Enter your email"
"Enter your phone"
When I wrote the javascript code, these headers didn't disappear. So what is the problem?
function display(){
var input1 = document.getElementById("userA").value;
document.getElementById("username").innerHTML = input1;
var input2 = document.getElementById("ageA").value;
document.getElementById("age").innerHTML = input2;
var input3 = document.getElementById("emailA").value;
document.getElementById("email").innerHTML = input3;
var input4 = document.getElementById("phoneA").value;
document.getElementById("phone").innerHTML = input4;
}
</script>
<div>
<h1>Personal Information</h1>
</div>
<div class="container">
<img src="download.png">
<form name='myform'>
<div class="form-input">
<h2 id="username">Enter your name</h2>
<input id="userA" type="text" name="username" >
</div>
<div class="form-input">
<h2 id="age">Enter your age</h2>
<input id="ageA" type="text" name="age">
</div>
<div class="form-input">
<h2 id="email">Enter your email</h2>
<input id="emailA" type="text" name="email">
</div>
<div class="form-input">
<h2 id="phone">Enter your phone</h2>
<input id="phoneA" type="text" name="phone">
</div>
<input type="submit" id="done" onclick="display()" value="Done" name="done">
</form>
<h1 id= "time"></h1>
</div>
</body>
You are submitting the form, that will reload the page, so all changes done by your javascript is lost.
Try changing the submit button to a normal button e.g.
change
<input type="submit" id="done" onclick="display()" value="Done" name="done">
to
<button type="button" onclick="display()" >Done</button>
Have a look at this - it is basically the same, except it doesn't submit the form (because of the return false)
function display(){
var input1 = document.getElementById("userA").value;
document.getElementById("username").innerHTML = input1;
var input2 = document.getElementById("ageA").value;
document.getElementById("age").innerHTML = input2;
var input3 = document.getElementById("emailA").value;
document.getElementById("email").innerHTML = input3;
var input4 = document.getElementById("phoneA").value;
document.getElementById("phone").innerHTML = input4;
return false;
}
<div>
<h1>Personal Information</h1>
</div>
<div class="container">
<img src="download.png">
<form name='myform'>
<div class="form-input">
<h2 id="username">Enter your name</h2>
<input id="userA" type="text" name="username" >
</div>
<div class="form-input">
<h2 id="age">Enter your age</h2>
<input id="ageA" type="text" name="age">
</div>
<div class="form-input">
<h2 id="email">Enter your email</h2>
<input id="emailA" type="text" name="email">
</div>
<div class="form-input">
<h2 id="phone">Enter your phone</h2>
<input id="phoneA" type="text" name="phone">
</div>
<input type="submit" id="done" onclick="return display()" value="Done" name="done">
</form>
<h1 id= "time"></h1>
</div>
Related
I need to enable the submit button, only when all the Input values were given.
I have a form like the below in my blade file.
<form method="POST" id="contactForm">
<div class="row">
<div class="col-6">
<input type="text" name="name" id="name" value=""/>
<div class="error">Error Message</div>
</div>
<div class="col-6">
<input type="text" name="email" id="email" value=""/>
<div class="error">Error Message</div>
</div>
<div class="col-12">
<textarea name="body" id="message" rows="5"> Enter your message</textarea>
<div class="error">Error message</div>
</div>
<div class="col-12">
<input type="submit" value="Submit" class="primary" id="buttonSubmit" disabled/>
</div>
</form>
Added the required attribute inside the controller.
In controller:
public function store()
{
$data = request()->validate([
'name' => 'required',
'email' => 'required|email',
'body' => 'required',
]);
}
The problem is, even if I add the name field and click the button , the submit button is disabled on click.
The button should be disabled, only when all the input fields were given.
Script:
const button = document.querySelector("#buttonSubmit");
const buttonExpirationDataKey = 'button-disabled-expiration';
button.addEventListener("click", () => {
var form = document.getElementById("contactForm");
var fields = ["name", "email","body"];
var i, l = fields.length;
var fieldname;
for (i = 0; i < l; i++) {
fieldname = fields[i];
if(form[fieldname].value !== ""){
button.disabled = true;
let now = new Date();
let expirationTime = 1000 * 5; // 5 secs to disable the submit button
let expirationDate = new Date(now.getTime() + expirationTime);
localStorage.setItem(buttonExpirationDataKey, expirationDate);
button.dataset.enabledAt = expirationDate;
}
else {
button.disabled = false;
}
return false;
}
});
The for loop iterates over each input element, if the particular input element have a value and then If we click the submit. The button is disabled and stored in the local storage.
How to check all the form input and the textarea has values and then after clicking the submit button, the button should be disabled for 5 secs.
https://jsfiddle.net/1vgzj8oc/
How could I do this? Could anyone please help?
You can simply add the required attributes to the HTML
<input type="text" name="name" id="name" value="" required/>
But if you choose to do it with jS, you can do it this way...
<input type="text" name="name" id="name" value="" class="requiredInput"/>
<input type="submit" value="Submit" class="requiredInput primary" id="buttonSubmit" disabled/>
const requiredInputs = document.querySelectorAll(".requiredInput");
requiredInputs.forEach(function(input) {
// Logic
});
You can add required attribute. added link for reference
[https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required]
<form method="POST" id="contactForm">
<div class="row">
<div class="col-6">
<input type="text" name="name" id="name" value="" required/>
<div class="error">Error Message</div>
</div>
<div class="col-6">
<input type="text" name="email" id="email" value="" required/>
<div class="error">Error Message</div>
</div>
<div class="col-12">
<textarea name="body" id="message" rows="5" required> Enter your message</textarea>
<div class="error">Error message</div>
</div>
<div class="col-12">
<input type="submit" value="Submit" class="primary" id="buttonSubmit" disabled/>
</div>
</form>
<form action="">
<h2>Fill out the following details: </h2>
<div class="inp">
<label for="name">Name: </label>
<input type="text" id="name">
</div>
<br>
<div class="inp">
<label for="rollno">Roll No: </label>
<input type="text" id="rollno">
</div>
<br>
<div class="inp">
<label for="image">Image: </label>
<input type="file" id="image" accept="image/jpeg">
</div>
<input type="button" id="submit" value="Submit">
</form>
<div id="output">
<h2>Your Details: </h2>
<div class="out">Name: <span id="outname"></span></div>
<div class="out">Roll No: <span id="outrollno"></span></div>
<div class="out">Image: <img id="outimage" width="200px"></div>
</div>
<script type="text/javascript">
function displayImage()
{
var x = document.getElementById("outimage");
var y = document.getElementById("image").src;
x.setAttribute("src",y);
}
document.getElementById("submit").onclick = function()
{
document.getElementById("output").style.display = "block";
document.getElementById("outname").innerHTML = document.getElementById("name").value;
document.getElementById("outrollno").innerHTML = document.getElementById("rollno").value;
displayImage();
}
</script>
Can someone tell me why is this happening? The image is in the same folder as the HTML file. Is there a better way to achieve this? I want to display the image that is selected in the form by the user.
You need to make sure that you read the content of the image file which is being uploaded. use filereader and then readAsDataURL and once the content is loaded by filereader assign that as source to preview image placeholder.
function readURL() {
// just to avoid the error since i dont know what readURL is doing nor it is mentioned in the OP.
}
function displayImage() {
var x = document.getElementById("outimage");
var file = document.getElementById('image').files[0]
var fr = new FileReader()
fr.readAsDataURL(file)
fr.onload = function(e) {
x.setAttribute("src", this.result);
}
}
document.getElementById("submit").onclick = function() {
document.getElementById("output").style.display = "block";
document.getElementById("outname").innerHTML = document.getElementById("name").value;
document.getElementById("outrollno").innerHTML = document.getElementById("rollno").value;
displayImage();
}
<form action="">
<h2>Fill out the following details: </h2>
<div class="inp">
<label for="name">Name: </label>
<input type="text" id="name">
</div>
<br>
<div class="inp">
<label for="rollno">Roll No: </label>
<input type="text" id="rollno">
</div>
<br>
<div class="inp">
<label for="image">Image: </label>
<input type="file" id="image" accept="image/jpeg" onchange="readURL(this)">
</div>
<button type="button" id="submit">Submit
</button>
</form>
<div id="output">
<h2>Your Details: </h2>
<div class="out">Name: <span id="outname"></span></div>
<div class="out">Roll No: <span id="outrollno"></span></div>
<div class="out">Image: <img id="outimage" width="200px"></div>
</div>
I want to add a new text directly after the two html labels(Email: and Password:) with javascript. How do I go about it?
Just directly after Email: and Password: inside the two labels.
<div class="container">
<div class="welcome-area">
<div class="content">
<!--<h1><strong>SOME TEXT GOES HERE</strong></h1>
<div class="login-area">
<div class="app-intro">
</div>
<div class="login-div">
<form action="add-to-cart.html">
<h1>LOGIN</h1>
<label for="email">Email:</label>
<input id="email" type="email" placeholder="Email" autofocus autocomplete="">
<label for="password">Password:</label>
<input id="password" type="password" placeholder="Password">
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</div>
You can try with querySelector() with attribute selector to modify the textContent property:
document.querySelector('[for="email"]').textContent += ' email text'; // Email label
document.querySelector('[for="password"]').textContent += ' password text'; // Password label
<div class="container">
<div class="welcome-area">
<div class="content">
<h1><strong>SOME TEXT GOES HERE</strong></h1>
<div class="login-area">
<div class="app-intro">
</div>
<div class="login-div">
<form action="add-to-cart.html">
<h1>LOGIN</h1>
<label for="email">Email:</label>
<input id="email" type="email" placeholder="Email" autofocus autocomplete="">
<label for="password">Password:</label>
<input id="password" type="password" placeholder="Password">
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</div>
Try something like that :
var value_to_add = "my code here";
document.getElementById("password").after(value_to_add);
One way of doing it, probably not the best answer, I'm sure there are other more efficient methods.
Add ID's to the two labels
<div class="container">
<div class="welcome-area">
<div class="content">
<h1><strong>SOME TEXT GOES HERE</strong></h1>
<div class="login-area">
<div class="app-intro">
</div>
<div class="login-div">
<form action="add-to-cart.html">
<h1>LOGIN</h1>
<label for="email" id="lblEmail">Email:</label>
<input id="email" type="email" placeholder="Email" autofocus autocomplete="">
<label for="password" id="lblPassword">Password:</label>
<input id="password" type="password" placeholder="Password">
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</div>
<script>
var lblEmail = document.getElementById("lblEmail");
var lblPass = document.getElementById("lblPassword");
lblEmail.innerHTML += 'Some extra text here';
lblPass.innerHTML += 'Some extra text here';
</script>
So for ex. validation you can do something like this
<script>
var lblEmail = document.getElementById("lblEmail");
var lblPass = document.getElementById("lblPassword");
var email = document.getElementById("email").value();
var pass = document.getElementById("password").value();
if (email == null){
lblEmail.innerHTML += 'This field is required';
}else if (pass == null){
lblPass.innerHTML += 'This field is required';
}else{
...do something here
}
</script>
I want: when I enter in the txtbox Enter amount, then I submit the button , the amount I enter in textbox1 which is inputValue it this display in the txtbox which is totAmountPaid
html
<div class="col-md-12">
<label>Enter Amount:</label>
<input type="text" class="form-control" id="inputValue" value="">
</div>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>
script
function myFunction(){
var paidAmount = parseFloat(document.getElementById("inputValue").value);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}
Are you including your JS before you are trying add the onClick handler?
If you load the js beforehand it should work fine.
As you can see here https://jsfiddle.net/Lyspxwvu/1/
<script>
function myFunction(){
var paidAmount = parseFloat(document.getEle`enter code here`mentById("inputValue").v`enter code here`alue);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}
</script>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>
My HTML code is
<body>
<form name="contactus" id='contactus' action="test1.php" method="post" enctype="multipart/form-data">
<input type="hidden" value="2" name="Tab" id="Tab">
<div class="row underlinDv">
<div class="col-sm-4">
Your Email :
</div>
<div class="col-sm-8">
<input maxlength="100" type="email" class="form-control" placeholder="Enter Email" name="UEmailLogin" id="UEmailLogin" minlength="3">
</div>
</div>
<!--18-->
<div class="row underlinDv">
<div class="col-sm-8 col-md-offset-4">
<input type="submit" id="demo2GetTags" class="btn btn-primary btn-md" value="Submit" onclick='search()' />
</div>
</div>
</form>
<script>
function search() {
var Tab = document.getElementById("Tab").value;
alert(Tab);
var Eamillogin = document.getElementById("UEmailLogin").value;
if (Eamillogin == "") {
alert("please enter email");
Eamillogin.focus();
}
}
</script>
</body>
When I click on submit button, JavaScript alert shows "please enter email". It works fine. But Eamillogin.focus(); not working. After showing alert, the form automatically direct to test1.php page.Pointer not focus on Email. How to correct it?
Eamillogin variable contains the value of the #UEmailLogin element.
To set the focus on the element, use element.focus();
Here's updated code
var Eamillogin = document.getElementById("UEmailLogin"); // Removed .value from here
if (Eamillogin.value === "") { // Added .value here
alert("please enter email");
Eamillogin.focus(); // Focus element
}
function search() {
var Tab = document.getElementById("Tab").value;
var Eamillogin = document.getElementById("UEmailLogin");
if (Eamillogin.value === "") {
alert("please enter email");
Eamillogin.focus();
}
}
<form name="contactus" id='contactus' action="test1.php" method="post" enctype="multipart/form-data">
<input type="hidden" value="2" name="Tab" id="Tab">
<div class="row underlinDv">
<div class="col-sm-4">
Your Email :
</div>
<div class="col-sm-8">
<input maxlength="100" type="email" class="form-control" placeholder="Enter Email" name="UEmailLogin" id="UEmailLogin" minlength="3">
</div>
</div>
<!--18-->
<div class="row underlinDv">
<div class="col-sm-8 col-md-offset-4">
<input type="submit" id="demo2GetTags" class="btn btn-primary btn-md" value="Submit" onclick='search()' />
</div>
</div>
</form>