फॉर्म डेटा को JSON ऑब्जेक्ट में कनवर्ट करें

Question

मैं HTML फ़ॉर्म डेटा को JSON ऑब्जेक्ट में कनवर्ट करने का प्रयास कर रहा हूं, मेरे पास this thread है, लेकिन मुझे नहीं पता कि यह मेरे लिए क्यों काम नहीं कर रहा है। मैं निम्नलिखित कोड का उपयोग कर रहा हूँ।

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

मैं इसे डिबग करने की कोशिश की, और मैंने देखा है कि जब मेरे समारोह चलाया जाता है, यह हमेशा किसी और बयान के भीतर कोड चलाता है।

Answer 1

शायद jquery serialize फ़ंक्शन का उपयोग करें?

$("#myform").serialize() 

आप बाद में एक बार आप JSON ऑब्जेक्ट है अन्य प्रसंस्करण कर सकते हैं।

Answer 2

$.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 { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
}; 

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

Answer 3

कार्य Jsbin उदाहरण http://jsbin.com/oTimiGE/1/edit

कोशिश jQuery serializeArray() विधि

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

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

Answer 4

मैं JSFiddle में प्रपत्र ऊपर जोड़ा गया है और यह आउटपुट के रूप में JSON डेटा प्रदर्शित करता है।

Working JSFiddle

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

Answer 5

उपयोग इस jQuery प्लगइन .serializeJSON() 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> 

जावास्क्रिप्ट:

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

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

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

serializeJSON() समारोह एक JSON ऑब्जेक्ट देता है।

Answer 6

गूगल खोजकर्ताओं के लिए,

मैं इस तरह धारावाहिक फार्म के साथ JSON सारणी बना लिया है,

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)