web-dev-qa-db-fra.com

Convertir les données du formulaire en objet JSON

J'essaie de convertir les données du formulaire HTML en un objet JSON, j'ai ce fil , mais je ne sais pas pourquoi cela ne fonctionne pas pour moi. J'utilise le code suivant.

<form id="myform" action="" method="post">
    <div class="form-field">
        <label for="title">Title</label>
        <input name="title" id="title" type="text" value="" size="40" aria-required="true">
    </div>
    <div class="form-field form-required">
        <label for="your-name">Your Name</label>
        <input name="yourName" id="yourName" type="text" value="" size="40" aria-required="true">
    </div>
    <div class="form-field">
        <label for="contact-no">Contact No:</label>
        <input name="contact" id="contact" type="text" value="" size="40" aria-required="true">
    </div>
    <div class="form-field">
        <label for="description">Description:</label>
        <textarea name="description" id="description" rows="1" cols="40" aria-required="true"></textarea>
    </div>
    <div class="form-field">
        <label for="email">Email:</label>
        <input name="email" id="email" type="text" value="optional" size="40" aria-required="true">
    </div>
    <div class="form-field">
        <label for="city">City:</label>
        <input name="city" id="city" type="text" value="" size="40" aria-required="true">
    </div>
    <div class="form-field">
        <label for="country">Country:</label>
        <input name="country" id="country" type="text" value="" size="40" aria-required="true">
    </div>
    <div class="form-field">
        <label for="pic1">Picture 1:</label>
        <input type="file" name="pic1" id="pic1">
    </div>
    <div class="form-field">
        <label for="pic2">Picture 2:</label>
        <input type="file" name="pic2" id="pic2">
    </div>
    <div class="form-field">
        <label for="pic3">Picture 3:</label>
        <input type="file" name="pic3" id="pic3">
    </div>
    <div class="form-field">
        <label for="pic4">Picture 4:</label>
        <input type="file" name="pic4" id="pic4">
    </div>
    <div class="form-field">
        <label for="pic5">Picture 5:</label>
        <input type="file" name="pic5" id="pic5">
    </div>
    <div class="form-field">
        <label for="demand">Your Demand:</label>
        <input name="demand" id="demand" type="text" value="" size="40" aria-required="true">
    </div>
    <p class="submit">
        <input type="submit" name="postAd" id="postAd" class="button" value="Post Ad For Review">
    </p>
    <div id="results">hello</div>
</form>


$(document).ready(function(){
    $.fn.serializeObject = function() {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name] === undefined) {
                if (!o[this.name].Push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].Push(this.value || '');
            } else {
                alert(this.name);
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    $('#myform').submit(function() {
        $('#result').text(JSON.stringify($('#myform').serializeObject()));
        return false;
    });
});

J'ai essayé de le déboguer et j'ai remarqué que lorsque ma fonction est exécutée, elle exécute toujours le code dans la déclaration else.

jqueryhtmljsonforms
18
Muaz Usmani

J'ai ajouté le formulaire ci-dessus dans JSFiddle et il affiche les données JSON en sortie.

Travailler JSFiddle

$(function() {
  $('form').submit(function() {
     $('#result').text(JSON.stringify($('form').serializeObject()));
    return false;
  });
});
16
Dave

Utilisez ce plugin jQuery . SerializeJSON () pour convertir les données du formulaire en objet JSON.

<form id="my-profile">
<!-- simple attribute -->
    <input type="text" name="fullName" value="Mario Izquierdo" />

<!-- nested attributes -->
    <input type="text" name="address[city]" value="San Francisco" />
    <input type="text" name="address[state][name]" value="California" />
    <input type="text" name="address[state][abbr]" value="CA" />
</form>

Javascript:

$('#my-profile').serializeJSON();

// returns =>
{
    fullName: "Mario Izquierdo",

    address: {
    city: "San Francisco",
    state: {
    name: "California",
    abbr: "CA"
    }
}

serializeJSON() fonction renvoie un objet JSON.

4
simanacci

Exemple de travail avec Jsbin http://jsbin.com/oTimiGE/1/edit

essayez la méthode jquery serializeArray()

http://api.jquery.com/serializeArray/

$('form').submit(function() {
  console.log($(this).serializeArray());
  return false;
});
2
Amith

Pour les chercheurs Google,

J'ai créé un tableau JSON avec une forme sérialisée comme celle-ci,

   var jsonArray = [];

   var splittedFormData = $("#formToPost").serialize().split('&');

            $.each(splittedFormData, function (key, value) {

                item = {};
                var splittedValue = value.split('=');               
                item["name"] = splittedValue[0];
                item["value"] = splittedValue[1];
                jsonArray.Push(item);
            });

   console.log(jsonArray)
1
Shree Krishna

Peut-être simplement utiliser la fonction jquery serialize?

$("#myform").serialize()

Vous pouvez effectuer d'autres traitements ultérieurement une fois que vous disposez de l'objet JSON.

0
noisewaterphd