вернуть все значения полей ввода в div - PullRequest
Новая
       27

вернуть все значения полей ввода в div

1 голос
/ 23 февраля 2011

Мне нужно сформировать строку со всеми полями ввода значений в слое div - используя jquery 

<div id="selection">
   <input class="field" id="1" type="hidden" value="A"/>
   <input class="field" id="2" type="hidden" value="B"/>
   <input class="field" id="3" type="hidden" value="C"/>
   <input class="field" id="4" type="hidden" value="D"/>
</div>

<input type="button" id="button" value="generate"/>

в этой форме: 

id[1]=val[A]&id[2]=val[b]...so on

jquery: 

 $(function() {
      $('#button').click(function() {
         //function goes here...


      });
    });

Ответы [ 4 ]

1 голос
/ 23 февраля 2011

Другое решение, которое дает точный заданный вывод и изящно обрабатывает отсутствующие атрибуты:

Смотрите его в действии на jsFiddle : 

$(function() {
    $('#button').click(function() {

        var ResStr  = $('#selection input.field');

        ResStr  = ResStr.map (function () {
            var jThis   = $(this);
            var ID      = jThis.attr ("id");
            if (!ID)    ID  = "null";

            var VAL     = jThis.val ()
            if (!VAL)   VAL  = "null";

            return 'id[' + ID + ']=val[' + VAL + ']';

        } ).get () .join ('&');

        alert (ResStr);

    } );
} );
1 голос
/ 23 февраля 2011

Если вы используете name вместо (или в дополнение к) id: 

<input class="field" name="1" type="hidden" value="A"/>
<input class="field" name="2" type="hidden" value="B"/>
<input class="field" name="3" type="hidden" value="C"/>
<input class="field" name="4" type="hidden" value="D"/>

Вы можете использовать serialize: 

$('#button').click(function() {
   alert($('#selection input').serialize());
});

что дает вам 

1=A&2=B&3=C&4=D

Если вы действительно хотите иметь структуру id[x], вы можете дать элементам имена id[1], id[2] и т. Д.

Редактировать: О, почему-то я упустил из виду, что вы тоже хотите val[x]. Это не было бы возможно с serialize, только если вы действительно указали val[x] в качестве значения в полях. Но зачем вам такая запутанная структура?

Btw. вам не хватает type="button" на вашей кнопке.

1 голос
/ 23 февраля 2011 
<script>
    $(function() {
        $('#button').click(function() {

            var str = new Array();
            var count = 0;

            $('.field').each(
                function()
                {                   
                    str[count] = 'id['+$(this).attr('id')+']=val['+$(this).val()+']';
                    count++;
                }
            );
            alert(str.join('&'))
        });
    });
</script>
<div id="selection">
   <input class="field" id="1" type="hidden" value="A"/>
   <input class="field" id="2" type="hidden" value="B"/>
   <input class="field" id="3" type="hidden" value="C"/>
   <input class="field" id="4" type="hidden" value="D"/>
</div>
<input id="button" value="generate" type="button"/>
0 голосов
/ 23 февраля 2011

возвращает все html, объединенные из всех входов внутри div 

var h = '';
var c = 0;
$('#selection input.field').each(function(){
 h += '&id['+(++c)+']=val['+$(this).val()+']';
});
h = h.slice(1);

alert(h);
...