JQuery Получить автоматически значения всех элементов внутри div

Question

У меня есть главный div и внутри этого есть много текста ввода и переключателя. Как это:

<div id="mainDiv"> 
    <input type="text" name="text-1" /> <br/> 

    <input type="radio" name="radio-1" />Yes 
    <input type="radio" name="radio-1" />No <br/> 

    <input type="text" name="text-2" /> <br/> 
    <input type="text" name="text-3" /> <br/> 
</div> 
<img src="img/img.gif" onclick="getAllValues();" /> 

Я хочу, чтобы определить функцию «getAllValues ​​()» в JQuery, которые получают все значения в «mainDiv» и сохранить их в виде строки. Возможно?

Answer 1

Для этого вы можете выбрать все поля формы и использовать map(), чтобы создать массив из своих значений, который можно получить на основе их type. Попробуйте это:

function getAllValues() { 
    var inputValues = $('#mainDiv :input').map(function() { 
     var type = $(this).prop("type"); 

     // checked radios/checkboxes 
     if ((type == "checkbox" || type == "radio") && this.checked) { 
      return $(this).val(); 
     } 
     // all other fields, except buttons 
     else if (type != "button" || type != "submit") { 
      return $(this).val(); 
     } 
    }) 
    return inputValues.join(','); 
} 

if заявление может быть соединены вместе, но я оставил их отдельно для ясности.

Answer 2

попробовать что-то вроде этого:

function getAllValues() { 
    var allVal = ''; 
    $("#mainDiv > input").each(function() { 
    allVal += '&' + $(this).attr('name') + '=' + $(this).val(); 
    }); 
    alert(allVal); 
} 

Answer 3

Вот решение, которое строит вам строку JSON. Он получает значения текстовых полей, флажков и выберите элементы:

function buildRequestStringData(form) { 
    var select = form.find('select'), 
     input = form.find('input'), 
     requestString = '{'; 
    for (var i = 0; i < select.length; i++) { 
     requestString += '"' + $(select[i]).attr('name') + '": "' +$(select[i]).val() + '",'; 
    } 
    if (select.length > 0) { 
     requestString = requestString.substring(0, requestString.length - 1); 
    } 
    for (var i = 0; i < input.length; i++) { 
     if ($(input[i]).attr('type') !== 'checkbox') { 
      requestString += '"' + $(input[i]).attr('name') + '":"' + $(input[i]).val() + '",'; 
     } else { 
      if ($(input[i]).attr('checked')) { 
       requestString += '"' + $(input[i]).attr('name') +'":"' + $(input[i]).val() +'",'; 
      } 
     } 
    } 
    if (input.length > 0) { 
     requestString = requestString.substring(0, requestString.length - 1); 
    } 
    requestString += '}'; 
    return requestString; 
} 

Вы можете вызвать функцию следующим образом:

buildRequestStringData($('#mainDiv')) 

И результат http://jsfiddle.net/p7hbT/