Когда я выбираю одно значение из выпадающего меню, появляются и другие значения - PullRequest
Новая
       27

Когда я выбираю одно значение из выпадающего меню, появляются и другие значения

0 голосов
/ 28 апреля 2020

Мне было интересно, можете ли вы помочь мне со следующим. Я создал опцию выпадающего платежа. Когда я выбираю «чековый / сберегательный счет», форма отображает 2 поля ввода, чтобы пользователь мог ввести свой номер банковского счета и номер маршрутизатора. Это то, что я хочу для этого варианта. Однако, когда я выбираю опцию кредитной карты, появляется форма кредитной карты, но поверх нее появляется банковская форма. Может кто-нибудь сказать мне, что я делаю не так? Кроме того, когда я переключаю параметры вперед и назад, формы не меняются вообще, а остаются неизменными. 

 document.getElementById('paymentOptions').onchange = function () {
        if (this.value == 'CreditCard') {
            document.getElementById('CreditCard').style.display = 'block'
        } else {
            document.getElementById('Banking').style.display = 'block';
        }
    }
 
<div class="col-75">
            <div class="container">
                <form>
                    <label>Payment method</label>
                      <select id="paymentOptions" name="paymentOptions">
                        <option value="CreditCard">Credit Card</option>
                        <option value="BankingAccount">Checking/Savings Account</option>
                      </select>
                        <div class="row" id="Banking" style="display: none">
                            <div class="col-50">
                                <label for="ccnum">Bank Account</label>
                                <input type="text" id="ccnum" name="cardnumber">
                            </div>
                            <div class="col-50">
                                <label for="ccnum">Routing Number</label>
                                <input type="text" id="ccnum" name="cardnumber">
                            </div>
                        </div>
                        <div class="row" id="CreditCard" style="display: none">
                            <div class="col-50">
                                <label for="fname"><i class="fa fa-user"></i> Company Name</label>
                                <input type="text" id="fname" name="firstname">
                                <label for="email"><i class="fa fa-envelope"></i> Email</label>
                                <input type="text" id="email" name="email">
                                <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
                                <input type="text" id="adr" name="address">
                                <label for="city"><i class="fa fa-institution"></i> City</label>
                                <input type="text" id="city" name="city">

                                <div class="row">
                                    <div class="col-50">
                                        <label for="state">State</label>
                                        <input type="text" id="state" name="state">
                                    </div>
                                    <div class="col-50">
                                        <label for="zip">Zip</label>
                                        <input type="text" id="zip" name="zip">
                                    </div>
                                </div>
                            </div>

                            <div class="col-50">
                                <label for="fname">Accepted Cards</label>
                                <div class="icon-container">
                                    <i class="fa fa-cc-visa" style="color:navy;"></i>
                                    <i class="fa fa-cc-amex" style="color:blue;"></i>
                                    <i class="fa fa-cc-mastercard" style="color:red;"></i>
                                    <i class="fa fa-cc-discover" style="color:orange;"></i>
                                </div>
                                <label for="cname">Name on Card</label>
                                <input type="text" id="cname" name="cardname">
                                <label for="ccnum">Credit card number</label>
                                <input type="text" id="ccnum" name="cardnumber">
                                <label for="expmonth">Exp Month</label>
                                <input type="text" id="expmonth" name="expmonth">
                                <div class="row">
                                    <div class="col-50">
                                        <label for="expyear">Exp Year</label>
                                        <input type="text" id="expyear" name="expyear">
                                    </div>
                                    <div class="col-50">
                                        <label for="cvv">CVV</label>
                                        <input type="text" id="cvv" name="cvv">
                                    </div>
                                </div>
                            </div>

                        </div>
                        <p>
                            <input type="checkbox" id="autopayment" />
                            <label for="autopayment">Enroll in autopayment</label>
                        </p>
                        <input type="submit" value="Submit payment" class="btn">
                </form> 
            </div>
        </div>
    </div>

Ответы [ 3 ]

1 голос
/ 28 апреля 2020

Вы должны скрыть другое значение, когда оно выбрано другими словами, переключая 

document.getElementById('paymentOptions').onchange = function() {
  if (this.value == 'CreditCard') {
    document.getElementById('CreditCard').style.display = 'block'
    document.getElementById('Banking').style.display = 'none'
  } else {
    document.getElementById('Banking').style.display = 'block';
    document.getElementById('CreditCard').style.display = 'none'
  }
}
0 голосов
/ 29 апреля 2020

Попробуйте с Jquery 3.3.1 подходом, надеясь, что это может помочь вам 

$(document).ready(function(){	
	$("#paymentOptions").on('change', function(){
			if ($(this).val() == 'CreditCard') {
            $('#CreditCard').css('display','block');
			$('#CreditCard').css('display','none');
        } else {
            $('#CreditCard').css('display','none');
			$('#CreditCard').css('display','block');
        }
	});
}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-75">
            <div class="container">
                <form>
                    <label>Payment method</label>
                      <select id="paymentOptions" name="paymentOptions">
                        <option value="CreditCard">Credit Card</option>
                        <option value="BankingAccount">Checking/Savings Account</option>
                      </select>
                        <div class="row" id="Banking" style="display: none">
                            <div class="col-50">
                                <label for="ccnum">Bank Account</label>
                                <input type="text" id="ccnum" name="cardnumber">
                            </div>
                            <div class="col-50">
                                <label for="ccnum">Routing Number</label>
                                <input type="text" id="ccnum" name="cardnumber">
                            </div>
                        </div>
                        <div class="row" id="CreditCard" style="display: none">
                            <div class="col-50">
                                <label for="fname"><i class="fa fa-user"></i> Company Name</label>
                                <input type="text" id="fname" name="firstname">
                                <label for="email"><i class="fa fa-envelope"></i> Email</label>
                                <input type="text" id="email" name="email">
                                <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
                                <input type="text" id="adr" name="address">
                                <label for="city"><i class="fa fa-institution"></i> City</label>
                                <input type="text" id="city" name="city">

                                <div class="row">
                                    <div class="col-50">
                                        <label for="state">State</label>
                                        <input type="text" id="state" name="state">
                                    </div>
                                    <div class="col-50">
                                        <label for="zip">Zip</label>
                                        <input type="text" id="zip" name="zip">
                                    </div>
                                </div>
                            </div>

                            <div class="col-50">
                                <label for="fname">Accepted Cards</label>
                                <div class="icon-container">
                                    <i class="fa fa-cc-visa" style="color:navy;"></i>
                                    <i class="fa fa-cc-amex" style="color:blue;"></i>
                                    <i class="fa fa-cc-mastercard" style="color:red;"></i>
                                    <i class="fa fa-cc-discover" style="color:orange;"></i>
                                </div>
                                <label for="cname">Name on Card</label>
                                <input type="text" id="cname" name="cardname">
                                <label for="ccnum">Credit card number</label>
                                <input type="text" id="ccnum" name="cardnumber">
                                <label for="expmonth">Exp Month</label>
                                <input type="text" id="expmonth" name="expmonth">
                                <div class="row">
                                    <div class="col-50">
                                        <label for="expyear">Exp Year</label>
                                        <input type="text" id="expyear" name="expyear">
                                    </div>
                                    <div class="col-50">
                                        <label for="cvv">CVV</label>
                                        <input type="text" id="cvv" name="cvv">
                                    </div>
                                </div>
                            </div>

                        </div>
                        <p>
                            <input type="checkbox" id="autopayment" />
                            <label for="autopayment">Enroll in autopayment</label>
                        </p>
                        <input type="submit" value="Submit payment" class="btn">
                </form> 
            </div>
        </div>
    </div>
0 голосов
/ 29 апреля 2020

Причина проблем, с которыми вы сталкиваетесь, заключается в том, что вы изменяете отображение ваших CreditCard div и Banking div на блокирование, но вы не изменяете их обратно на display: none, если они не выбраны. Также вы должны добавить onload слушателя, чтобы проверить, каково начальное значение вашего paymentOptions раскрывающегося списка, чтобы затем изменить отображаемое значение ваших 2 делений. 

window.onload = () => {
        const paymentOptionsSelect = document.getElementById("paymentOptions");

        const selectedOption = paymentOptionsSelect.options[paymentOptionsSelect.selectedIndex].value;
        if (selectedOption == 'CreditCard') {
            document.getElementById('CreditCard').style.display = 'block'
            document.getElementById('Banking').style.display = 'none';
        }
        else {
            document.getElementById('Banking').style.display = 'block';
            document.getElementById('CreditCard').style.display = 'none'
        }
    };

Внимательно посмотрите на 2 добавленные строки в Ваш слушатель изменений: 

document.getElementById('paymentOptions').onchange = function () {
        if (this.value == 'CreditCard') {
            document.getElementById('CreditCard').style.display = 'block'
            document.getElementById('Banking').style.display = 'none'; // set back to display none when CreditCard is not selected.
        } else {
            document.getElementById('Banking').style.display = 'block';
            document.getElementById('CreditCard').style.display = 'none' // set back to display none when Banking is not selected.
        }
    }

Удачи!

...