uzyskać wszystkie wartości elementów formularza za pomocą jquery?

Oto HTML kod:uzyskać wszystkie wartości elementów formularza za pomocą jquery?

<!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml' > 
<head> 
    <title>HTML Form Builder</title> 
    <link href='css/font1.css' rel='stylesheet' type='text/css'> 
    <link href='css/font2.css' rel='stylesheet' type='text/css'> 
    <link rel='stylesheet' href='css/style.min.css' type='text/css' media='all' /> 
    <link rel='stylesheet' href='css/form.min.css' type='text/css' media='all' /> 
    <link rel='stylesheet' href='css/style1.css' type='text/css' media='all' id='css-theme'/> 
    <link type='text/css' href='css/redmond/jquery-ui-1.8.23.custom.css' rel='stylesheet' /> 
    <link rel='stylesheet' href='css/tipsy.css' type='text/css' media='all' /> 
    <script type='text/javascript' src='js/jquery-1.8.0.min.js'></script> 
    <script type='text/javascript' src='js/jquery-ui-1.8.23.custom.min.js'></script> 
    <script type='text/javascript' src='js/jquery.metadata.js'></script> 
    <script type='text/javascript' src='js/jquery.validate.js'></script> 
    <script type='text/javascript' src='js/jquery.tipsy.js'></script> 
    <script type='text/javascript' src='js/jquery.json-2.3.min.js'></script> 

    <script type='text/javascript' src='js/main.min.js'></script> 
    <script type='text/javascript'> 
    $(function(){ 
     changeInnerHTML('doctor_id'); 
     changeInnerHTML('hospital_id'); 
     changeInnerHTML('clinic_id'); 
     changeInnerHTML('stockist_id'); 
     changeInnerHTML('chemist_id'); 
     changeInnerHTML('bloodbank_id'); 
     changeInnerHTML('dialysis_id'); 

    }); 
    function changeInnerHTML(id) 
    { 
     if($('#dialog_box_'+id).length) 
     { 
      var tmp=id.split('_'); 
      $.get('getDataValues.php?ref='+tmp[0],function(data,status){ 
       $('#dialog_box_'+id).html(data); 
      }); 
     } 
    } 
    </script> 
    </head> 
    <body> 
    <div id='container'> 


     <h1 id="form-name" style="background-color: rgb(255, 255, 255); box-shadow: none; border: none; margin: 8px 15px;">New Form</h1> 
     <form method="POST" id="preview_form" novalidate="novalidate"> 


     <div class="row" style="display: block;"><label class="field" for="textarea_1">textarea_1</label><span class="textArea" data=""><textarea id="dialog_box_textarea_1" name="textarea_1" data="{&quot;validate&quot;:{&quot;required&quot;:false,&quot;messages&quot;:{}}}"></textarea></span></div><div class="row" style="display: block;"><label class="field" for="radiobutton_1">radiobutton_1</label><span class="radioButton" data="" id="radiobutton_1"><label class="option" for="radiobutton_1_option_1"><input class="radio" id="dialog_box_radiobutton_1_option_1" type="radio" name="radiobutton_1" value="Option 1" data="{&quot;validate&quot;:{&quot;required&quot;:false,&quot;messages&quot;:{}}}">Option 1</label><label class="option" for="radiobutton_1_option_2"><input class="radio" id="radiobutton_1_option_2" type="radio" name="radiobutton_1" value="Option 2">Option 2</label><label class="option" for="radiobutton_1_option_3"><input class="radio" id="radiobutton_1_option_3" type="radio" name="radiobutton_1" value="Option 3">Option 3</label></span></div><div class="row" style="display: block;"><label class="field" for="checkboxgroup_1">checkboxgroup_1</label><span class="checkBoxGroup" data="" id="checkboxgroup_1"><label class="option" for="checkboxgroup_1_option_1"><input type="checkbox" class="checkbox" name="checkboxgroup_1[]" id="dialog_box_checkboxgroup_1_option_1" value="Option 1" data="{&quot;validate&quot;:{&quot;required&quot;:false,&quot;messages&quot;:{}}}">Option 1</label><label class="option" for="checkboxgroup_1_option_2"><input type="checkbox" class="checkbox" name="checkboxgroup_1[]" id="checkboxgroup_1_option_2" value="Option 2">Option 2</label><label class="option" for="checkboxgroup_1_option_3"><input type="checkbox" class="checkbox" name="checkboxgroup_1[]" id="checkboxgroup_1_option_3" value="Option 3">Option 3</label></span></div><div class="row" style="display: block;"><label class="field" for="dropdown_1">dropdown_1</label><span class="dropDown" data=""><select id="dialog_box_dropdown_1" name="dropdown_1" data="{&quot;validate&quot;:{&quot;required&quot;:false,&quot;messages&quot;:{}}}"><option value="Option 1">Option 1</option><option value="Option 2">Option 2</option><option value="Option 3">Option 3</option></select></span></div><input type="button" class="button blue" value="Submit" id="submit-form"><input type='hidden' id='tname' name='tname' value='surveyForm_2' /></form></div> <!--container--> 

<script type='text/javascript' src='js/form.min.js'></script> 
</body> 
</html>

Oto kod, który otrzyma wszystkie wartości pól formularza:

$("#hidAll").append($("#preview_form :input").map(function() { 
    if ($(this).val() != 'Submit') { 
     if ($(this).is('select')) { 
      var aa = $(this).children('option').map(function() { 
       return $(this).val(); 
      }).get().join("|"); 
      return $(this).attr('name') + '|' + aa; 
     } else if ($(this).is('input:checkbox')) { 
      return $(this).attr('name').substring(0, $(this).attr('name').length - 2) + '|' + $(this).val(); 
     } else { 
      return $(this).attr('name') + '|' + $(this).val(); 
     } 
    } 
}).get().join(",")); 
alert($("#hidAll").html());

Od tego otrzymuję wartość wyjściową jako followes:

textfield_1|dgdfg, 
checkboxgroup_1|Option 1, 
checkboxgroup_1|Option 2, 
checkboxgroup_1|Option 3, 
radiobutton_1|Option 1, 
radiobutton_1|Option 2, 
radiobutton_1|Option 3, 
dropdown_1|Option 1!Option 2!Option 3

Chcę, aby następujące:

textfield_1|dgdfg, 
    checkboxgroup_1|Option 1!Option 2!Option 3, 
    radiobutton_1|Option 1!Option 2!Option 3, 
    dropdown_1|Option 1!Option 2!Option 3

Źródło

2013-02-18 Siva G

Jakie jest pytanie? – ohaal

Przed samodzielnym napisaniem formularza-serializatora, zwróciłeś uwagę na: [.serialize'] (http://api.jquery.com/serialize/)? – Yoshi

Co robisz z wyjściem?Jeśli wysyłasz to za pomocą AJAX, istnieją łatwiejsze sposoby. –

101

można użyć serialize() Funkcja jQuery:

var datastring = $("#preview_form").serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "your url.php", 
      data: datastring, 
      success: function(data) { 
       alert('Data send'); 
      } 
     });

I przeczytać w PHP:

echo $_POST['datastring']['dialog_box_textarea_1']; 
echo $_POST['datastring']['radiobutton_1']; 
........

I pobierz *** dane - ****, aby oznaczyć HTML5, możesz zobaczyć ten przykład:

<div id="texto" data-author="Ricardo Miranda" data-date="2012-06-21"> 
<h4>Lorem ipsum</h4> 
    <p> 
    Lorem ipsum dolor sit amet, ius integre eligendi et, 
    sea ut expetendis conclusionemque, 
    mel at ornatus invenire. His ad moderatius definiebas omittantur, 
    liber saepe albucius sea cu. 
    Audire tamquam dolores vis ne, mediocrem consulatu eum ex. 
    Duo te agam saepe convenire, et fugit iisque his. 
</p>

<script type="text/javascript"> 
$(function() { 
    alert("The text is write " + $('#texto').data('author')); 
});

<div id="texto" data-author='{"nombre":"Ricardo","apellido":"Miranda"}' data-date="2012-06-21"> 
    ... 
</div> 

<script type="text/javascript"> 
$(function() { 
    alert("The text is write " + $('#texto').data('author').apellido + ", " + 
     ('#texto').data('author').nombre); 
}); 
</script>

Źródło

2013-05-03 15:35:37 Lito

Wow .... Nigdy nie wiedziałem o '.serialize()' aż do teraz ... Zbieram dane wejściowe przez ich identyfikatory w kółko .... ommyyygeerrrddd – RCNeil

Dodaj to do końca go:

var array = $("#hidAll").html(); 

x = array.split(','); 
key=s=""; 
for (i=0; i<x.length; i++) { 
    oldkey = key; 
    key = x[i].split('|')[0]; 
    if (oldkey==key) s+='!'; 
    else s+=',\n'+key+'|'; 
    s+=x[i].split('|')[1]; 
} 
s = s.substring(1); 
$('#hidAll').html(a);

Źródło

2013-05-03 07:07:54 dave

jQuery ma bardzo pomocny funkcję o nazwie serialize.

Demo: http://jsfiddle.net/55xnJ/2/

//Just type: 
$("#preview_form").serialize(); 

//to get result: 
single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1

Źródło

2013-05-06 05:29:22

wiem używasz jQuery, ale dla tych, którzy chcą czystego JavaScript rozwiązanie:

// Serialize form fields as URI argument/HTTP POST data 
function serializeForm(form) { 
    var kvpairs = []; 
    for (var i = 0; i < form.elements.length; i++) { 
     var e = form.elements[i]; 
     if(!e.name || !e.value) continue; // Shortcut, may not be suitable for values = 0 (considered as false) 
     switch (e.type) { 
      case 'text': 
      case 'textarea': 
      case 'password': 
      case 'hidden': 
       kvpairs.push(encodeURIComponent(e.name) + "=" + encodeURIComponent(e.value)); 
       break; 
      case 'radio': 
      case 'checkbox': 
       if (e.checked) kvpairs.push(encodeURIComponent(e.name) + "=" + encodeURIComponent(e.value)); 
       break; 
      /* To be implemented if needed: 
      case 'select-one': 
       ... document.forms[x].elements[y].options[0].selected ... 
       break; 
      case 'select-multiple': 
       for (z = 0; z < document.forms[x].elements[y].options.length; z++) { 
        ... document.forms[x].elements[y].options[z].selected ... 
       } */ 
       break; 
     } 
    } 
    return kvpairs.join("&"); 
}

Źródło

2013-05-09 11:43:57 KrisWebDev

-2

jeśli chcesz uzyskać wszystkie wartości z formularza w prosta tablica możesz zrobić coś takiego.

function getValues(form) { 
    var listvalues = new Array(); 
    var datastring = $("#" + form).serializeArray(); 
    var data = "{"; 
    for (var x = 0; x < datastring.length; x++) { 
     if (data == "{") { 
      data += "\"" + datastring[x].name + "\": \"" + datastring[x].value + "\""; 
     } 
     else { 
      data += ",\"" + datastring[x].name + "\": \"" + datastring[x].value + "\""; 
     } 
    } 
    data += "}"; 
    data = JSON.parse(data); 
    listvalues.push(data); 
    return listvalues; 
};

Źródło

2015-12-29 22:43:50

Josue - Nie jestem pewien, dlaczego to jest obniżany, (jesteś pierwszym użytkownikiem i powinniśmy zachęcać do pozytywnych odpowiedzi), ale może dlatego, że zaakceptowana odpowiedź jest lepsza (tj. to nie dodaje nic do dyskusji), lub może nie ma wystarczających informacji o tym, dlaczego propozycja działa lepiej niż oryginalny kod lub inne odpowiedzi. –

Metoda, którą zamieściłem, zwraca wartości w podobny sposób, z wyjątkiem tego, że zastępuje symbol | przez: –

odpowiedź już została przyjęta, po prostu napisać krótki techniki w tym samym celu.

var fieldPair = ''; 
$(":input").each(function(){ 
fieldPair += $(this).attr("name") + ':' + $(this).val() + ';'; 
}); 

console.log(fieldPair);

Źródło

2016-01-14 11:21:09 Frahim

Spróbuj to na uzyskanie formy wartości tekstu wejściowego do obiektu JavaScript ...

var fieldPair = {}; 
$("#form :input").each(function() { 
    if($(this).attr("name").length > 0) { 
     fieldPair[$(this).attr("name")] = $(this).val(); 
    } 
}); 

console.log(fieldPair);

Źródło

2016-03-30 07:52:02

jeden więcej

var submit = $('#submitId'); 

    submit.on('click', function (e) { 
     e.preventDefault(); 
     e.stopPropagation(); 

     var data ={}, 
      inputs = $('#formId input'); 

     function parseForm(inputs) { 
      var i = 0, _l = inputs.length; 

      for (i; i < _l; i++) { 
       data[inputs[i].name] = inputs[i].value; 
      } 
     } 

     parseForm(inputs); 
     console.dir(data); 
    });

powraca hash

Źródło

2016-12-23 20:19:26

uzyskać wszystkie wartości elementów formularza za pomocą jquery?

Odpowiedz

Powiązane problemy