0

My submit button is disable. I want to enable it once the date and location fields have been entered. I have tried the following function, but it is not working.

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>
OldBuildingAndLoan
  • 2,801
  • 4
  • 32
  • 40
MZain Asif
  • 59
  • 6

1 Answers1

1

You had bunch of errors in your code. First your selector for location input was wrong. you need to provide an id and then get the element by the id.

you could also do that with class selector but that will confuse you more.

 <input class="location" id="location" type="text" placeholder="location" onkeyup="testFinish();">         

var location = document.querySelector('#location');

secondly you need to add event listener to the datepicker input as well (in case the user fills the location first and date picker later, the button will still be disabled.)

<input type="text" onchange="testFinish()" id="datepicker" style="width: 120px;" autocomplete="off" placeholder="Date" readonly />

Below is the working snippet.

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>
anees
  • 1,777
  • 3
  • 17
  • 26
  • thanks buddy. lot more to learn i guess – MZain Asif Dec 27 '21 at 18:52
  • no problem.. keep up the good work :) – anees Dec 27 '21 at 18:53
  • hi sorry to bother you and i agree i should ask separate question but thing is its just related to your answer so i am continuing here. i was using it and suddenly i got to know that we can avoid location and enable submit button by entering date and just write some letter in location in put once submit button is enable we can erase input and its is still enable – MZain Asif Jan 02 '22 at 16:59
  • I didn't quite understand your point ... but you can ask another question and mention me there ... I will answer you .. – anees Jan 02 '22 at 22:33
  • https://stackoverflow.com/questions/70560677/disable-btn-stays-enable-once-i-enter-location-and-erase-it – MZain Asif Jan 03 '22 at 00:11