Jquery Проход по полям и падение меню и отображать значения ввода в div - PullRequest
Новая
       331

Jquery Проход по полям и падение меню и отображать значения ввода в div

0 голосов
/ 09 марта 2012

Я пытаюсь понять, как получать значения полей формы и выбранные параметры выпадающего меню, используя один цикл, и отображать их в отдельных элементах div на одной странице.

На данный момент мне удалось добиться этого только с помощью повторяющегося кода, а не с помощью одного цикла. Форма в конечном итоге будет очень длинной со многими полями и выпадающими меню (выберите параметры), поэтому лучшим вариантом будет цикл.

Буду признателен за любую помощь. Заранее спасибо.

Мой код 

    <html>
        <head>
          <script src="jquery.js"></script>

    <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){

    $("#name").keypress(event) {
        var stt = $(this).val();
        $("#d_name").text(stt);
    });

    $("#email").keypress(event) {
        var stt = $(this).val();
        $("#d_email").text(stt);
    });

        $("#telephone").keypress(event) {
        var stt = $(this).val();
        $("#d_telephone").text(stt);
    });

    $("#car").change(function(event) {
        var stt = $(this).val();
        $("#d_type").text(stt);
    });

  $("#type").change(function(event) {
        var stt = $(this).val();
        $("#d_type").text(stt);
    });

    });//]]> 
    </script>  

        </head>
        <body>

    Name:      
    <input type="text" value="" id="name"/>
    Email:
    <input type="text" value="" id="email"/>
    Telephone:
    <input type="text" value="" id="telephone"/>
    Car:
    <select id="car" >
      <option value="volvo">Volvo</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select> 
    Type:
    <select id="type">
      <option value="automatic">automatic</option>
      <option value="manual">manual</option>
    </select> 

    Your Data
    Name: <div id="d_name" ></div>
    Email: <div id="d_email" ></div>
    Telephone: <div id="d_telephone" ></div>
    Car: <div id="d_car" ></div>
    Type: <div id="d_type" ></div>

        </body>
        </html>

Ответы [ 2 ]

0 голосов
/ 09 марта 2012

Вы имеете в виду: 

$('input, select').change(function() {
    $('#d_' + this.id).text($(this).val());
});

Для редактирования: 

var updateText = function() {
    $('#d_' + this.id).text($(this).val());
}

$('input').keypress(updateText);
$('select').change(updateText);

Пример: http://jsfiddle.net/kBGZ6/

0 голосов
/ 09 марта 2012

Попробуйте что-то вроде этого: 

$(":input,:select").change(function(event) {
    var val = $(this).val(); // get the val
    var id = $(this).attr('id');  // get the id
    $("#d_" + id).text(val);  // use #d_ plus id to set the test to val
});

Первая строка выбирает все элементы input и select и добавляет изменения при обработке следующей функции.Это работает только тогда, когда id из div равно d_ плюс атрибут id из элемента form.

И если вы действительно хотите, вы можете сделать это за один разстрока: 

$(":input,:select").change(function(event) {
    $("#d_" + $(this).attr('id')).text($(this).val());
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...