2016-04-10 22 views
2

フォームにクリックされた内容に基づいて値を変更しようとしているところに問題があります。以下の画像でわかるように、ifステートメントで値を変更する方法

ここに、ページが最初に読み込まれたときの様子があります。私はそれがenter image description here

良いですし、それが良いです、背景色を切り替え他のボタンの上に私をクリックしたときに色を変更するカスタム入力ボックスをクリックして enter image description here

enter image description here

が、私は、ボタンのほかに、画面上の任意の場所をクリックすると、その後、背景色が残っています。そこボックスに入力された値ではないと、ユーザーが画面上の任意の場所をクリックした場合、私は値が自動的にここ50 enter image description here

のデフォルトを返すようにしたい私のjQueryのです:

var defaultValue = 50; 

$(document).ready(function() { 

$('#donation-amount').keyup(function() { 
     this.value = this.value.replace(/[^0-9\.]/g,''); 

     if($(this).val()) { 
     $('#display-amount').text($(this).val()); 
    } else { 
     $('#display-amount').text(defaultValue); 
     $("#default").addClass('active'); 
     $("#btn2").removeClass('active'); 
     $("#btn3").removeClass('active'); 
    } 
}); 

    $(".selectvalue").click(function() { 
     $('#display-amount').text($(this).val()); 
    }); 

    $(".buttons .btn").click(function(){ 
     $(".buttons .btn").removeClass('active'); 
     $(this).toggleClass('active'); 
     $('#donation-amount').css("background-color","") 
    }); 
$("#donation-amount").click(function() { 

     if ($(this).hasClass('inpt-first')) { 
      $(this).css("background-color", "#c97e06"); 
      // $('#donation-amount').text('--'); 
      $("#default").removeClass('active'); 
      $("#btn2").removeClass('active'); 
      $("#btn3").removeClass('active'); 
      $('#display-amount').text('--'); 
     } 

     else{ 
      $(this).css("background-color","") 
      $("#default").addClass('active'); 
      $(this).removeClass('inpt-first'); 

     } 

    }); 

    $('#display-amount').text($('#default').val()); 

}); 

とここに私のhtmlです:

<div class="form-container"> 
<div class="donate-heading text-center"> 
    <h1>Donate Now!</h1> 
</div> 
<div class="form-content"> 

<form action="" method="POST" id="payment-form"> 
    <span class="payment-errors"></span> 

    <div class="content-inner"> 
    <div class="row"> 
    <div class="form-group"> 
     <fieldset> 
     <legend class="text-center">How much would you like to donate</legend> 
     <div class="choose-pricing"> 
      <div class="btn-group"> 
      <div class="buttons"> 
      <button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50">50</button> 
      <button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100">100</button> 
      <button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150">150</button> 
      <input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom"> 
      </div> 
      <input type="hidden" name="donation-amount-value" id="donation-amount-value"> 
      </div> 
      <div class="money-donate"> 
      <div class="display-amount" id="display-amount"> 
      </div> 
      </div> 
     </div> 
     </fieldset> 
    </div> 
    </div> 
    <legend class="text-center">Enter your card details</legend> 
    <span class="full">Enter yor 16 digit card number:</span> 
    <div class="credit-card-num"> 
    <input type="text" name="cardNumber" id="creditCardNumber" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="XXXX-XXXX-XXXX-XXXX" data-stripe="number"> 
    </div> 
    <div class="text-center"> 
    <div class="date-wrapper"> 
    <div class="month"> 
     <span class="full">Month & Year of Expiry:</span> 
     <select name="month" id="expMonth" class="selectBox chzn-done" data-stripe="exp-month"> 
     <option data-stripe="cvc">Select Month</option> 
     <option value="1">1</option> 
     </select> 
     <div id="expMonth_chzn" class="chzn-container chzn-container-single"> 
     <a href="javascript:void(0)" class="chzn-single" tabindex="-1"> 
     </a> 
     </div> 
     <select name="year" id="expYear" class="selectBox chzn-done" data-stripe="exp-year"> 
     <option value="">Select Year</option> 
     <option value="1">1</option> 
     </select> 
    </div> 
    <div class="cvn"> 
     <span class="full">Card Verrification Number 
     <a href="#" class="tooltip"> 
      <img src="/wp-content/themes/creativeforces/images/question.png" alt="question"> 
     </a> 
     <div class="tooltip-hover"> 
      <img src="" alt=""> 
     </div> 
     </span> 
     <input type="password" name="cardVeriNum" id="cardVeriNum"> 
    </div> 
    </div> 
    </div> 
    <fieldset class="personal-detail"> 
    <legend class="text-center">Personal Details</legend> 
    <div class="row"> 
     <div class="form-group"> 
     <input type="text" name="name" class="form-control" id="name" placeholder="First Name"> 
     <input type="text" name="last_name" class="form-control" id="last_name" placeholder="Last Name"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group"> 
     <input type="text" name="email" class="form-control" id="email" placeholder="Email"> 
     </div> 
    </div> 
     <div class="row"> 
     <div class="form-group"> 
     <!-- <textarea name="address" class="form-control" id="address">Address</textarea> --> 
     <textarea name="notes" class="form-control" id="add-note" placeholder="Additional Notes"></textarea> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group button"> 
     <div class="text-center"> 
     <button id="donate-btn" value="Donate" class="btn btn-default">Donate</button> 
     </div> 
     </div> 
    </div> 
    </fieldset> 
    </div> 
</form> 
</div> 
    </div> 

答えて

2

JSFiddleです。

スクリプトに次のスクリプトを追加します。

$('#donation-amount').blur(function() { 
    $(this).attr('style', ''); 
    if($(this).val() == null || $(this).val() == 'Custom') { 
    $('button.selectvalue:first-child').addClass('active'); 
    $('#display-amount').text(50); 
    } 
}); 
+0

進歩しています!だから、ページのどこかをクリックすると背景色が消えてしまいますが、残念ながら50が表示量に表示されず、背景色がデフォルトのボタンを返さないのです。 – avasssso

+0

私はうまくいくはずです。 – Harish

+0

はい!背景色がデフォルトに切り替えられましたが、#display-amountに50が表示されない理由はわかりません。自動的にディスプレイ50に切り替わるわけではありません。 – avasssso

関連する問題