我的提交按鈕被禁用我想在輸入日期和位置欄位后啟用我嘗試過功能但沒有運氣
my submit button is disable i want to enable once date and location field has been entered i have tried function but no luck `function testFinish(){
var datepicker = document.getElementById('datepicker');
var location = document.querySelector('location');
var btn = document.getElementById('btn');
if (location.value && datepicker.value)
btn.disabled = false;
}`
function testFinish(){
var datepicker = document.getElementById('datepicker');
var location = document.querySelector('location');
var btn = document.getElementById('btn');
if (location.value && datepicker.value)
btn.disabled = false;
}<!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 class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img class="img-fluid w-100 pb-1" src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450">
<div class="small-img-group">
<div class="small-img-col">
<img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6 style="padding-top: 20px;">Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2><label> Total AED:</label><input type="number" id="amount"class="total Price" readonly></label></h2>
<p><input type="text" id="datepicker" style="width: 120px;" autocomplete="off" placeholder="Date" readonly/></p>
<div class="counter1">
<Label class="Adults">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 class="counter2">
<Label class="Children">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>
<div class="field">
<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 class="field">
<label for="currency">Currency</label>
<select class="field" id="currency">
<option value="cad">CAD</option>
<option value="eur">EUR</option>
<option value="usd">USD</option>
</select>
</div>
<input class="location" type="text" placeholder="location" oninput="testFinish();">
<div class="field">
<button type="submit" id="btn" name="ik" disabled onsubmit="alert('SUBMITTED')">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>我的提交按鈕被禁用我想在輸入日期和位置欄位后啟用我嘗試過功能但沒有運氣。這是我無法弄清楚的地方，請需要幫助
my submit button is disable i want to enable once date and location field has been entered i have tried function but no luck `function testFinish(){
var datepicker = document.getElementById('datepicker');
var location = document.querySelector('location');
var btn = document.getElementById('btn');
if (location.value && datepicker.value)
btn.disabled = false;
}`
uj5u.com熱心網友回復：
你的代碼中有一堆錯誤。首先，您的位置輸入選擇器是錯誤的。您需要提供一個 id，然后通過 id 獲取元素。
你也可以用類選擇器來做到這一點，但這會讓你更加困惑。
<input class="location" id="location" type="text" placeholder="location" onkeyup="testFinish();">
var location = document.querySelector('#location');
其次，您還需要向日期選擇器輸入添加事件偵聽器（如果用戶先填充位置，然后再填充日期選擇器，該按鈕仍將被禁用。）
<input type="text" onchange="testFinish()" id="datepicker" style="width: 120px;" autocomplete="off" placeholder="Date" readonly />
下面是作業片段。
function testFinish(){
var datepicker = document.getElementById('datepicker');
var location = document.querySelector('#location');
var btn = document.getElementById('btn');
if (location && location.value && datepicker.value)
btn.disabled = false;
}<!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 class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img class="img-fluid w-100 pb-1"
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg"
width="450">
<div class="small-img-group">
<div class="small-img-col">
<img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg"
width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%"
class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%"
class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%"
class="small-img" alt="">
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6 style="padding-top: 20px;">Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2><label> Total AED:</label><input type="number" id="amount" class="total Price" readonly></label>
</h2>
<p><input type="text" onchange="testFinish()" id="datepicker" style="width: 120px;" autocomplete="off" placeholder="Date"
readonly /></p>
<div class="counter1">
<Label class="Adults">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 class="counter2">
<Label class="Children">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>
<div class="field">
<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 class="field">
<label for="currency">Currency</label>
<select class="field" id="currency">
<option value="cad">CAD</option>
<option value="eur">EUR</option>
<option value="usd">USD</option>
</select>
</div>
<input class="location" id="location" type="text" placeholder="location" onkeyup="testFinish();">
<div class="field">
<button type="submit" id="btn" name="ik" disabled onsubmit="alert('SUBMITTED')">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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/394851.html
標籤：javascript html
上一篇：反應按鈕不重新渲染組件