HTML + .JS Въпрос

Във форума е въведено ограничение, което позволява на потребителите единствено да разглеждат публикуваните въпроси.

MladenMladenov 80 Точки

HTML + .JS Въпрос

Здравейте,

Имам въпрос, в дадения случай

Имам поле с инпут, <input> в което трябва да се въвеждат числа, при което следва, числата да минават през фунцкия на js, и ако функцията върне True или False съответно да активира или да остави бутона неактивен.




&amp;amp;lt;input type="text" id="Number" name="Number" minlength="5" maxlength="10" required onchange=checkNumber(this)"&amp;amp;gt; &amp;amp;lt;br&amp;amp;gt;



&amp;amp;lt;input type="submit" id="submitButton" value="Submit" disabled&amp;amp;gt;

function checkNumber(Number) {
	    var s = 0;
	    var doubleDigit = false;
	    for (var i = Number.length - 1; i &amp;amp;gt;= 0; i--) {
	        var digit = +Number[i];
	        if (doubleDigit) {
	            digit *= 2;
	            if (digit &amp;amp;gt; 9)
	                digit -= 9;
	        }
	        s += digit;
	        doubleDigit = !doubleDigit;
	    }
	   return (s % 10 == 0)
	}

Въпросът ми е как да влюча функцията при всяка смяна на символ, тя да прави проверка и, когато е true ,да направи неактивния бутон активен?

Благодаря предварително.

Тагове:

24/08/2015 15:29:07 Advanced Level: Front-End 24/08/2015 15:30:10

Samuil.Petrow 1550 Точки

Закачаш евент в/у input-a (ако не си запознат - виж как става в native javascript и с jQuery) като си подаваш и event обекта.

Може да е onchange, keyup, keydown и т.н, различните работят по различен начин, разцъкай ги и избери най-подходящия за теб.

Пускаш функцията с val-а от input-a, който взимаш пак със селектор или с $(this).val() (native - e.target.value)

Взависимост от това каквото ти върне слагаш disabled атрибута на бутона да е disabled или го премахваш или му слагаш фиктивна стойност (равносилно на премахването). В jQuery ползвай .prop (по-съвременен вариант от .attr), а в native js ако не се лъжа беше setAttribute функцията.

jQuery пример:

$('#Number').change(function(event){

var value = $(this).val(); //или $(event.target).val();

var checkedNumberResult = checkNumber(parseInt(value));

if(checkedNumberResult === true){

$('#submitButton').prop('disabled', 'disabled'); //или $('#submitButton').prop('disabled', true);

}

else{

$('#submitButton').removeProp('disabled');

}

});

24/08/2015 15:37:55 24/08/2015 15:44:35

MladenMladenov 80 Точки

Реално Parse към Int Се прави в самата фунцкия,

аз опитвах варианти с изнесена променлива преди това,

Но никога не успявах да нагася да работи както трябва... native JS е много неприятен,

но не искам да скачам на jQuery Преди да съм усвойл поне базата.

Много благодаря за помощта!

24/08/2015 15:45:44

MladenMladenov 80 Точки

http://jsfiddle.net/f2t1Ldek/1/

Сложих го, но пак не работи...

24/08/2015 16:07:40

Samuil.Petrow 1550 Точки

На fiddle-a му е казан чист JS, опитай да сложиш да зарежда някоя версия на jQuery

24/08/2015 16:15:51

Покажи всички коментари

jumpforjoy 12 Точки

Здравей, човече,

А ти какво искаш да провериш, че от много ";" и "&" малко трудно загрявам?

21/10/2015 20:38:15

jumpforjoy 12 Точки

Човече, написах го, пробвах го, само че с моя си логика. Ти напиши твоята във фунцкията. Аз бих използвал type="number", щом е за работа с числа.

<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Text Send</title>
        <script>
            function ActivateButton() {

                var inactiveButton = document.getElementById('button');
                var num = document.getElementById('numberInput').value;
 
                if ((num >= 5) && (num <= 10)) {
                    inactiveButton.disabled = false;
                } else {
                    inactiveButton.disabled = true;
                }
            }
        </script>
    </head>
    <body>
        <input id="numberInput" type="number" required onchange="ActivateButton()" onkeyup="ActivateButton()" onkeydown="ActivateButton()" />
        <button id="button" disabled>Не работи</button>
    </body>
</html>

21/10/2015 22:43:24