javascript - Why FormData object empty -
when run below code , empty formdata , because of form complex ? how should change code ?
it seems if use tags form , input , label construct form , formdata object not empty . maybe can manually construct line , send via xmlhttprequest , have better way ?
any appreciate , thank time .
html:
<form enctype="multipart/form-data" id="inquiry" name="inquiry" method="post" role="form"><!--action="processdata.php"--> <div class="row"> <div class="form-group"> <div class="col-md-6"> <label for="name">your name</label> <input type="text" class="form-control" id="name" maxlength="100"> </div> <div class="col-md-6"> <label for="email">your email address</label> <input type="text" class="form-control" id="email" maxlength="100"> </div> </div> </div> <div class="row"> <div class="form-group"> <div class="col-md-12"> <label for="subject">subject</label> <input type="text" class="form-control" id="subject" maxlength="100"> </div> </div> </div> <div class="row"> <div class="form-group"> <div class="col-md-12"> <label for="message">your message</label> <textarea class="form-control" id="message" maxlength="5000"></textarea> </div> </div> </div> <div class="row"> <div class="col-md-12"> <button id="post-message" type="submit"> <span>send message</span> </button> </div> </div> </form> js:
'use strict'; var contact = function() { var senddata = function() { var xmlhttp = new xmlhttprequest() ; var url = "/php/processdata.php"; var inquiryform = document.forms.nameditem("inquiry"); var fd = new formdata(inquiryform); xmlhttp.open("post", url , true); xmlhttp.onreadystatechange = function() { if(xmlhttp.readystate == 4 && xmlhttp.status == 200) { var returndata = xmlhttp.responsetext ; } }; xmlhttp.send(fd); (var [key, value] of fd.entries()) { console.log(key, value); } }; var windowloadhandler = function() { window.addeventlistener("load",function(){ var inquiryform = document.getelementbyid("inquiry"); inquiryform.addeventlistener("submit",function(event){ event.preventdefault(); senddata(); }); }); }; return { init : function(){ windowloadhandler(); } }; }();
you'll have add names form elements, otherwise won't sent form.
here's code changes make work
'use strict'; var contact = (function() { var senddata = function(form) { var xmlhttp = new xmlhttprequest(); var url = "/php/processdata.php"; var fd = new formdata(form); xmlhttp.open("post", url, true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { var returndata = xmlhttp.responsetext; // note, async, can't used outside function } } xmlhttp.send(fd); console.log() (var pair of fd.entries()) { console.log(pair[0] + ', ' + pair[1]); } } var windowloadhandler = function() { var inquiryform = document.getelementbyid("inquiry"); inquiryform.addeventlistener("submit", function(event) { event.preventdefault(); senddata(this); }); } return { init: function() { windowloadhandler(); } }; })(); $(document).ready(function() { contact.init(); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form enctype="multipart/form-data" id="inquiry" name="inquiry" method="post" role="form"> <!--action="processdata.php"--> <div class="row"> <div class="form-group"> <div class="col-md-6"> <label for="fullname">your name</label> <input type="text" class="form-control" id="fullname" name="fullname" maxlength="100"> </div> <div class="col-md-6"> <label for="email">your email address</label> <input type="text" class="form-control" id="email" maxlength="100" name="email"> </div> </div> </div> <div class="row"> <div class="form-group"> <div class="col-md-12"> <label for="subject">subject</label> <input type="text" class="form-control" id="subject" maxlength="100" name="subject"> </div> </div> </div> <div class="row"> <div class="form-group"> <div class="col-md-12"> <label for="message">your message</label> <textarea class="form-control" id="message" maxlength="5000" name="message"></textarea> </div> </div> </div> <div class="row"> <div class="col-md-12"> <button id="post-message" type="submit"> <span>send message</span> </button> </div> </div> </form>by way you're calling contact.init() wanted iife.
note name poor name variable, , worse name/id element, window.name exists.
see how form passed event handler, function.
Comments
Post a Comment