new to js...need your help. I want to create a cancel button that cancels an online form session when the cancel button is clicked. Before cancelling the session, I want a notification popup to appear (onclick event) asking for the user's confirmation before cancelling the application session. See code below:
<form>
<div class="form-group">
<label for="Product">Product</label>
<input type="text" name="product" id="product" required="required" value="">
</div>
<div class="form-group">
<label for="Product">Product1</label>
<input type="text" name="product1" id="product1" required="required" value="">
</div>
<div class="form-group">
<label for="Product">Product2</label>
<input type="text" name="product2" id="product2" required="required" value="">
</div>
<div>
<button name="submit">Add Product</span></button> **Cancel**
</div>
</form>
First you need on click confirm function which will ask user approve before continue
**Cancel**
<script>
function confirmCancel () {
var message = "Are you sure?";
if (confirm(message)) {
// do what you want
}
}
</script>
<form id='form1'>
<div class="form-group">
<label for="Product">Product</label> <input type="text" name="product" id="product" required="required" value=""> </div>
<div class="form-group">
<label for="Product">Product1</label> <input type="text" name="product1" id="product1" required="required" value=""> </div>
<div class="form-group"> <label for="Product">Product2</label> <input type="text" name="product2" id="product2" required="required" value=""> </div>
<div>
<button name="submit">Add Product</span></button>
**Cancel** </div>
</form>
<script>
function(id){
if(confirm("do you want to cancel?")){
$("#"+id)[0].reset();
}
}
</script
>
Without editing the form select the element, attach an 'click' event listener to the element you want to listen in on, in this case, "cancel" a tag. Once the click is registered confirm using a confirm box. if Ok grab the form and reset it and redirect the user. Else, do something else.
// grab your cancel anchor tag
var anchor = document.querySelector("[href='http://www.google.com']");
// grab your form
var form = document.getElementsByTagName('form')[0];
// add an event listener on to your cancle anchor tag
anchor.addEventListener('click',clicked =>{
// assign your confirm to varable yes
var yes = confirm('are you sure you want to cancle');
if(yes===true){
// if they confirm their departure reset the form
form.reset();
//alert them of a successfull form reset and inform them of the reroute
alert('the form has been reset you are going to be rerouted to google');
// use location to reroute to a different domain
//window.location.href("http://www.google.com")
// or within the current domain using a relative path
// window.location.href = '../' one level up
// winsow.location.href = '/path' relative to a domain
}else{
alert('you decided to cancle');
// do nothing
}
});
<form>
<div class="form-group">
<label for="Product">Product</label>
<input type="text" name="product" id="product" required="required" value="">
</div>
<div class="form-group">
<label for="Product">Product1</label>
<input type="text" name="product1" id="product1" required="required" value="">
</div>
<div class="form-group">
<label for="Product">Product2</label>
<input type="text" name="product2" id="product2" required="required" value="">
</div>
<div>
<button name="submit">Add Product</span></button> **Cancel**
</div>
</form>
Related
I'm doing a project and I don't understand the front end well.
I have this html page:
<form class="form-group" action="/create" method="post" enctype="multipart/form-data">
<div class="title">
<h1>Cadastre seu produto</h1>
</div>
<div class="single-input">
<input class="form-control" placeholder="nome do produto" type="text" id="nome_produto" name="nome_produto">
</div>
<div class="single-input">
<input class="form-control" placeholder="quantidade em estoque" type="number" id="quantidade" name="quantidade">
</div>
<div class="single-input">
<input class="form-control" placeholder="preco do produto" type="number" id="preco_produto" name="preco_produto">
</div>
<button onclick="loadPage()" id="button" type="submit" class="btn btn btn-danger">ENVIAR</button>
</form>
I want that when I click on the SUBMIT button, I am redirected to another page, I want to do this using Javascript.
I tried to do this:
<script type="text/javascript">
function loadPage(){
window.location("http://localhost:8080/list")
}
but it's not working, every time I click on the button I'm redirected to a blank page
Any solution ?
Window.location is a property not a function. So it should be
window.location = "http://localhost:8080/list";
More details here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location
I need to console log ID attribute of each form element on click. So if someone clicks not on the form element, I don't want to console log it.
Here's my code:
<form class="cf">
<div class="half left cf">
<input type="text" id="input-name" placeholder="Name">
<input type="email" id="input-email" placeholder="Email address">
<input type="text" id="input-subject" placeholder="Subject">
</div>
<div class="half right cf">
<textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
</div>
<input type="submit" value="Submit" id="input-submit">
</form>
I tried :
document.addEventListener('click', function(e) {
console.log(e.target.id);
}, false);
It does console log, but everything on click, and I need only the ID attribute of each form on click.
You can simply just add a click listener event to your form.
Example:
let forms = document.querySelectorAll('form');
function formClicked(event) {
console.log(event.target.id);
}
forms.forEach(form => {
form.addEventListener('click', formClicked, false);
});
So, I am trying to get a "thank you" message instead of a form that I have created on HTML. I want to get a thank you message only if the user has submitted all their details and everything.
Here's my HTML:
<div class = "form">
<form>
<!-- Name -->
<label class = "firstName">First name</label><br>
<input type="text" placeholder = "John" required = "required" pattern="[A-Za-z]. {1,20}" id = "firstName"><br>
<label class = "lastName">Last name</label><br>
<input type="text" placeholder = "AppleSeed" required = "required" pattern="[A-Za-z]{1,20}" id = "lastName"><br>
<!-- Email -->
<label class = "email">Email</label><br>
<input type= "email" placeholder = "j.appleseed#example.co.uk" size = "42" required = "required" id = "email"><br>
<!-- Mobile Number -->
<label class = "tel">Mobile Number</label><br>
<input placeholder = "Your Mobile Number" size = "42" required = "required" pattern="[0-9]{6,13}" id = "number"><br><br>
<!-- The Submit button -->
<button class = "submit" onclick="revealMessage()">
<span title="What are you waiting for? Click it!">Submit</span>
</button>
<h1 id = "hiddenMessage" style = "display: none">Thank You!</h1>
</form>
</div>
Javascript:
function revealMessage()
{
document.getElementById("hiddenMessage").style.display = "block";
document.getElementsByClassName("form").style.display = "none";
}
getElementsByClassName is plural. You need to add [0] to the result or better, don't use it
You want to access the submit event - just hiding the form when clicking the button, will not submit the form and also not trigger the validation
You had a bug in your pattern for the First name too
When you hide the form div, the content will hide too
You may want to use AJAX since the form removes the page when submitting - with Ajax you can return thank you from the server
Anyway this shows the thankyou before submitting when things are filled correctly. the HTML5 required and the pattern will not allow submission until correctly filled
document.getElementById("myForm").addEventListener("submit", function(e) {
e.preventDefault(); // pause submission
document.getElementById("hiddenMessage").style.display = "block";
document.getElementById("formDiv").style.display = "none";
setTimeout(function() {
e.target.submit()
}, 2000)
})
<div class="form" id="formDiv">
<form id="myForm">
<!-- Name -->
<label class="firstName">First name</label><br>
<input type="text" placeholder="John" required="required" pattern="[A-Za-z]{1,20}" id="firstName"><br>
<label class="lastName">Last name</label><br>
<input type="text" placeholder="AppleSeed" required="required" pattern="[A-Za-z]{1,20}" id="lastName"><br>
<!-- Email -->
<label class="email">Email</label><br>
<input type="email" placeholder="j.appleseed#example.co.uk" size="42" required="required" id="email"><br>
<!-- Mobile Number -->
<label class="tel">Mobile Number</label><br>
<input placeholder="Your Mobile Number" size="42" required="required" pattern="[0-9]{6,13}" id="number"><br><br>
<!-- The Submit button -->
<button type="submit" class="submit">
<span title="What are you waiting for? Click it!">Submit</span>
</button>
</form>
</div>
<h1 id="hiddenMessage" style="display: none">Thank You!</h1>
Instead of:
document.getElementsByClassName("form").style.display = "none";
Use querySelector:
document.querySelector(".form").style.display = "none";
Also, move your hiddenMessage div outside of your form so it doesn't get hidden with the form on submit.
See the snippet below:
function revealMessage() {
document.getElementById("hiddenMessage").style.display = "block";
document.querySelector(".form").style.display = "none";
}
<div class="form">
<form onsubmit="revealMessage()">
<!-- Name -->
<label class="firstName">First name</label><br>
<input type="text" placeholder="John" pattern="[A-Za-z]. {1,20}" id="firstName" required><br>
<label class="lastName">Last name</label><br>
<input type="text" placeholder="AppleSeed" pattern="[A-Za-z]{1,20}" id="lastName" required><br>
<!-- Email -->
<label class="email">Email</label><br>
<input type="email" placeholder="j.appleseed#example.co.uk" size="42" id="email" required><br>
<!-- Mobile Number -->
<label class="tel">Mobile Number</label><br>
<input placeholder="Your Mobile Number" size="42" pattern="[0-9]{6,13}" id="number" required><br><br>
<!-- The Submit button -->
<button type="submit" class="submit">
<span title="What are you waiting for? Click it!">Submit</span>
</button>
</form>
</div>
<h1 id="hiddenMessage" style="display: none">Thank You!</h1>
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onsubmit
There is an event Called onsubmit on javascript when you submit you can alert or do what ever suits you
<div class="form">
<form onsubmit="myFunction()">
<!-- Name -->
<label class="firstName">First name</label><br>
<input type="text" placeholder="John" required="required" id="firstName"><br>
<label class="lastName">Last name</label><br>
<input type="text" placeholder="AppleSeed" required="required" pattern="[A-Za-z]{1,20}" id="lastName"><br>
<!-- Email -->
<label class="email">Email</label><br>
<input type="email" placeholder="j.appleseed#example.co.uk" size="42" required="required" id="email"><br>
<!-- Mobile Number -->
<label class="tel">Mobile Number</label><br>
<input placeholder="Your Mobile Number" size="42" required="required" id="number"><br><br>
<!-- The Submit button -->
<button class="submit">
<span title="What are you waiting for? Click it!">Submit</span>
</button>
</form>
</div>
<h1 id="hiddenMessage" style="display: none">Thank You!</h1>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
<form #addOpeninghoursForm="ngForm" ngNativeValidate (ngSubmit)="addOpeninghours()">
<div class="form-group">
<label for="day">Select Day:</label>
<select class="form-control" [(ngModel)]="openinghours.day" name="day" id="day" required>
<option value="1">Saturday</option>
<option value="2">Sunday</option>
</select>
</div>
<div class="form-group">
<label for="opens_from">Opens From:</label>
<input type="time" class="form-control" [(ngModel)]="openinghours.opens_from" name="opens_from" id="opens_from" placeholder="Enter the time" required>
</div>
<div class="form-group">
<label for="opens_till">Opens Till:</label>
<input type="time" class="form-control" [(ngModel)]="openinghours.opens_till" name="opens_till" id="opens_till" placeholder="Enter the time" required>
</div>
<button type="submit" class="btn btn-success">Save</button>
<button type="submit" class="btn btn-success" (click)="onlyResetTheTimeInputs?!?!">Reset</button>
</form>
When I saved the form, by pressing the save button, sometimes I want to press the reset button. Not always! But when I have to, I only wanna clear the time inputs. The earlier selected day may not be cleared.
You can clear the input fields of time in onlyResetTheTimeInputs() like
onlyResetTheTimeInputs(): void {
this.openinghours.opens_from = this.openinghours.opens_till = '';
}
Take a look at the code and demo
Source, Stack Blitz
Explanation:
Just a simple clearing of value will do, angular takes care of the view.
Advantage of having two way data binding is view doesn't need to be updated manually
onlyResetTheTimeInputs() {
this.openinghours.opens_from = this.openinghours.opens_till = null;
}
I have 2 inputs for passwords. Each input field has 'show' button, which shows password on holding that button.
<form name="resetting_form" method="post" action="">
<div class="form-group has-feedback">
<input type="password" id="password_first" required="required" placeholder="New Password" class="form-control">
<span class="show">show</span>
</div>
<div class="form-group has-feedback">
<input type="password" id="password_second" required="required" placeholder="Repeat Password" class="form-control">
<span class="show">show</span>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
Here is what I have
$(".form-control").on("keyup",function(){
if ($(this).val())
$(".show").show();
else
$(".show").hide();
});
$(".show").mousedown(function(){
$(".form-control").attr('type','text');
}).mouseup(function(){
$(".form-control").attr('type','password');
}).mouseout(function(){
$(".form-control").attr('type','password');
});
Problem
When I click to 'show' button, both input fields are shown. How to make sure that only corresponding password is shown?
When you use $(".form-control"), jquery select all .form-control element. But you need to select target element using this variable in event function and use .prev() to select previous element.
$(".show").mousedown(function(){
$(this).prev().attr('type','text');
}).mouseup(function(){
$(this).prev().attr('type','password');
}).mouseout(function(){
$(this).prev().attr('type','password');
});
Just target the previous input instead of all inputs with the given class
$(".form-control").on("keyup", function() {
if ($(this).val())
$(this).next(".show").show();
else
$(this).next(".show").hide();
}).trigger('keyup');
$(".show").mousedown(function() {
$(this).prev(".form-control").prop('type', 'text');
}).mouseup(function() {
$(this).prev(".form-control").prop('type', 'password');
}).mouseout(function() {
$(this).prev(".form-control").prop('type', 'password');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="resetting_form" method="post" action="">
<div class="form-group has-feedback">
<input type="password" id="password_first" required="required" placeholder="New Password" class="form-control">
<span class="show">show</span>
</div>
<div class="form-group has-feedback">
<input type="password" id="password_second" required="required" placeholder="Repeat Password" class="form-control">
<span class="show">show</span>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
In react We simply do with
We probably need to use the onMouseDown and onMouseUp, onMouseOut events
onMouseDown={handleShowPassword}
onMouseUp={handleShowPassword}
onMouseOut={handleShowPasswordHideOnMouseOut}