Почему этот javascript не работает?

-4

У меня есть JavaScript, чтобы скрыть поле ввода элемента в зависимости от значения в скрытом полеПочему этот javascript не работает?

<script type="text/javascript" charset="utf-8"> 

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

    </script>

Но это не скрывает элемент Я хочу

здесь HTML

<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>| todo</title> 
     <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     <link rel="stylesheet" href="css/bootstrap2.css"> 
     <link rel="stylesheet" href="css/bootstrap-select.css"> 
     <link rel="stylesheet" href="css/animate.css"> 
     <link rel="stylesheet" href="css/font-awesome.min.css"> 
     <link rel="stylesheet" href="css/font.css" cache="false"> 
     <link rel="stylesheet" href="js/fuelux/fuelux.css"> 
     <link rel="stylesheet" href="css/plugin.css"> 
     <link rel="stylesheet" href="css/app2.css"> 
     <link rel="stylesheet" href="css/cards.css"> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
     <script type="text/javascript" src="https://api.njj.com/inpage/js/tokenex-client.min.js"></script> 
     <script type="text/javascript"> 
      window.onload = function getApp() { 
       var thisURL = window.location.href; 
       var thisSession = new Array(); 
       thisSession = thisURL.split("?"); //This grabs all URL parameters 
       var session = thisSession[1]; 
       thisSession = session.split("="); //This gets the session ID from URL 
       if (thisSession[0] == 'merchant_id') { 
        var thisApp = new Array(); 
        thisApp = thisSession[1].split("&"); 
        var webapi_MerchantID = thisApp[0]; 
        thisApp = thisSession[2].split("&"); 
        var passkey = thisApp[0]; 
        thisApp = thisSession[3].split("&"); 
        var amt = thisApp[0]; 
        thisApp = thisSession[4].split("&"); 
        var email = thisApp[0]; 
        thisApp = thisSession[5].split("&"); 
        var mobileNo = thisApp[0]; 
        thisApp = thisSession[6].split("&"); 
        var orderID = thisApp[0]; 
        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
         xmlhttp = new XMLHttpRequest(); 
        } else { // code for IE6, IE5 
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        xmlhttp.onreadystatechange = function() { 
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
          result = xmlhttp.responseText; 
          thisSession = result.split("&"); 
          if (thisSession[0] != 0) { 
           var amount = parseFloat(thisSession[0]).toFixed(2); 
           var x = document.getElementsByName('amount'); 
           for (var i = 0; i < x.length; i++) { 
            x[i].value = amount; 
           } 
          } 
          var x = document.getElementsByName('merchant_id'); 
          for (var i = 0; i < x.length; i++) { 
           x[i].value = thisSession[1]; 
          } 
          var x = document.getElementsByName('customerReferenceNo'); 
          for (var i = 0; i < x.length; i++) { 
           x[i].value = thisSession[2]; 
          } 
          var x = document.getElementsByName('email'); 
          for (var i = 0; i < x.length; i++) { 
           x[i].value = thisSession[3]; 
          } 
          var x = document.getElementsByName('mobileNo'); 
          for (var i = 0; i < x.length; i++) { 
           x[i].value = thisSession[4]; 
          } 
         } 
        } 
        xmlhttp.open("GET", "initiateConnctPay.php?merchant_id=" + webapi_MerchantID + "&passkey=" + passkey + "&amount=" + amt + "&email=" + email + "&mobileNo=" + mobileNo + "&orderID=" + orderID, true); 
        xmlhttp.send(); 
       } else if (thisSession[0] == 'button_id') { 
        var button_id = thisSession[1]; 
        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
         xmlhttp = new XMLHttpRequest(); 
        } else { // code for IE6, IE5 
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        xmlhttp.onreadystatechange = function() { 
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
          result = xmlhttp.responseText; 
          thisSession = result.split("&"); 

          if (thisSession[0] != 0) { 
           var amount = parseFloat(thisSession[0]).toFixed(2); 
           var x = document.getElementsByName('amount'); 
           for (var i = 0; i < x.length; i++) { 
            x[i].value = amount; 
           } 
          } 
          var x = document.getElementsByName('merchant_id'); 
          for (var i = 0; i < x.length; i++) { 
           x[i].value = thisSession[1]; 
          } 
          var x = document.getElementsByName('customerReferenceNo'); 
          for (var i = 0; i < x.length; i++) { 
           x[i].value = thisSession[2]; 
          } 
         } 
        } 
        xmlhttp.open("GET", "initiateButtonPay.php?button_id=" + button_id, true); 
        xmlhttp.send(); 
       } else if (thisSession[0] == 'inv_no') { 
        var inv_no = thisSession[1]; 
        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
         xmlhttp = new XMLHttpRequest(); 
        } else { // code for IE6, IE5 
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        xmlhttp.onreadystatechange = function() { 
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
          result = xmlhttp.responseText; 
          thisSession = result.split("&"); 

          if (thisSession[0] != 0) { 
           var amount = parseFloat(thisSession[0]).toFixed(2); 
           var x = document.getElementsByName('amount'); 
           for (var i = 0; i < x.length; i++) { 
            x[i].value = amount; 
           } 
          } 
          var x = document.getElementsByName('merchant_id'); 
          for (var i = 0; i < x.length; i++) { 
           x[i].value = thisSession[1]; 
          } 
          var x = document.getElementsByName('customerReferenceNo'); 
          for (var i = 0; i < x.length; i++) { 
           x[i].value = thisSession[2]; 
          } 
          var x = document.getElementsByName('email'); 
          for (var i = 0; i < x.length; i++) { 
           x[i].value = thisSession[3]; 
          } 
         } 
        } 
        xmlhttp.open("GET", "initiateInvoicePay.php?inv_no=" + inv_no, true); 
        xmlhttp.send(); 
       } else if (thisSession[0] == 'resrvCode') { 

       } else if (thisSession[0] == 'collctCode') { 

       } else { 
        alert("You are unauthorized to use this application!"); 
        document.getElementById("btn_process").disabled = true; 
        document.getElementById("nb_process").disabled = true; 
       } 
      } 
     </script> 
    </head> 

    <body> 
     <section id="content" class="m-t-lg wrapper-md animated fadeInDown"> 
      <div class="row m-n"> 
       <div class="col-md-4 col-md-offset-4 m-t-lg"> 
        <section class="panel"> 
         <header class="panel-heading bg-light"> 
          <ul class="nav nav-tabs nav-justified"> 
           <li class="active" id="cc"><a style="font-size:15px;font-weight:500;" href="#home" data-toggle="tab">Credit Card</a> 
           </li> 
           <li id="db"><a style="font-size:15px;font-weight:500;" href="#home" data-toggle="tab">Debit Card</a> 
           </li> 
           <li><a style="font-size:15px;font-weight:500;" href="#messages" data-toggle="tab">Internet Banking</a> 
           </li> 
          </ul> 
         </header> 
         <div class="panel-body"> 
          <div class="tab-content"> 
           <div class="tab-pane active" id="home"> 
            <form method="post" action="./TokenProcess.php" id="cardpayment"> 
             <input id="txtEncryptionKey" name="txtEncryptionKey" class="tokenex_encryptionkey" <input id="txtEncryptionKey" name="txtEncryptionKey" class="tokenex_encryptionkey" type="hidden" value="MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA8gGPMwBRPuVyJReZGIkW 
H/+Bf5pnpDN1bSR2cLYLXVT8CaSnTw74qeboSnktgYCi1D9R3Bj2fYzTIwGGZb8K 
inLdxwbqZmHwrE9cFhCaHbG/fcURzl2Hnw/inqyMy 
+JB6djTq2/BdzMAhWTh3cDWq9Xu+gEkb/QCd0n1yYIdKuDISlk/AfHdWe34IvzhV 
yQIDAQAB 
" /> 
             <div class="form-group" style="margin-left:0px"> 
              <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="form-group"> 
              <label class="control-label">Card Number</label> 
              <input type="text" name="ccnumber" id="ccnumber" placeholder="411111111111111" class="form-control tokenex_data"> 
             </div> 
             <div class="form-group"> 
              <label class="control-label">CVV</label> 
              <input type="password" id="cvv" name="cvv" placeholder="123" class="form-control"> 
             </div> 
             <div class="form-group"> 
              <label class="control-label" style="display:inline;">Expiry</label> 
              <div class="clearfix"> 
               <div class="inline pull-left m-r"> 
                <div style="height:30px"> 
                 <select class="selectpicker" id="expiry_month" name="expiry_month"> 
                  <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> 
                </div> 
               </div> 
               <div class="inline pull-left m-r"> 
                <div style="height:30px"> 
                 <select class="selectpicker" id="expiry_year" name="expiry_year"> 
                  <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> 
              </div> 
             </div> 
             <div class="form-group"> 
              <label class="control-label">Amount</label> 
              <input type="text" name="amount" id="amount" placeholder="100.00" class="form-control"> 
             </div> 
             <div class="form-group"> 
              <label class="control-label">Name on card</label> 
              <input type="text" name="name_on_card" id="name_on_card" placeholder="Enter name as on card" class="form-control"> 
             </div> 
             <div class="form-group"> 
              <label class="control-label">Email</label> 
              <input type="text" name="email" id="email" placeholder="Enter your Email" class="form-control"> 
             </div> 
             <div class="form-group"> 
              <label class="control-label">Mobile Number</label> 
              <input type="text" name="mobileNo" id="mobileNo" placeholder="Enter your mobile number" class="form-control"> 
             </div> 
             <div class="form-group"> 
              <input type="hidden" name="merchant_id"> 
              <input type="hidden" name="customerReferenceNo"> 
              <input type="hidden" name="selectedRadioValue" class="selectedRadioValue"> 
             </div> 
             <div style="margin-left:35%"> 
              <button type="submit" id="btn_process" name="btn_process" class="btn btn-info tokenex_submit">Pay Now</button> 
             </div> 
             <div class="line line-dashed"></div> 
             <div> 
              <div style="float:left;margin-right:7%;"> 
               <img src="http://www.fethr.com/webapp/images/lock.png"> 
              </div> 
              <p style="display:inline;"><small>Your card details are secured via 128 bit encryption</small> 
              </p> 
             </div> 
            </form> 
           </div> 
           <div class="tab-pane" id="messages"></div> 
          </div> 
         </div> 
        </section> 
       </div> 
      </div> 
     </section> 
     <script src="js/jquery.min.js"></script> 
     <!-- Bootstrap --> 
     <script src="js/bootstrap.js"></script> 
     <!-- App --> 
     <!-- Fuelux --> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script src="js/bootstrap-select.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('.selectpicker').selectpicker({ 
        style: 'btn btn-white btn-sm' 
       }); 
      }); 
     </script> 
     <script type="text/javascript" src="https://api.toke.com/inpage/js/tokenex-client.min.js"></script> 
     <script type="text/javascript"> 
      $(function() { 
       $('button').on('click', function() { 
        if ($("#cc").hasClass("active")) { 
         $('.selectedRadioValue').val('radio1'); 
        } else if ($("#db").hasClass("active")) { 
         $('.selectedRadioValue').val('radio2'); 
        } 
       }); 
      }); 
     </script> 
     <script type="text/javascript" charset="utf-8"> 
      $('#ccType').change(function() { 
       if ($(this).val() == 'maestro') $('#cvv').closest('.name').hide(); 
       else $('#cvv').closest('.name').show(); 
      }); 
     </script> 
     <script src="js/cardvalidation.js"></script> 
    </body> 

</html>

источник

2013-12-21 Anonymous

Не могли бы вы уточнить свой вопрос и предоставить только код, который абсолютно необходим. –

Я просто дал полный html, чтобы проверить, противоречит ли какой-либо другой скрипт этому –

. Как вы заполняете '# cctype'? это скрытое поле ввода. – putvande

У вас нет класса «имя», поэтому ближайший не может найти соответствия ... Попробуйте это вместо:

<script type="text/javascript" charset="utf-8"> 
     $('#ccType').change(function() { 
      if ($(this).val() == 'maestro') 
       $('#cvv').hide(); 
      else 
       $('#cvv').show(); 
     }); 
    </script>

источник

2013-12-21 21:12:55 Jimmyt1988

Я использовал тот же скрипт в другом html, который почти схож с этим, и он работал, когда используется обмен, поскольку, если значение скрытого поля изменяется, тогда скрипт должен работать –

Прохладный, дайте мне секунду. посмотрите на это правильно на моем рабочем столе .. loo ноутбуки бесполезны для этого – Jimmyt1988

да, конечно:), .... –

Почему этот javascript не работает?

ответ

Смежные вопросы