Automatische Auswahl basierend auf Zahlenwert

Question

Ich versuche, ein Spendenformular zu erstellen, aber ich scheitere bei der benutzerdefinierten Eingabe Betragsfeld.

Ich habe vordefinierte Auswahl-Option, die der Benutzer 5, 7 und 14 aber ein benutzerdefiniertes Feld auswählen kann.

Was ich erreichen möchte:

Wenn jemand mehr als 14 im benutzerdefinierten Feld betritt, sollte er es akzeptieren, wenn sie in einer Menge ein, die bereits in der vorgegebenen Liste ist, sollte es Wählen Sie die Schaltfläche, wenn sie einen Betrag eingeben, der nicht in dieser Liste enthalten ist, sollte nur eine Warnung ausgegeben werden.

HTML

<form class="donate" novalidate="" autocomplete="on" method="POST"> 
    <div> 
    <input type="radio" name="amount" id="amount_3" value="3" tabindex="10"/> 
    <label for="amount_3">£3</label>  
    </div> 
    <div> 
    <input type="radio" name="amount" id="amount_5" value="5" tabindex="10"/> 
    <label for="amount_5">£5</label>  
    </div> 
    <div> 
    <input type="radio" name="amount" id="amount_10" value="10" tabindex="50"/> 
    <label for="amount_10">£10</label>  
    </div> 
    <div> 
    <label for="amount_other">Enter Other Amount</label> 
    <input type="tel" name="amount_other" id="amount_other" placeholder="Enter Other Amount" tabindex="18"/> 
    </div> 
    <div> 
    <input type="checkbox" name="amount_reoccuring" id="amount_reoccuring"/> 
    <label for="amount_reoccuring"><span></span> Make this a reoccuring donation.</label> 
    </div> 
</form> 

JQuery

$('form').submit(function (e) { 
    e.preventDefault(); 
}); 

$('.amount label').on('click', function() { 
    var dollarAmount = parseInt($(this).text().replace('£', ''), 10); 
    var impactAmount = parseInt(dollarAmount/10, 10); 

    $('.impact-amount').text('£' + dollarAmount); 
    $('#amount_other').val(''); 
}); 

$('#amount_other').keyup(function() { 
    var dollarAmount = $(this).val(); 
    var impactAmount = parseInt(dollarAmount/10, 10); 

    $('.impact-amount').text('£' + dollarAmount); 
    $('.amount input[type=radio]').prop('checked', false); 
}); 

$('.amount label').on('click', function() { 
 
    var dollarAmount = parseInt($(this).text().replace('£', ''), 10); 
 
    var impactAmount = parseInt(dollarAmount/10, 10); 
 

 
    $('.impact-amount').text('£' + dollarAmount); 
 
    $('#amount_other').val(''); 
 
}); 
 

 
$('#amount_other').keyup(function() { 
 
    var dollarAmount = $(this).val(); 
 
    var impactAmount = parseInt(dollarAmount/10, 10); 
 

 
    $('.impact-amount').text('£' + dollarAmount); 
 
    $('.amount input[type=radio]').prop('checked', false); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form class="donate" novalidate="" autocomplete="on" method="POST"> 
 
    <div class="amount"> 
 
    <input type="radio" name="amount" id="amount_5" value="5" tabindex="10"/> 
 
    <label for="amount_5">£5</label>  
 
    </div> 
 
    <div class="amount"> 
 
    <input type="radio" name="amount" id="amount_7" value="7" tabindex="10"/> 
 
    <label for="amount_7">£7</label>  
 
    </div> 
 
    <div class="amount"> 
 
    <input type="radio" name="amount" id="amount_14" value="14" tabindex="50"/> 
 
    <label for="amount_14">£14</label>  
 
    </div> 
 
    <div class="amount"> 
 
    <label for="amount_other">Enter Other Amount</label> 
 
    <input type="tel" name="amount_other" id="amount_other" placeholder="Enter Other Amount" tabindex="18"/> 
 
    </div> 
 
    <div class="amount"> 
 
    <input type="checkbox" name="amount_reoccuring" id="amount_reoccuring"/> 
 
    <label for="amount_reoccuring"><span></span> Make this a reoccuring donation.</label> 
 
    </div> 
 
</form>

Answer 1

Unten finden Sie den Code ein:

$('.amount label').on('click', function() { 
 
    var dollarAmount = parseInt($(this).text().replace('£', ''), 10); 
 
    var impactAmount = parseInt(dollarAmount/10, 10); 
 

 
    $('.impact-amount').text('£' + dollarAmount); 
 
    $('#amount_other').val(''); 
 
}); 
 

 
$('#amount_other').keyup(function() { 
 
    var flag = 0; 
 
    var dollarAmount = $(this).val(); 
 
    var impactAmount = parseInt(dollarAmount/10, 10); 
 
    $('.impact-amount').text('£' + dollarAmount); 
 
    $('.amount input[type=radio]').prop('checked', false); 
 
    
 
    $('input:radio').each(function() { 
 
     if($(this).val() == dollarAmount) 
 
     { 
 
     flag = 1; 
 
     $(this).prop('checked', true); 
 
     } 
 
    }); 
 
    
 
    if(flag == 0) 
 
    { 
 
     alert("Value in Custom Field : " + dollarAmount); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form class="donate" novalidate="" autocomplete="on" method="POST"> 
 
    <div class="amount"> 
 
    <input type="radio" name="amount" id="amount_5" value="5" tabindex="10"/> 
 
    <label for="amount_5">£5</label>  
 
    </div> 
 
    <div class="amount"> 
 
    <input type="radio" name="amount" id="amount_7" value="7" tabindex="10"/> 
 
    <label for="amount_7">£7</label>  
 
    </div> 
 
    <div class="amount"> 
 
    <input type="radio" name="amount" id="amount_14" value="14" tabindex="50"/> 
 
    <label for="amount_14">£14</label>  
 
    </div> 
 
    <div class="amount"> 
 
    <label for="amount_other">Enter Other Amount</label> 
 
    <input type="tel" name="amount_other" id="amount_other" placeholder="Enter Other Amount" tabindex="18"/> 
 
    </div> 
 
    <div class="amount"> 
 
    <input type="checkbox" name="amount_reoccuring" id="amount_reoccuring"/> 
 
    <label for="amount_reoccuring"><span></span> Make this a reoccuring donation.</label> 
 
    </div> 
 
</form>

Answer 2

Im On-Schlüssel-up-Methode, nachdem Sie bekommen t er dollarvalue Sie diese verwenden könnte das Optionsfeld zu überprüfen, die die Eingabe-Wert als Wert hat:

$('input[type=radio]').each(function() { 
    if ($(this).val() == dollarinput) 
     $(this).prop("checked", true); 
}); 

Answer 3

Versuchen mit each() Funktion jquery

$('.amount label').on('click', function() { 
 
    var dollarAmount = parseInt($(this).text().replace('£', ''), 10); 
 
    var impactAmount = parseInt(dollarAmount/10, 10); 
 

 
    $('.impact-amount').text('£' + dollarAmount); 
 
    $('#amount_other').val(''); 
 
}); 
 

 
$('#amount_other').keyup(function() { 
 
    var dollarAmount = parseFloat($(this).val()); 
 
    $('.amount input[type=radio]').prop('checked', false); 
 
    $('.amount input[type=radio]').each(function(){ 
 
     if(parseFloat($(this).val()) == dollarAmount){ 
 
     $(this).prop('checked', true); 
 
     } 
 
     else{ 
 
     console.log('is not in this list') 
 
     } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form class="donate" novalidate="" autocomplete="on" method="POST"> 
 
    <div class="amount"> 
 
    <input type="radio" name="amount" id="amount_5" value="5" tabindex="10"/> 
 
    <label for="amount_5">£5</label>  
 
    </div> 
 
    <div class="amount"> 
 
    <input type="radio" name="amount" id="amount_7" value="7" tabindex="10"/> 
 
    <label for="amount_7">£7</label>  
 
    </div> 
 
    <div class="amount"> 
 
    <input type="radio" name="amount" id="amount_14" value="14" tabindex="50"/> 
 
    <label for="amount_14">£14</label>  
 
    </div> 
 
    <div class="amount"> 
 
    <label for="amount_other">Enter Other Amount</label> 
 
    <input type="tel" name="amount_other" id="amount_other" placeholder="Enter Other Amount" tabindex="18"/> 
 
    </div> 
 
    <div class="amount"> 
 
    <input type="checkbox" name="amount_reoccuring" id="amount_reoccuring"/> 
 
    <label for="amount_reoccuring"><span></span> Make this a reoccuring donation.</label> 
 
    </div> 
 
</form>