2016-05-17 3 views
-1

Я искал форму, которая позволяет пользователям выбирать сумму или выбирать другую сумму. Другая сумма при нажатии меняет сумму до 5 долларов США. Я пытаюсь получить его так, что, если скажем, что пользователь пытается ввести число, такое как 10, 15 или 20 в качестве примеров, оно позволит им ввести его. В настоящее время он преобразует все, что меньше 5, для стартового номера до 5, что делает невозможным.Устранение неполадок JS conditional

$("#donrAmountInput").on("input", function() { 
    setDonrAmount("Other"); 
}); 

function setDonrAmount(id) { 
    var amt; 
    $('#donrAmountButtons .active').removeClass('active'); 

    if (id == "Other") { 
    amt = $("#donrAmountInput").val() > 5 ? $("#donrAmountInput").val() : 5; 
    $('#otherAmount button').addClass('active'); 
    } 
    else { 
    amt = id.substring(10); 
    $('#donrAmount' + amt).addClass('active'); 
    } 

    $('input#donrAmountInput').val(amt); 
    $('input#donrAmountInput').change(); 
    $('#donrReviewAmount').html(amt); 
} 

Для справки: настоящая форма. Помощь будет принята с благодарностью. https://secure.pva.org/site/c.ajIRK9NJLcJ2E/b.9381225/k.8668/FY2016_March_Congressional/apps/ka/sd/donorcustom.asp

+1

Итак, ваша проблема в этой строке 'АМТ = $ ("# donrAmountInput"). Вал()> 5? $ ("# donrAmountInput"). val(): 5; 'который говорит, что если значение больше 5, используйте его, в противном случае установите его на 5. – j08691

+0

, это правильно. Я знаю, что я устанавливаю его на 5 для чего-то меньшего, чем 5, но не могу понять, почему он не позволит мне вводить 20. –

+1

Потому что, когда вы вводите «2» в «20», он видит, что меньше, чем " 5" . Вы проверяете всякий раз, когда вносятся какие-либо изменения на вход. – j08691

ответ

1

Вы можете установить ваш inputтипа в number указать min, max, required атрибуты, а затем проверить правильность его с помощью JavaScript/JQuery.

function myFunction() { 
 
    var inpObj = $("#id1")[0]; 
 
    if (inpObj.checkValidity() === false) { 
 
     $("#demo").html(inpObj.validationMessage); 
 
    } else { 
 
     $("#demo").html(inpObj.value); 
 
} 
 
} 
 
$('button').on('click',function(){ 
 
myFunction(); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="id1" type="number" min="5" max="300" required> 
 
<button>OK</button> 
 

 
<p id="demo"></p>

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