Javascript 基于div的值隐藏表单字段_Javascript_Jquery_Html_Css

Javascript 基于div的值隐藏表单字段

javascript jquery html css

Javascript 基于div的值隐藏表单字段,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有下面的html，它有一个表单。基于“ccType”的值，即if（ccType=='maestro'） id为“cvv”的字段，即cvv字段及其标签应该隐藏。我是javascript新手，不知道如何才能做到这一点 <body> <div id="credit-card"> <header> <span class="title" style="background-image:

我有下面的html，它有一个表单。基于“ccType”的值，即if（ccType=='maestro'） id为“cvv”的字段，即cvv字段及其标签应该隐藏。我是javascript新手，不知道如何才能做到这一点

<body>


    <div id="credit-card">
        <header>
                       <span class="title" style="background-image: url('images/fethrpowered.png')"><strong>This is a secure 128-bit SSL Encrypted payment.You're safe !</strong></span>
            <a><span class="close"><img src="images/lock.png"/></span></a>



        </header>
        <section style="margin-left:60px">

     <input type="radio" id="radio1" name="radios" value="radio1" checked>
   <label for="radio1">Credit Card</label>

<input type="radio" id="radio2" name="radios" value="radio2">
   <label for="radio2">Debit Card</label>

    <input type="radio" id="radio3" name="radios"value="radio3">
   <label for="radio3">Internet Banking</label>
    </section>
        <section id="content">


            <form method="post" action='./php/TokenProcess.php'  id="cardpayment">
<input id="txtEncryptionKey" name="txtEncryptionKey" class="tokenex_encryptionkey"
        type="hidden" value="MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA8gGPMwBRPuVyJReZGIkW
H/+Bf5pnpDN1bSR2cLYLXVT8CaSnTw74qeboSnktgYCi1D9R3Bj2fYzTIwGGZb8K
inLdxwbqZmHwrE9cFhCaHbG/E0PbqQGhXP2vbniZTT4M0i0Cbi7ES3Bw5zqNbIZZ
nX041QEpxLvIyWPKZCX+fBogNMhWfCF779aclChjHkwZMsufThVWE9xklWGxXiyt
x5aL4I5JPxq0I7cAkZGGs4aF/GxWwPaq7R3wPikJQ0YHnCMfcURzl2Hnw/inqyMy
+JB6djTq2/BdzMAhWTh3cDWq9Xu+gEkb/QCd0n1yYIdKuDISlk/AfHdWe34IvzhV
yQIDAQAB
 " />



    <div style="float:right;">
     <input type='hidden' id='ccType' name='ccType'/>
            <ul class="cards">
            <li class="visa">Visa</li>
            <li class="visa_electron">Visa Electron</li>
            <li class="mastercard">MasterCard</li>
            <li class="maestro">Maestro</li>                   
            </ul>
    </div>

    <div class="table form-fields">                   
 <div class="row">
        <div class="label">Card Number:</div>
                        <div class="input full"><input type="text"  name="ccnumber" id="ccnumber" data-validation="length" data-validation-length="min14" class="tokenex_data" data-validation-error-msg="Enter a valid card number" placeholder="4242424242424242"/><br/></div>


</div>



                    <div class="row name">
                        <div class="label">Expires On:</div>
                        <div class="input size50">
                            <select name="expiry_month" id="expiry_month" class="styled" data-validation="required">
<option selected>Select Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
                            </select>
    <select name="expiry_year" id="expiry_year" class="styled" data-validation="required">
<option selected>Select Year</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>                          <option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>   

                        </div>
                        <div class="valid"></div>
                    </div>
                    <div class="row name">
                        <div class="label">CVV Number:</div>
                        <div class="input full"><input type="text" name="cvv" id="cvv" placeholder="123" maxlength="3" data-validation="number" data-validation-error-msg="Enter 3 digit CVV"/></div>
                    </div>


                    <div class="row name">
                        <div class="label">Amount:</div>
                        <div class="input full"><input type="text" name="amount" id="amount" placeholder="10.00" data-validation="number" data-validation-allowing="float" data-validation-error-msg="Enter an amount as 00.00" /></div>
                    </div>

                    <div class="row">
                                                <div class="label">Your name:</div>
                        <div class="input full"><input type="text" name="name_on_card" id="name_on_card" data-validation="required" data-validation-error-msg="Enter Name as on card" placeholder="Enter the name as mentioned on the card"/></div>


                    </div>


                    <div class="row name">
                        <div class="label">Email:</div>
                        <div class="input full"><input type="text" name="email" id="email" placeholder="Enter your Email ID" data-type="email" data-validation="email"data-validation-error-msg="Enter a valid e-mail"></div>
                    </div>

                    <div class="row name">
                        <div class="label">Mobile Number:</div>
                        <div class="input full"><input type="text" name="mobileNo" id="mobileNo" maxlength="10" data-validation="number" data-validation-error-msg="Enter a valid 10 digit mobile number" placeholder="Enter mobile number" data-type="number"  /></div>
                    </div>


                    <input type="hidden" name="merchant_id">
                       <input type="hidden" name="customerReferenceNo">

                    </div>

                 <input type="hidden" name="selectedRadioValue" id="selectedRadioValue" />

                <input type="submit" name="btn_process" id="btn_process" class="tokenex_submit" style="float:right" value="Pay Now"/>
            </form>

    <form method="post" action='./php/IB.php' id="internetpayment" style="margin-top:30px">


    <div class="table form-fields">     

        <div class="row name">
                        <div class="label">Name:</div>
                        <div class="input full"><input type="text" name="name" id="Name" data-validation="required" data-validation-error-msg="Enter your name" placeholder="Enter your name"/></div>
                    </div>

        <div class="row name">
                        <div class="label">Email:</div>
                        <div class="input full"><input type="text" name="email" data-required="true" data-type="email" data-validation="email"data-validation-error-msg="Enter a valid e-mail" id="email" placeholder="Enter Email address"/></div>
                    </div>

                    <div class="row name">
                <div class="label">Mobile Number:</div>
                        <div class="input full"><input type="text" data-validation="number" data-required="number" maxlenth="10" name="Mobile Number" id="mobileNo" data-validation-error-msg="Enter a valid 10digit mobile number" placeholder="Enter your mobile number"/></div>


                    </div>
                    <div class="row name">
                        <div class="label">Bank:</div>
                        <div class="input size50">

 <select name="BankId" class="styled" data-required="true" data-trigger="change">
                    <option value="CORP">CORPORATION </option>
                    <option value="HDFC"> HDFC </option>
                    <option value="ICICI"> ICICI </option>
                    <option value="IDBI"> IDBI </option>
                    <option value="SBI"> STATE BANK OF INDIA </option>
                    <option value="DB"> DEUTSCHE </option>
            </select>


                        </div>
                        <div class="valid"></div>
                    </div>
                    <div class="row name">
                        <div class="label">Amount:</div>
                        <div class="input size50"><input type="text" name="amount" id="amount" data-required="true" placeholder="10.00" data-type="float" data-validation="number"data-validation-allowing="float" data-validation-error-msg="Enter amount as 00.00"/></div>
                    </div>
                </div>
                <input type="submit" style="float:right" value="Pay Now" class="token_submit" id="btn_process" name="btn_process"/>
            </form>

请原谅这里的密码太长，我有小提琴

小提琴已经有了一个基于用户输入检测ccType的javascript。当你按下小提琴时不要删除它。使用该javascript设置ccType的值。如果设置值为“maestro”，则应使用jQuery隐藏cvv

$('#ccType').change(function(){
    if($(this).val() == 'maestro')
        $('#cvv').closest('.name').hide(); 
    else
        $('#cvv').closest('.name').show();
});

我取消隐藏您的ccType字段，但如果您输入maestro，然后单击退出，您将看到cvv dissapear

因此，当你点击不同的卡片时，如果你正在更改值，那么它应该适合你

更新

下面是一个更完整的示例

jQuery

$('.cards li').click(function(){
    $('.cards li').removeClass('selected');
    $(this).addClass('selected');
    $('#ccType').val($(this).html());
    if($('#ccType').val() == 'Maestro')
        $('#cvv').closest('.name').hide(); 
    else
        $('#cvv').closest('.name').show();
});

CSS

使用jQuery

$('#ccType').change(function(){
    if($(this).val() == 'maestro')
        $('#cvv').closest('.name').hide(); 
    else
        $('#cvv').closest('.name').show();
});

我取消隐藏您的ccType字段，但如果您输入maestro，然后单击退出，您将看到cvv dissapear

因此，当你点击不同的卡片时，如果你正在更改值，那么它应该适合你

更新

下面是一个更完整的示例

jQuery

$('.cards li').click(function(){
    $('.cards li').removeClass('selected');
    $(this).addClass('selected');
    $('#ccType').val($(this).html());
    if($('#ccType').val() == 'Maestro')
        $('#cvv').closest('.name').hide(); 
    else
        $('#cvv').closest('.name').show();
});

CSS

恐怕您的小提琴没有上弦up@user3079558检查我的更新以了解另一个示例。它应该为你装上。。我想知道jQuery/javascript是否导致在您的计算机上加载问题。。试着将它加载到另一台计算机上等等。是的，你的代码工作得很好。是的，当我在字段中添加“maestro”时，它是隐藏的，当它失去焦点时，cvv字段是隐藏的。但是我添加了javascript，它会自动用maestro填充隐藏字段，但是它并没有隐藏cvv。你能用你的js和用于设置ccType字段的js检查更新后的小提琴吗？比如：

if（$（“.cards li:not（'.off'））。length==1{$（''ccType'）。val（$（“.cards li:not（'.off'））。attr（'class'）；if（$（'.'ccType'）。val（）='maestro'）（'cvv'）。最近（'name'））.hide（）；else$（'#cvv'）。最近（'.name'）。show（）；}

恐怕您的小提琴没有加载up@user3079558检查我的更新以了解另一个示例。它应该为你装上。。我想知道jQuery/javascript是否导致在您的计算机上加载问题。。试着将它加载到另一台计算机上等等。是的，你的代码工作得很好。是的，当我在字段中添加“maestro”时，它是隐藏的，当它失去焦点时，cvv字段是隐藏的。但是我添加了javascript，它会自动用maestro填充隐藏字段，但是它并没有隐藏cvv。你能用你的js和用于设置ccType字段的js检查更新后的小提琴吗？比如：

if（$（“.cards li:not（'.off'））。length==1{$（''ccType'）。val（$（“.cards li:not（'.off'））。attr（'class'）；if（$（'.'ccType'）。val（）='maestro'）（'cvv'）。最近（'name'））.hide（）；else$（'#cvv'）。最近（'.name'）。show（）；}