1. дома
  2. Вопрос и ответ
  3. скрыть поле формы, основанное на значении div

скрыть поле формы, основанное на значении div

2013-12-10 2 views
1

У меня есть следующий html, который имеет форму. Основано на значении «ccType», т.е. if (ccType == 'maestro') поле с id = "cvv", т.е. поле cvv и его метка должны быть скрыты. Я новичок в javascript, и я не знаю, как это сделать.скрыть поле формы, основанное на значении div

<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>

Также КСС

* { text-decoration: none; margin: 0; padding: 0; outline: none; box-shadow: none; box-sizing: border-box !important; -webkit-box-sizing: border-box !important; -moz- 

box-sizing: border-box !important; -ms-box-sizing: border-box !important; } 
    body { font-family: Arial; font-size: 12px; color: #263240; padding: 0px; } 
    .left { float: left; } 
    .right { float: right; } 
    .clear { clear: both; } 


    a { color: #666; } 
    a:hover { color: #333 } 

    div#credit-card 
    { 
     display: table; 
     width: 540px; 
     margin: 0 auto; 

     border: 1px solid #c1c2c8; 
     background-color: #eeeeee; 
     -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px 4px; 
    } 

    div#credit-card > header 
    { 
     padding: 10px; 
     border-bottom: 1px solid #c1c2c8; 

     background: #ffffff; /* Old browsers */ 
     background: -moz-linear-gradient(top, #ffffff 0%, #dde0e6 100%); /* FF3.6+ */ 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dde0e6)); /* Chrome,Safari4+ */ 
     background: -webkit-linear-gradient(top, #ffffff 0%,#dde0e6 100%); /* Chrome10+,Safari5.1+ */ 
     background: -o-linear-gradient(top, #ffffff 0%,#dde0e6 100%); /* Opera 11.10+ */ 
     background: -ms-linear-gradient(top, #ffffff 0%,#dde0e6 100%); /* IE10+ */ 
     background: linear-gradient(to bottom, #ffffff 0%,#dde0e6 100%); /* W3C */ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dde0e6',GradientType=0); /* IE6-9 */ 

     -webkit-border-top-left-radius: 3px; 
     -webkit-border-top-right-radius: 3px; 
     -moz-border-radius-topleft: 3px; 
     -moz-border-radius-topright: 3px; 
     border-top-left-radius: 3px; 
     border-top-right-radius: 3px; 
    } 

    div#credit-card > header .title 
    { 

     color: #666; 
     font-size: 13px; 
     padding: 15px 0; 
      margin-left:10px; 
     padding-left: 100px; 
     background: no-repeat 20px; 

     line-height: 32px; 
    } 
    div#credit-card > header .close 
    { 
     display: table; 
     float: right; 
     margin-right:30px; 
     margin-top:4px; 

    } 

    div#credit-card > header .close:hover 
    { 
     display: table; 
     float: right; 
     opacity: 1; 
    } 

    div#credit-card > header .title strong 
    { 
     color: #666; 
     font-size:12px; 
    } 

    div#credit-card > section#content 
    { 
     padding: 30px; 
    } 

    div#credit-card > section#content .table 
    { 
     display: table; 
     width: 100%; 
    } 

    div#credit-card > section#content .table > .row 
    { 
     display: table-row; 
     width: 100%; 
    } 

    div#credit-card > section#content .table > .row > div 
    { 
     display: table-cell; 
     padding-top: 15px; 
    } 

    div#credit-card > section#content .table > .row > div.label 
    { 
     min-width: 100px; 
     width: 120px; 
    } 

    div#credit-card > section#content .form-fields .label 
    { 
     color: #333; 
     font-weight: bold; 
     font-size: 12px; 
    } 

    div#credit-card > section#content .form-fields .input 
    { 
     padding-left: 0px; 
     width: 100%; 
     color: #666; 
     font-weight: bold; 
     position: relative; 
    }  

    div#credit-card > section#content .form-fields .valid 
    { 
     width: 32px; 
     text-align: left; 
     padding-left: 10px; 

     vertical-align: top; 
    } 

    div#credit-card > section#content .form-fields .valid img 
    { 
     display: block; 
     margin-top: 2px; 
    } 

    div#credit-card > section#content .form-fields .full input, div#credit-card > section#content .form-fields .full select 
    { 
     width: 100%; 
     padding: 5px; 
    } 

    div#credit-card > section#content .form-fields input, div#credit-card > section#content .form-fields select 
    { 
     background-color: #f7f7f7; 
     border: 1px solid #d4d4d4; 
     color: #717171; 
     cursor: pointer; 
     -moz-border-radius: 5px; -webkit-border-radius: 5px;border-radius: 5px 5px; 

     -moz-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.2); 
     -webkit-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.2); 
     box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.2); 
    } 

    div#credit-card > section#content .form-fields input:hover, div#credit-card > section#content .form-fields select:hover 
    { 
     -moz-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.4); 
     -webkit-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.4); 
     box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.4); 
    } 

    div#credit-card > section#content .form-fields .size50 input,div#credit-card > section#content .form-fields .size50 select 
    { 
     display: inline; 
     padding-left: 10px; 
     width: 40%; 
     padding: 5px; 
     cursor: pointer; 
     -moz-border-radius: 5px; -webkit-border-radius: 5px;border-radius: 5px 5px; 
    } 

    div#credit-card > section#content .form-fields .size50 input:not(:only-child) 
    { 
     margin-right: 19px; 
    } 

    div#credit-card > section#content .form-fields .size50 input:last-child 
    { 
     margin-right: 0; 

    } 

    div#credit-card > section#content .form-fields .size50 input:only-child 
    { 
     margin-right: 5px; 
    } 

    div#credit-card > section#content .form-fields .error 
    { 
     display: block; 
     color: #f34755; 
     font-size: 11px; 
     margin-top:5px; 
     font-weight: normal; 
    } 

    /* Style Select Boxes */ 
    span.customStyleSelectBox { -moz-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.2); box-shadow: 0 0 4px -1px 

rgba(0, 0, 0, 0.2);cursor: pointer; padding: 8px; background-color: #949494; border: 1px solid #d4d4d4; color: #717171; -moz-border-radius: 5px; -webkit-border-radius: 

5px;border-radius: 5px 5px; line-height: 11px; width: 100% !important } 
    .size50 span.customStyleSelectBox { width: 49% !important; } 
    .customStyleSelectBoxInner { padding: 7px 0; background:url(../images/arrow.png) no-repeat center right; width: 100% !important; height: 24px; } 

    input[type=submit] 
    { 
      margin-right:170px; 
     cursor: pointer; 
     padding: 12px 40px; 
     border: 1px solid #0945b9; 
     color: #fff; 
     font-weight: 900; 
     -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px 3px; 
     -moz-box-shadow: inset 0 3px 0 -2px rgba(255, 255, 255, 0.6); 
     -webkit-box-shadow: inset 0 3px 0 -2px rgba(255, 255, 255, 0.6); 
     box-shadow: inset 0 3px 0 -2px rgba(255, 255, 255, 0.6); 
     margin-bottom: 20px; 
     margin-top:20px; 


     background: #5e9af8; /* Old browsers */ 
     background: -moz-linear-gradient(top, #5e9af8 0%, #2f6af2 100%); /* FF3.6+ */ 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e9af8), color-stop(100%,#2f6af2)); /* Chrome,Safari4+ */ 
     background: -webkit-linear-gradient(top, #5e9af8 0%,#2f6af2 100%); /* Chrome10+,Safari5.1+ */ 
     background: -o-linear-gradient(top, #5e9af8 0%,#2f6af2 100%); /* Opera 11.10+ */ 
     background: -ms-linear-gradient(top, #5e9af8 0%,#2f6af2 100%); /* IE10+ */ 
     background: linear-gradient(to bottom, #5e9af8 0%,#2f6af2 100%); /* W3C */ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5e9af8', endColorstr='#2f6af2',GradientType=0); /* IE6-9 */ 
    } 

    input[type=submit]:hover 
    { 
     background: #2867ef; 
    } 

    input[type=submit]:active 
    { 
     background: #2867ef; 
    } 



input[type=radio], input[type=checkbox] { 

     display:none; 
    } 

input[type=radio] + label, input[type=checkbox] + label { 
     display:inline-block; 
     margin-left:10px; 


     margin-top:5px; 
     padding: 4px 25px; 
     margin-bottom: 0; 
     font-size: 12px; 
     line-height: 20px; 
     color: #ACACAC; 
     text-align: center; 
     font-weight:bold; 
     vertical-align: middle; 
     cursor: pointer; 
     background-color: #ACACAC; 
     background-image: -moz-linear-gradient(top,#fff,#e6e6e6); 
     background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6)); 
     background-image: -webkit-linear-gradient(top,#fff,#e6e6e6); 
     background-image: -o-linear-gradient(top,#fff,#e6e6e6); 
     background-image: linear-gradient(to bottom,#fff,#e6e6e6); 
     background-repeat: repeat-x; 
     border-color: #e6e6e6 #e6e6e6 #bfbfbf; 
     border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); 
     border-bottom-color: #b3b3b3; 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0); 
     filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); 
     -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); 
     -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); 
    } 

    input[type=radio]:checked + label, input[type=checkbox]:checked + label{ 

    margin-top:5px; 
     cursor: pointer; 

     border: 1px solid #0945b9; 
     color: white; 
     font-weight: bold; 
     -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px 3px; 
     -moz-box-shadow: inset 0 3px 0 -2px rgba(255, 255, 255, 0.6); 
     -webkit-box-shadow: inset 0 3px 0 -2px rgba(255, 255, 255, 0.6); 
     box-shadow: inset 0 3px 0 -2px rgba(255, 255, 255, 0.6); 


     background: #5e9af8; /* Old browsers */ 
     background: -moz-linear-gradient(top, #5e9af8 0%, #2f6af2 100%); /* FF3.6+ */ 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e9af8), color-stop(100%,#2f6af2)); /* Chrome,Safari4+ */ 
     background: -webkit-linear-gradient(top, #5e9af8 0%,#2f6af2 100%); /* Chrome10+,Safari5.1+ */ 
     background: -o-linear-gradient(top, #5e9af8 0%,#2f6af2 100%); /* Opera 11.10+ */ 
     background: -ms-linear-gradient(top, #5e9af8 0%,#2f6af2 100%); /* IE10+ */ 
     background: linear-gradient(to bottom, #5e9af8 0%,#2f6af2 100%); /* W3C */ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5e9af8', endColorstr='#2f6af2',GradientType=0); /* IE6-9 */ 
    } 

.cards { 
    overflow: hidden; 
} 
.cards li { 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s; 
    background-image: url('https://www.fethr.com/webapp/images/card_logos.png'); 
    background-position: 0 0; 
    float: left; 
    height: 32px; 
    margin-right: 8px; 
    text-indent: -9999px; 
    width: 51px; 
} 
.cards li:last-child { 
    margin-right: 10px; 
} 
.cards .visa_electron { 
    background-position: 204px 0; 
} 
.cards .mastercard { 
    background-position: 153px 0; 
} 
.cards .maestro { 
    background-position: 102px 0; 
} 
.cards .discover { 
    background-position: 51px 0; 
} 
.cards .visa.off { 
    background-position: 0 32px; 
} 
.cards .visa_electron.off { 
    background-position: 204px 32px; 
} 
.cards .mastercard.off { 
    background-position: 153px 32px; 
} 
.cards .maestro.off { 
    background-position: 102px 32px; 
} 
.cards .discover.off { 
    background-position: 51px 32px; 
} 
form input.valid { 
    background: url('http://paweldecowski.github.com/jQuery-CreditCardValidator/tick.png') 310px no-repeat; 
}

Пожалуйста, простите за длинный код here.I иметь скрипку http://jsfiddle.net/y8UKN/

скрипку уже есть JavaScript, который определяет ccType на основе пользовательского ввода. Не удаляйте его, пока вы жуете скрипку. Используется значение javascript для ccType. Если установленное значение «maestro», cvv должно быть hiddden

источник

2013-12-10 Anonymous

ответ

1

usin г JQuery

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

http://jsfiddle.net/trevordowdle/y8UKN/1/

Я unhid вашего поля ccType, но если вы наберете мэтр в, а затем нажмите кнопку из него вы увидите CVV пропадает.

Поэтому, когда вы нажимаете на разные карточки, если вы меняете значение, оно должно работать на вас.

Update

Вот более полный пример

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

.cards li { 
    opacity: .35; 
} 

.cards .selected { 
    opacity: 1;  
}

http://jsfiddle.net/y8UKN/3/

источник

2013-12-10 00:16:56 Trevor

+0

Im fear ur скрипка не загружается –

+0

@ user3079558 проверить мое обновление для другого примера. Он должен загружаться для вас. Интересно, вызывает ли jQuery/javascript загрузку проблемы на вашем компьютере. Попробуйте загрузить ее на другой компьютер и т. Д. – Trevor

+0

Да, ваш код работает отлично. Я добавляю «маэстро» внутри поле, которое было скрыто, и когда он потерял фокус, поле cvv скрыто. Но я добавляю javascript, который автоматически заполняет скрытое поле с помощью maestro, но он не скрывает cvv. Вы можете проверить обновленную скрипту с помощью js и js, используемый для установки поля ccType http://jsfiddle.net/y8UKN/4/ –

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

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