我正在尝试将HTML表单数据转换为JSON对象,但我有这个线程,但是我不知道为什么它对我不起作用。我正在使用以下代码。
HTML
JSON
<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; }); });
我尝试调试它,并注意到当我的函数运行时,它总是在else语句中运行代码。
我在JSFiddle中添加了以上表单,它将JSON数据显示为输出。
工作中的JSFiddle
$(function() { $('form').submit(function() { $('#result').text(JSON.stringify($('form').serializeObject())); return false; }); });