hi i want to disable submit button until Date and location field is inserted once the date and location field is inserted button can be pressed.
i cant find how please need help on this
(function() {
var cause = document.getElementById('cause');
var amount = document.getElementById('amount');
var currency = document.getElementById('currency');
var datepicker = document.getElementById('datepicker');
var adults = document.getElementById('adults');
var children = document.getElementById('children');
var btn = document.getElementById('btn');
btn.addEventListener('click', async (e) => {
var occupancy = $('input:radio[name=occupancy]:checked').val();
var buggy = $('input:radio[name=atv]:checked').val();
e.preventDefault();
fetch('/checkout_sessions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
cause: cause.value,
datepicker: datepicker.value,
adults: adults.value,
children: children.value,
currency: currency.value,
occupancy: occupancy,
buggy: buggy,
amount: parseInt(amount.value * 100, 10),
}),
})
.then((response) => response.json())
.then((session) => {
stripe.redirectToCheckout({ sessionId: session.id });
})
.catch((error) => {
console.error('Error:', error);
});
});
})();<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://js.stripe.com/v3/"></script>
<style>
.small-img-group {
display: flex;
justify-content: space-between;
}
.small-img-col {
flex-basis: 24%;
cursor: pointer;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.up,
.down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 29px;
margin: 1px 1px;
cursor: pointer;
width: 23px;
line-height: 14px;
height: 26px;
text-align: center;
font-weight: bold;
border: 1px solid orangered;
user-select: none;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
border: 1px solid #dad55e;
background: orangered;
color: #ffffff;
}
.up:hover,
.down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 28px;
text-align: center;
width: 63px;
line-height: 24px;
font-size: 20px;
border-radius: 5px;
border-color: orangered;
}
input[type="radio"] {
display: none;
}
label[for=private] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for=shared] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
label[for=withatv] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for=withoutatv] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type="radio"]:checked label {
background-color: orangered;
color: white;
}
input[type="radio"]:checked label:before {
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
</head>
<body>
<section >
<div >
<div >
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450">
<div >
<div >
<img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" alt="">
</div>
<div >
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" alt="">
</div>
<div >
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" alt="">
</div>
<div >
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" alt="">
</div>
</div>
</div>
<div >
<h6 style="padding-top: 20px;">Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2><label> Total AED:</label><input type="number" id="amount" readonly></label></h2>
<p><input type="text" id="datepicker" style="width: 120px;" autocomplete="off" placeholder="Date" readonly/></p>
<div >
<Label >Adults</Label>
<div class='down' onclick='decreaseCount(event, this)'>-</div>
<input id="adults" type='text' value='1' readonly>
<div class='up' onclick='increaseCount(event, this)'> </div>
</div>
<div >
<Label >Children</Label>
<div class='down' onclick='decreaseCount2(event, this)'>-</div>
<input id="children" type='text' value='0' readonly>
<div class='up' onclick='increaseCount(event, this)'> </div>
</div>
<div style="display: flex; width: 100%">
<input type="radio" name="occupancy" id="private" value="private" checked="checked" onclick="updateTotal()">
<label for="private" style="width: 74px;">Private</label>
<input type="radio" name="occupancy" id="shared" value="shared" onclick="updateTotal()">
<label for="shared" style="width: 74px;">Shared</label>
</div>
<div style="display: flex; width:100%">
<input type="radio" name="atv" id="withatv" checked="checked" onclick="updateTotal()">
<label for="withatv" style="width: 94px;">With ATV</label>
<input type="radio" name="atv" id="withoutatv" onclick="updateTotal()">
<label for="withoutatv" style="width: 119px;">Without ATV</label>
</div>
<input type="text" placeholder="location">
<div >
<label for="cause">Cause</label>
<select id="cause">
<option value="cause-a">cause a</option>
<option value="cause-b">cause b</option>
</select>
</div>
<div >
<label for="currency">Currency</label>
<select id="currency">
<option value="cad">CAD</option>
<option value="eur">EUR</option>
<option value="usd">USD</option>
</select>
</div>
<div >
<button type="submit" id="btn">Donate</button>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />
<script src="jQuery.ui.datepicker.js"></script>
<script src="jquery.ui.datepicker.mobile.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="donate.js" charset="utf-8"></script>
<script>
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value ;
input.value = value;
updateTotal();
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
updateTotal();
}
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
updateTotal();
}
}
$('#datepicker').datepicker({
minDate:0
})
var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');
smallimg[0].onclick = function() {
MainImg.src = smallimg[0].src;
}
smallimg[1].onclick = function() {
MainImg.src = smallimg[1].src;
}
smallimg[2].onclick = function() {
MainImg.src = smallimg[2].src;
}
smallimg[3].onclick = function() {
MainImg.src = smallimg[3].src;
}
function calculateTotal() {
const privateAdultPrice = 100;
const sharedAdultPrice = 40;
const privateChildrenPrice = 50;
const sharedChildrenPrice = 30;
const withAtvAdultPrice = 100;
const withAtvChildrenPrice = 80;
const noAtvPrice = 0;
const adults = document.querySelector('#adults').value;
const children = document.querySelector('#children').value;
const isPrivate = document.getElementById('private').checked;
const isWithAtv = document.getElementById('withatv').checked;
const adultTripPrice = isPrivate ? privateAdultPrice : sharedAdultPrice;
const childrenTripPrice = isPrivate ? privateChildrenPrice : sharedChildrenPrice;
const adultVehiclePrice = isWithAtv ? withAtvAdultPrice : noAtvPrice;
const childrenVehiclePrice = isWithAtv ? withAtvChildrenPrice : noAtvPrice
const adultPrice = adults * (adultTripPrice adultVehiclePrice)
const childrenPrice = children * (childrenTripPrice childrenVehiclePrice)
return adultPrice childrenPrice;
}
function updateTotal() {
const total = calculateTotal();
console.log(total);
document.querySelector('#amount').value = total;
}
updateTotal();
</script>
</body>
</html>hi i want to disable submit button until Date and location field is inserted once the date and location field is inserted button can be pressed
i cant find how please need help on this
CodePudding user response：
You should be able to add a conditional in your click event listener:
btn.addEventListener('click', async (e) => {
var occupancy = $('input:radio[name=occupancy]:checked').val();
var buggy = $('input:radio[name=atv]:checked').val();
e.preventDefault();
if (!datepicker.value || !location.value) return;
// ...
Aside: you don't actually appear to be including location in your form submission. You'd need to add code to get the input:
var location = document.querySelector('.location');
This should go with all of your other variables like datepicker. This is using the class name of the input...you don't have an id on that input. It would be good to add an id actually...
If you want something that actually causes the button to be greyed out, you'd want to add event listeners to the inputs in question, to check when they've been filled in to add/remove the disabled attribute:
datepicker.addEventListener('change', e=> {
btn.disabled = datepicker.value && location.value;
});
location.addEventListener('change', e=> {
btn.disabled = datepicker.value && location.value;
});
// also set the state initially, when the page loads
btn.disabled = datepicker.value && location.value;
These boolean expressions take advantage of an empty string being "falsy". However even a single space character will make the value "truthy." If you want to make sure word characters have actually been entered, you'd need a different test, perhaps a regex, such as datepicker.value.match(/\S /), which checks for at least one non-space character.
One other thing worth mentioning: if you actually had a <form> element surrounging your inputs and button, you'd want to be sure to handle the submit event on the form. A form can be submitted by other means besides clicking a button, such as hitting enter while an input is focused.
CodePudding user response：
first you have to check that both fields are not empty, so you can get their value and see if they are undefined or not. After that, you can remove the "disabled" attribute with element.removeAttribute("disabled");