[JavaScript, AJAX] Задай вопрос, получи ответ

Discussion in 'PHP' started by Isis, 9 Jun 2007.

Thread Status:
Not open for further replies.
  1. daniel777

    daniel777 Member

    Joined:
    8 Jul 2010
    Messages:
    535
    Likes Received:
    89
    Reputations:
    37
    Есть вот такой выпадающий список:
    HTML:
    <select onchange="document.getElementById('id_2').innerHTML=values[this.selectedIndex]">
    	<option value="1" selected="selected">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    	<option value="4">4</option>
    	<option value="5">5</option>
    	<option value="6">6</option>
    	<option value="7">7</option>
    	<option value="8">8</option>
    	<option value="9">9</option>
    	<option value="10">10</option>
    </select>
    Используется вот этот массив
    HTML:
    <script>
    values=[
    '300',
    '600',
    '900',
    '1200',
    '1500',
    '1800',
    '2100',
    '2400',
    '2700',
    '3000'
    ]
    values.undefined = '300';
    </script>
    В зависимости от выбранного элемента выводится стоимость:
    HTML:
    <b>Total:</b> <span id="id_2"></span>$<br>
    Проблема в том, что таким скриптом задаётся содержимое только первого тега <span>. А мне нужно выводить в двух местах. То есть в таком случае
    HTML:
    <b>Total:</b> <span id="id_2"></span>$<br>
    <b>Total:</b> <span id="id_2"></span>$<br>
    будет выведен результат только в первом теге.
    В чём ошибка, как сделать так, чтобы выводилось сразу в двух тегах <span> ?
     
  2. Konqi

    Konqi Green member

    Joined:
    24 Jun 2009
    Messages:
    2,279
    Likes Received:
    1,148
    Reputations:
    886
    daniel777

    id - это уникальный идентификатор, для одного элемента. используйте класс
     
    _________________________
    1 person likes this.
  3. VY_CMa

    VY_CMa Green member

    Joined:
    6 Jan 2012
    Messages:
    913
    Likes Received:
    449
    Reputations:
    722
    Можно и с одним ID.
    Способ 1. Проходим с each элементы и проверяем;
    Способ 2. использовать атрибут data;
    Способ 3. Обращение к элементам как к элементам массива (http://api.jquery.com/get/ );
    Далеко не все способы, но лень.
     
    _________________________
    1 person likes this.
  4. Konqi

    Konqi Green member

    Joined:
    24 Jun 2009
    Messages:
    2,279
    Likes Received:
    1,148
    Reputations:
    886
    давайте код писать грамотно )
     
    _________________________
  5. VY_CMa

    VY_CMa Green member

    Joined:
    6 Jan 2012
    Messages:
    913
    Likes Received:
    449
    Reputations:
    722
    Во за это давайте выпьем.
     
    _________________________
  6. daniel777

    daniel777 Member

    Joined:
    8 Jul 2010
    Messages:
    535
    Likes Received:
    89
    Reputations:
    37
    Благодарю всех за оказанную мне помощь!
    У меня еще два вопроса возникло, прошу помочь знающих.

    На странице с помощью javascript можно добавить неограниченное количество вот таких парных тегов input:
    HTML:
    <input type="text" name="moneypak[]" size="14"><input type="text" name="amount[]" size="6">
    Этих пар может быть и одна, а может и десять подряд.
    Пользователь будет вводить в эти поля только цифры.
    С этими тегами нужно провести такие действия:
    1)Проверить ввёл ли пользователь в первый тег input строку длиной 14 символов или нет. Для этого у меня есть вот такая функция:
    Code:
    function validate_moneypak(){
    	valid = true;
    if(document.moneypak.vouchid.value.length != "14"){
    alert("Enter valid MoneyPak!");
    	valid = false;
    }
    	return valid;
    }
    </script>
    2)Все цифры из input name amount[] сложить и вывести на странице.

    Чтобы было проще понять вот схема:
    [​IMG]

    Если бы кол-во полей было всегда одинаковое, и имели разные имена - наверняка я бы решил эту задачку без проблем. Но к сожалению с неизвестным количеством полей возникают трудности, поэтому прошу помощи:)
     
  7. Melfis

    Melfis Elder - Старейшина

    Joined:
    25 Apr 2011
    Messages:
    520
    Likes Received:
    105
    Reputations:
    53
    1. Создаваемому инпуту moneypak[] вешать событие .onblur = validateMoneypak;
    Code:
    var validateMoneypak = function () {
    	if (this.value.length != 14) { // this - сам input
    		alert("Enter valid MoneyPak!");
    		return false; // хз зачем ретурны, оставил как было.
    	}
    
    	return true;
    };
    2. Не знаю в какой момент должен срабатывать подсчёт, но вот метод:
    берём родителя инпутов любым из методов (на случай, если ещё где-то на странице появятся инпуты с именем amount[], а так же для быстроты скрипта):
    Code:
    var amountsParent = document.getElement[s]By[id/TagName/Name/ClassName](),
    	calculateSum = function () {
    		var amountInputs  = amountsParent.getElementsByName('amount[]'),
    			sum = 0;
    
    		amountInputs.forEach(function (item) {
    			sum += item.value;
    		});
    		console.log(sum);
    
    		return sum;
    	};
    
    Не тестил, может где-то опечатался ) Можно было бы сделать и более красиво, но не знаю точной реализации другого кода и надобности в этом.
     
    1 person likes this.
  8. daniel777

    daniel777 Member

    Joined:
    8 Jul 2010
    Messages:
    535
    Likes Received:
    89
    Reputations:
    37
    Melfis, первый пункт я решил. остался второй, но я решил сделать вот так:
    Code:
    function calc(){
    input = document.getElementsByTagName('input');
    
    for(i=0;i<(input).length;i++){
       if(input[i].getAttribute('name')=='amount[]'){
    	
    	alert(input[i].getAttribute('value'));
    	 
       }
    }
    }
    Но не могу понять как alert() заменить на +=, и в конце выполнения функции сделать return результата.
     
  9. LStr1ke

    LStr1ke Elder - Старейшина

    Joined:
    29 Jul 2009
    Messages:
    816
    Likes Received:
    140
    Reputations:
    73
    PHP:
    function calc() {
        var 
    input document.getElementsByTagName('input');
        var 
    result 0;
        for(
    i=0;i<(input).length;i++){
           if(
    input[i].getAttribute('name')=='amount[]'){
                
    result += parseInt(input[i].value);
           }
        }
        return 
    result;
    }
     
    1 person likes this.
  10. daniel777

    daniel777 Member

    Joined:
    8 Jul 2010
    Messages:
    535
    Likes Received:
    89
    Reputations:
    37
    Есть вот такая форма с неограниченным количеством тегов input:
    HTML:
    <form action="checkout.php" method="POST" name="moneypak" onsubmit="return moneypak();">
    <input type="text" name="moneypak[]" size="14" value="">
    <input type="text" name="moneypak[]" size="14" value="">
    <input type="text" name="moneypak[]" size="14" value="">
    <input type="submit" value="PAY MONEYPAK">
    </form>
    В этой форме при нажатии на кнопку "PAY MONEYPAK" должны произойти такие проверки:
    1)В одном(первом) поле обязательно должно быть 14 цифр
    2)Остальные поля должны быть либо 14 цифр, либо пустые.
    Для этого я написал вот такую функцию, только где-то неизвестно где закралась ошибка. При сабмите формы с неправильно заполнеными полями форма успешно сабмитится, игнорируя функцию moneypak(). Прошу помощи в поиске проблемы:)

    Собственно функция:
    Code:
    function moneypak(){
    input = document.getElementsByTagName('input');
    test = false;
    for(i=0;i<(input).length;i++){
       if(input[i].getAttribute('name')=='moneypak[]'){
    	  if(input[i].getAttribute('value')!=''){
    	  test = true;
    	  if(input[i].getAttribute('value').length!='14'){
    	  test = false;
          input[i].style.border = "3px #EE36AE solid";
          alert('MoneyPak must contain 14 chars!');
    	  }
    	 }
       }
    }
    //alert(test);
    return test;
    }
     
  11. LStr1ke

    LStr1ke Elder - Старейшина

    Joined:
    29 Jul 2009
    Messages:
    816
    Likes Received:
    140
    Reputations:
    73
    PHP:
    function moneypak(){
        var 
    input document.getElementsByTagName('input');
        var 
    result true;
        for( 
    i=0i<(input).lengthi++ ) {
            
    input[i].style.borderColor ''// Ставим цвет бордера - стандартным 
            
    if( input[i].getAttribute('name') == 'moneypak[]' ) {
                if( 
    == && input[i].value.length != 14 ) { // Если первый инпут не 14 символов
                    
    input[i].style.borderColor '#EE36AE';
                    
    result false
                }else {
                    
    // Проверяем оставшиеся инпуты
                    
    if( input[i].value != '' && input[i].value.length != 14 ) {
                        
    input[i].style.borderColor '#EE36AE';
                        
    alert('MoneyPak must contain 14 chars!');
                        
    result false;
                    }
                }
            }
        }
        return 
    result;
    }
    Не нужно использовать getAttribute для получения значения инпута. Эта функция возвратит только значение самого атрибута, а не то, что ввели в поле.
     
    #3711 LStr1ke, 19 Apr 2013
    Last edited: 19 Apr 2013
  12. Wetal

    Wetal New Member

    Joined:
    6 Mar 2013
    Messages:
    42
    Likes Received:
    0
    Reputations:
    0
    Как сделать так чтобы на странице пока не откроешь первую ссылку - все остальные были недоступны для нажатия, как только клик произошел вторая разблокировалась. По второй кликнул - третья разблокировалась?
     
  13. LStr1ke

    LStr1ke Elder - Старейшина

    Joined:
    29 Jul 2009
    Messages:
    816
    Likes Received:
    140
    Reputations:
    73
    Что-то типа того:
    PHP:
    <a href="#first">first</a> <br>
    <
    a href="#second">second</a> <br>
    <
    a href="#third">third</a> <br>
    <
    a href="#someLink">someLink</a> <br>
    <
    a href="#helloWorld">helloWorld</a> <br>
    <
    a href="#hi-hi-hi">hi-hi-hi</a
    <
    script type="text/javascript">
        var 
    clicked = {};
        for( var 
    itemId in document.getElementsByTagName('a') ) {
            if( !
    isNaN(parseFloat(itemId)) ) {
                
    document.getElementsByTagName('a')[ itemId ].setAttribute('rel'itemId);
                
    document.getElementsByTagName('a')[ itemId ].onclick = function() {
                    var 
    thisId this.getAttribute('rel');
                    if( 
    thisId == ) {
                        
    clickedthisId ] = true;
                    }else {
                        if( !
    clickedthisId 1] )
                            return 
    false;
                        else 
    clickedthisId ] = true;
                    }
                }
            }
        }
    </script>
     
  14. Wetal

    Wetal New Member

    Joined:
    6 Mar 2013
    Messages:
    42
    Likes Received:
    0
    Reputations:
    0
    Не работает((
     
  15. LStr1ke

    LStr1ke Elder - Старейшина

    Joined:
    29 Jul 2009
    Messages:
    816
    Likes Received:
    140
    Reputations:
    73
    Покажи весь код
     
  16. Wetal

    Wetal New Member

    Joined:
    6 Mar 2013
    Messages:
    42
    Likes Received:
    0
    Reputations:
    0
    Пока что сделал тестовую страницу

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>

    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta name="author" content="zalypa">

    <title>Untitled - 2</title>
    </head>

    <body>
    <a href="#first">first</a> <br>
    <a href="#second">second</a> <br>
    <a href="#third">third</a> <br>
    <a href="#someLink">someLink</a> <br>
    <a href="#helloWorld">helloWorld</a> <br>
    <a href="#hi-hi-hi">hi-hi-hi</a>
    <script type="text/javascript">
    var clicked = {};
    for( var itemId in document.getElementsByTagName('a') ) {
    if( !isNaN(parseFloat(itemId)) ) {
    document.getElementsByTagName('a')[ itemId ].setAttribute('rel', itemId);
    document.getElementsByTagName('a')[ itemId ].onclick = function() {
    var thisId = this.getAttribute('rel');
    if( thisId == 0 ) {
    clicked[ thisId ] = true;
    }else {
    if( !clicked[ thisId - 1] )
    return false;
    else clicked[ thisId ] = true;
    }
    }
    }
    }
    </script>

    </body>
    </html>
     
  17. LStr1ke

    LStr1ke Elder - Старейшина

    Joined:
    29 Jul 2009
    Messages:
    816
    Likes Received:
    140
    Reputations:
    73
    Ну так и чего? ) Работает же
     
  18. Wetal

    Wetal New Member

    Joined:
    6 Mar 2013
    Messages:
    42
    Likes Received:
    0
    Reputations:
    0
    Что работает? Мне надо чтобы изначально ссылка первая была активной), а на остальные невозможно было кликнуть. А сейчас на любую кликаешь, будь она в конце списка, вначале, в середине - она не заблокирована. Надо чтоб пока не кликнешь на first невозможно было кликнуть на second
     
  19. LStr1ke

    LStr1ke Elder - Старейшина

    Joined:
    29 Jul 2009
    Messages:
    816
    Likes Received:
    140
    Reputations:
    73
    ну какбе пока на 1 ссылку не нажмешь, вторая не нажмется, всмысле по адресу который указан в href - перехода не будет.
     
  20. Wetal

    Wetal New Member

    Joined:
    6 Mar 2013
    Messages:
    42
    Likes Received:
    0
    Reputations:
    0
    Точно! Работает) Это я чето туплю). А как еще сделать так чтобы у разблокированной сцылки был такой например цвет #333333, а у других #646363? Заранее спасибо!
     
Loading...
Thread Status:
Not open for further replies.