obtenir toutes les valeurs des éléments du formulaire en utilisant jquery?

Question

obtenir toutes les valeurs des éléments du formulaire en utilisant jquery?

Demandé el 18 de Février, 2013: Quand la question a-t-elle été
32589 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Voici le code HTML:

 <!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>

Voici le code qui obtiendra toutes les valeurs des champs de formulaire:

  $("#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());

De cela, j'obtiens la valeur de sortie comme suit:

 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

je veux la sortie comme suit:

  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

Demandé el 18 de Février, 2013 par Siva G

Answer 1

4 Réponses

Answer 2

146voto

Lito Points 670

Vous pouvez utiliser une fonction serialize () de JQuery:

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

Et lisez en PHP:

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

Et obtenez data- * pour marquer HTML5, vous pouvez voir l'exemple:

 <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'));
});

Et

 <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épondu el 3 de Mai, 2013 par Lito (670 Points )

Answer 3

15voto

KrisWebDev Points 1788

Je sais que vous utilisez jQuery mais pour ceux qui veulent une solution Javascript pure :

 // 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épondu el 9 de Mai, 2013 par KrisWebDev (1788 Points )

Answer 4

8voto

Igor S. Points 1330

jQuery a une fonction très utile appelée serialize .

Démo: http://jsfiddle.net/55xnJ/2/

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

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

Répondu el 6 de Mai, 2013 par Igor S. (1330 Points )

Answer 5

3voto

dave Points 12645

Ajoutez ceci à la fin:

 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épondu el 3 de Mai, 2013 par dave (12645 Points )

obtenir toutes les valeurs des éléments du formulaire en utilisant jquery?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

obtenir toutes les valeurs des éléments du formulaire en utilisant jquery?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: