We have a form that is standard HTML div's and tables with about 20 form input's. because we have Jquery dynamically assigning values to some form fields based on the inputs of other form fields the new dynamically generated values are not seen as part of the DOM. So we are trying to grab the entire HTML into a variable and send it to the API via Ajax. Below is the code being used to capture the page as well as the POST data being sent to the API.
Our problem is that pdfcrowd is returning a 400 Bad Request response. I assume the POST data is malformed, can you look at this and tell me what I need to change to gain functionality this way?
1.) RAW HTML is acquired this way via Jquery capture of onclick of a button:
function DoPDF() {
// using jQuery
source = $('html')[0].outerHTML;
$.post('http://pdfcrowd.com/api/pdf/convert/html/' , "?src=" + source + "&username=XXXXXX&key=XXXXXXXXXXXXXXX", function(data){
if(data != '') { alert ('Source Sent'); }
}); }2.) The actual POST sent is: (** note "?src=" at begining of POST data and username/key at END of POST data)?src=<html><head> <link href="../../css/standard.css" media="all" type="text/css" rel="stylesheet"> </head> <body> <div style="width:777px; height:1017px;" id="qcont"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <div style="height:175px;"> <img src="../../images/logo.png" style="float:left;" height="175" width="300"> <div style="float:right; width:450px; text-align:center; margin-top:75px; text-decoration:underline; font-size:16px; font-weight:bold;"> CHANGE-OUT / REPLACEMENT QUOTE</div> </div> <form method="post" action="../includes/functions.php"> <div style="padding-right:360px; text-align:right;"><label>Customer:</label> <input name="cname" value="" style="width:300px;" type="text"></div> <div style="padding-right:360px; text-align:right;"><label>Quote Date:</label> <input name="cname" value="06-24-2015" style="width:300px;" type="text"></div> <div style="padding-right:360px; text-align:right;"><label>Quote Number:</label> <input name="cname" value="" style="width:300px;" type="text"></div> <div style="margin-top:15px;"><table border="1" cellpadding="1" cellspacing="1" width="100%"> <tbody><tr> <th scope="col">Equipment</th> <th scope="col">Good</th> <th scope="col">Better</th> <th scope="col">Best</th> </tr> <tr> <td>Brand</td> <td style="text-align:center;"><input name="brandg" id="brandg" class="dynedit" style="text-align:center;" type="text"></td> <td style="text-align:center;"><input name="brandb" id="brandb" class="dynedit" style="text-align:center;" type="text"></td> <td style="text-align:center;"><input name="brandbst" id="brandbst" class="dynedit" style="text-align:center;" type="text"></td> </tr> <tr> <td>BTU/Tonnage</td> <td style="text-align:center;"><input name="btug" id="btug" class="dynedit" style="text-align:center;" type="text"></td> <td style="text-align:center;"><input name="btub" id="btub" class="dynedit" style="text-align:center;" type="text"></td> <td style="text-align:center;"><input name="btubst" id="btubst" class="dynedit" style="text-align:center;" type="text"></td> </tr> <tr> <td>SEER</td> <td style="text-align:center;"><input name="seerg" id="seerg" class="dynedit" style="text-align:center;" type="text"></td> <td style="text-align:center;"><input name="seerb" id="seerb" class="dynedit" style="text-align:center;" type="text"></td> <td style="text-align:center;"><input name="seerbst" id="seerbst" class="dynedit" style="text-align:center;" type="text"></td> </tr> <tr> <td>IAQ</td> <td style="text-align:center;"><input name="iaqg" id="iaqg" class="dynedit" style="text-align:center;" type="text"></td> <td style="text-align:center;"><input name="iaqb" id="iaqb" class="dynedit" style="text-align:center;" type="text"></td> <td style="text-align:center;"><input name="iaqbst" id="iaqbst" class="dynedit" style="text-align:center;" type="text"></td> </tr> <tr> <td>Thermostat</td> <td style="text-align:center;"><input name="thermg" id="thermg" class="dynedit" style="text-align:center;" type="text"></td> <td style="text-align:center;"><input name="thermb" id="thermb" class="dynedit" style="text-align:center;" type="text"></td> <td style="text-align:center;"><input name="thermbst" id="thermbst" class="dynedit" style="text-align:center;" type="text"></td> </tr> <tr> <td colspan="4" style="background-color:#CCCCCC;">WARRANTIES & SERVICES</td> </tr> <tr> <td>Parts</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>Labor</td> <td style="text-align:center">30 Days</td> <td style="text-align:center">60 Days</td> <td style="text-align:center">90 Days</td> </tr> <tr> <td>Base Cost</td> <td style="text-align:center"><input name="cashg" id="cashg" class="dynedit" style="text-align:center;" type="text"></td> <td style="text-align:center"><input name="cashb" id="cashb" class="dynedit" style="text-align:center;" type="text"></td> <td style="text-align:center"><input name="cashbst" id="cashbst" class="dynedit" style="text-align:center;" type="text"></td> </tr> <tr> <td>Rebates</td> <td style="text-align:center"><input name="rebg" id="rebg" class="dynedit" style="text-align:center;" required="required" value="0.00" type="text"></td> <td style="text-align:center"><input name="rebb" id="rebb" class="dynedit" style="text-align:center;" required="required" value="0.00" type="text"></td> <td style="text-align:center"><input name="rebbst" id="rebbst" class="dynedit" style="text-align:center;" required="required" value="0.00" type="text"></td> </tr> <tr> <td>Promotional Discounts</td> <td style="text-align:center"><input name="promg" id="promg" class="dynedit" style="text-align:center;" required="required" value="0.00" type="text"></td> <td style="text-align:center"><input name="promb" id="promb" class="dynedit" style="text-align:center;" required="required" value="0.00" type="text"></td> <td st ... POST data request size limit has been reached by Firebug. ... for the replacement of your unit with your selection from the above recommended units. Your quoted prices include the new unit, installation and preparation labor as well as disposal of the old unit.</p> <p>If you would like to take advantage of our offer, please sign below after reading the terms and conditions of this quote. Your technician will indicate below the projected installation date after discussing your availability as well as availability of our installation staff. We look forward to your acceptance of our service and as always if you have any questions, feel free to call us at the number listed below. </p> </div> <hr> <div id="zzz"> <ul> <li>We require a deposit in the amount of 25% of the quote. This covers any event where you are unable to meet your commitment to this service quote if accepted, inclusive of any restocking fee's or expenses incurred up to the time of the cancelation by you. Cancelation of this quote after acceptance will result in forfeiture of the deposit to cover expenses incurred by the company.</li> <li>Payment for service and/or quote fee's may be made through Credit Card, Check or Cash at the time of signing this quote. Be advised, any payments made through a credit card will incur an additional 3% fee of the payment amount made by Credit Card.</li> <li>Your signature and return of this quote indicates your acceptance of these terms and conditions.</li> </ul> <button style="display: none;" id="toPDF">Submit</button> </div> <script> $(document).ready(function() { $('th').click(function(){ $('th').removeClass("bggreen"); $(this).addClass("bggreen"); }); $('#toPDF').click(function(){ $("#toPDF").css("display", "none"); DoPDF(); }); function DoPDF() { // using jQuery source = $('html')[0].outerHTML; $.post('http://pdfcrowd.com/api/pdf/convert/html/' , "?src=" + source + "&username=dmsinc&key=24dc66f6a3cfa3806131a0e3c1114752", function(data){ if(data != '') { alert ('Source Sent'); } }); } $('#cashg').change(function(){ sval = (parseInt($('#cashg').val())); sval = (sval * 2) + 500; result = (sval * .03 + sval); result = result.toFixed(2); $('#ccg').html("$" + result) $('#cashg').val(sval.toFixed(2)); $('#subg').html("$" + sval.toFixed(2)); }); $('#cashb').change(function(){ sval = (parseInt($('#cashb').val())); sval = (sval * 2) + 500; result = (sval * .03 + sval); result = result.toFixed(2); $('#ccb').html("$" + result) $('#cashb').val(sval.toFixed(2)); $('#subb').html("$" + sval.toFixed(2)); }); $('#cashbst').change(function(){ sval = (parseInt($('#cashbst').val())); sval = (sval * 2) + 500; result = (sval * .03 + sval); result = result.toFixed(2); $('#ccbst').html("$" + result) $('#cashbst').val(sval.toFixed(2)); $('#subbst').html("$" + sval.toFixed(2)); }); $('#rebg').change(function(){ sval = (parseInt($('#cashg').val())); rval = (parseInt($('#rebg').val())); result = (sval - rval); $('#subg').html("$" + result.toFixed(2)); $('#rebg').val(rval.toFixed(2)); result = (result * .03 + result); result = result.toFixed(2); $('#ccg').html("$" + result) }); $('#rebb').change(function(){ sval = (parseInt($('#cashb').val())); rval = (parseInt($('#rebb').val())); result = (sval - rval); $('#subb').html("$" + result.toFixed(2)); $('#rebb').val(rval.toFixed(2)); result = (result * .03 + result); result = result.toFixed(2); $('#ccb').html("$" + result) }); $('#rebbst').change(function(){ sval = (parseInt($('#cashbst').val())); rval = (parseInt($('#rebbst').val())); result = (sval - rval); $('#subbst').html("$" + result.toFixed(2)); $('#rebbst').val(rval.toFixed(2)); result = (result * .03 + result); result = result.toFixed(2); $('#ccbst').html("$" + result) }); $('#promg').change(function(){ sval = (parseInt($('#cashg').val())); rval = (parseInt($('#rebg').val())); pval = (parseInt($('#promg').val())); result = ((sval - rval) - pval); $('#subg').html("$" + result.toFixed(2)); $('#promg').val(pval.toFixed(2)); result = (result * .03 + result); result = result.toFixed(2); $('#ccg').html("$" + result) }); $('#promb').change(function(){ sval = (parseInt($('#cashb').val())); rval = (parseInt($('#rebb').val())); pval = (parseInt($('#promb').val())); result = ((sval - rval) - pval); $('#subb').html("$" + result.toFixed(2)); $('#promb').val(pval.toFixed(2)); result = (result * .03 + result); result = result.toFixed(2); $('#ccb').html("$" + result) }); $('#prombst').change(function(){ sval = (parseInt($('#cashbst').val())); rval = (parseInt($('#rebbst').val())); pval = (parseInt($('#prombst').val())); result = ((sval - rval) - pval); $('#subbst').html("$" + result.toFixed(2)); $('#prombst').val(pval.toFixed(2)); result = (result * .03 + result); result = result.toFixed(2); $('#ccbst').html("$" + result) }); }); </script> </div> </body></html>&username=XXXXX&key=XXXXXXXXXXXXXXX