Databases
StackOverflow2013
Postsdbo
POForm Hidden by jQuery Code
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POForm Hidden by jQuery Code
    text
    copied!<p>I'm not very good at jQuery. I have to show a form in the code below, but it seems jquery (or Javascript) keeps the code hidden. </p> <p>The sample output is in<code>http://210.48.94.218/~printabl/products/business-cards/</code>. If you click the "CONTINUE" button in the page.</p> <pre><code>&lt;?php /** * Template Name: Contact Page * * Description: Twenty Twelve loves the no-sidebar look as much as * you do. Use this page template to remove the sidebar from any page. * * Tip: to remove the sidebar from all posts and pages simply remove * any active widgets from the Main Sidebar area, and the sidebar will * disappear everywhere. * * @package WordPress * @subpackage Twenty_Twelve * @since Twenty Twelve 1.0 */ get_header(); ?&gt; &lt;div id="primary" class="site-content"&gt; &lt;div id="content" role="main"&gt; &lt;script type="text/javascript"&gt; var x1 = 5; var x2 = 10; var value = x1 * x2; var list_value = 1; var size, fold, back, front, qlnt, qlt, tprice; &lt;/script&gt; &lt;div id="jdModal"&gt; &lt;div id="jdModalContent" style="padding:10px;background:#fff;"&gt; &lt;form id="product_form" action="&lt;?php echo site_url(); ?&gt;/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"&gt; &lt;input type="hidden" name="size" value="0" /&gt; &lt;input type="hidden" name="fold" value="0" /&gt; &lt;input type="hidden" name="back" value="0" /&gt; &lt;input type="hidden" name="front" value="0" /&gt; &lt;input type="hidden" name="qlnt" value="0" /&gt; &lt;input type="hidden" name="qlt" value="0" /&gt; &lt;input type="hidden" name="tprice" value="0" /&gt; &lt;input type="hidden" name="productName" value="Business Card" /&gt; &lt;h2&gt;CONTACT US&lt;/h2&gt; &lt;div&gt;&lt;label&gt;Business Name*&lt;/label&gt;&lt;input type="text" name="businessName" value="" /&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;Your Name*&lt;/label&gt;&lt;input type="text" name="yourName" value="" /&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;Email*&lt;/label&gt;&lt;input type="text" name="yourEmail" value="" /&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;Phone*&lt;/label&gt;&lt;input type="text" name="yourPhone" value="" /&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;Delivery Region*&lt;/label&gt;&lt;input type="text" name="deliveryRegion" value="Christchurch" /&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;Employees&lt;/label&gt;&lt;input type="text" name="employees" value="1-5 staff members in my business" /&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;&amp;nbsp;&lt;/label&gt;&lt;p class="note"&gt;If required please upload your files here (2 MB max).&lt;/p&gt;&lt;/div&gt; &lt;div style="position:relative"&gt;&lt;label&gt;Upload file&lt;/label&gt;&lt;input type="hidden" value="" id="jd_upload_uri_1" name="jd_upload_uri_1" /&gt;&lt;input type="text" class="jd_upload_filename" name="jd_upload_file_1" readonly="readonly" /&gt;&lt;input type="button" class="jd_upload" id="jd_upfile_1"value="Browse ..." /&gt; &lt;/div&gt; &lt;div style="position:relative"&gt;&lt;label&gt;Upload file&lt;/label&gt;&lt;input type="hidden" value="" id="jd_upload_uri_2" name="jd_upload_uri_2" /&gt;&lt;input type="text" class="jd_upload_filename" name="jd_upload_file_2" readonly="readonly" /&gt;&lt;input type="button" class="jd_upload" id="jd_upfile_2" value="Browse ..." /&gt; &lt;/div&gt; &lt;div style="position:relative"&gt;&lt;label&gt;Upload file&lt;/label&gt;&lt;input type="hidden" value="" id="jd_upload_uri_3" name="jd_upload_uri_3" /&gt;&lt;input type="text" class="jd_upload_filename" name="jd_upload_file_3" readonly="readonly" /&gt;&lt;input type="button" class="jd_upload" id="jd_upfile_3" value="Browse ..." /&gt; &lt;/div&gt; &lt;div&gt;&lt;label&gt;Message&lt;/label&gt;&lt;textarea name="msg"&gt;&lt;/textarea&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;I'm also interested in&lt;/label&gt;&lt;p&gt;&lt;input type="checkbox" name="interests[]" value="Business Cards" /&gt;&lt;span&gt;Business Cards&lt;/span&gt;&lt;input type="checkbox" name="interests[]" value="Flyer" /&gt;&lt;span&gt;Flyer&lt;/span&gt;&lt;/p&gt;&lt;/div&gt; &lt;div style="margin-bottom:15px"&gt;&lt;label&gt;&amp;nbsp;&lt;/label&gt;&lt;p&gt;&lt;input type="checkbox" name="interests[]" value="Booklets" /&gt;&lt;span&gt;Booklets&lt;/span&gt;&lt;input type="checkbox" name="interests[]" value="Postcards" /&gt;&lt;span&gt;Postcards&lt;/span&gt;&lt;/p&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;&amp;nbsp;&lt;/label&gt;&lt;p class="note"&gt;To help us fight spam, please type the characters you see below.&lt;/p&gt;&lt;/div&gt; &lt;div class="captcha_fix"&gt;&lt;label&gt;&amp;nbsp;&lt;/label&gt;&lt;p style="text-align:right"&gt;&lt;input type="submit" value=" " name="productOrderForm" class="submit-product" /&gt;&lt;input type="text" name="jd_captcha" class="jd_captcha" value="" maxlength="6" /&gt;&lt;img src="&lt;?php echo site_url(); ?&gt;/wp-content/themes/ecs/formHandler.php?captcha" class="jd_captcha_img" /&gt;&lt;/p&gt;&lt;/div&gt;&lt;div id="jd_msg_box"&gt;&lt;p class="text"&gt;&lt;/p&gt;&lt;/div&gt; &lt;div style="clear:both"&gt;&lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;iframe name="formFrame" id="formFrame" src="&lt;?php echo site_url(); ?&gt;/wp-content/themes/ecs/formHandler.php?load"&gt;&lt;/iframe&gt; &lt;div id="file-upload-elem"&gt; &lt;form id="upload_form_1" class="uploader-box uploader-box-1" action="&lt;?php echo site_url(); ?&gt;/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"&gt;&lt;input type="file" name="upload_file_1" class="inp-file" id="upload_file_1" /&gt;&lt;/form&gt; &lt;form id="upload_form_2" class="uploader-box uploader-box-2" action="&lt;?php echo site_url(); ?&gt;/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"&gt;&lt;input type="file" name="upload_file_2" class="inp-file" id="upload_file_2" /&gt;&lt;/form&gt; &lt;form id="upload_form_3" class="uploader-box uploader-box-3" action="&lt;?php echo site_url(); ?&gt;/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"&gt;&lt;input type="file" name="upload_file_3" class="inp-file" id="upload_file_3" /&gt;&lt;/form&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; var fileUploadElem = jQuery("#file-upload-elem").html(); jQuery("#file-upload-elem").remove(); var insertUpload, jd_error, jd_success, upload_error, jd_show_msg, invalid_captcha; var isCustomQuote = false; jQuery(function() { console.log("Test"); if(jQuery("#customs").length &gt; 0 || jQuery("#frprice").length &gt; 0) { jQuery("body").append(fileUploadElem); var calculate = function() { if(jQuery("#frprice").length &gt; 0) { size = (jQuery("#foldet").val()).split(":"); fold = (jQuery("#fold").val()).split(":"); back = (jQuery("#black").val()).split(":"); front = (jQuery("#front").val()).split(":"); qlnt = jQuery("#qlnt").val(); qlt = jQuery("#qlt").val(); var str = parseInt(size[0])+parseInt(fold[0])+parseInt(back[0])+parseInt(front[0])+parseInt(qlnt)+parseInt(qlt); tprice = parseInt(str); jQuery("h3#price span").text(tprice); } }; var jd_timer; var upload_on_progress = 0; jd_error = function(errCode) { clearTimeout(jd_timer); if(errCode == 0) { jd_show_msg("Please fill all required fields (*)"); } if(errCode == 1) { jd_show_msg("Invalid Email Address."); } if(errCode == 2) { //jd_show_msg("Invalid Email Address."); alert("Form sending failed. Please try again later"); } if(errCode == 3) { alert("Invalid Action. Please Contact Administrator."); } }; invalid_captcha = function(x) { if(x == 0) { alert("Please Enter Verification Code."); } else { alert("Invalid Verification Code. Try Again."); jQuery(".jd_captcha_img").each(function() { jQuery(this).attr('src', jQuery(this).attr('src')+'&amp;x='+Math.random()); }); } jQuery(".jd_captcha").val(""); }; jd_success = function() { setTimeout(function() { window.location = document.URL+"?thank-you"; },2000); }; upload_error = function(err,uid) { upload_on_progress--; jQuery("input[name=jd_upload_file_"+uid+"]").val(""); alert(err); }; insertUpload = function(data,file) { upload_on_progress--; var tmpData = data.split(':'); if(tmpData.length == 3) { var tmpCounter = 0; jQuery("input[name=jd_upload_file_"+tmpData[2]+"]").val(file); var updateInput = jQuery("#jd_upload_uri_"+tmpData[2]); var updateData = tmpData[0] + ":" + tmpData[1]; updateInput.val(updateData); } else { alert("Uploading File Error. Please Try Again Later"); } }; jd_show_msg = function(err) { var myBox = jQuery("#jd_msg_box"); myBox.children(".text").text(err); timer = setTimeout(function() { myBox.hide(); },3000); myBox.show(); }; jQuery("select").change(calculate); jQuery("#price").click(function(){ jQuery(this).hide(); }); jQuery(".jd_upload:eq(0), .jd_upload_filename:eq(0)").css("opacity",1); jQuery(".file_input_hidden:eq(0)").show(); var jdModal = jQuery('#jdModal').html(); jQuery('#jdModal').remove(); var uploaderBox = jQuery(".uploader-box"); jQuery(".inp-file").click(function(e) { if(upload_on_progress &gt; 0) { e.preventDefault(); alert("Prevented"); } }); var cboxTopCache = 0; var cboxLeftCache = 0; var fixFileWin = function() { var fixLeft = 585; var cboxOffset = jQuery("#colorbox").offset(); cboxLeftCache = cboxOffset.left; cboxTopCache = jQuery("#jd_upfile_1").offset().top; jQuery(".uploader-box-1").css("top", (jQuery("#jd_upfile_1").offset().top) + "px"); jQuery(".uploader-box-2").css("top",(jQuery("#jd_upfile_2").offset().top) + "px"); jQuery(".uploader-box-3").css("top",(jQuery("#jd_upfile_3").offset().top) + "px"); uploaderBox.css("left",(cboxLeftCache+fixLeft) + "px"); }; jQuery(window).resize(function() { var cboxOffset = jQuery("#colorbox").offset().left; var cboxOffset2 = jQuery("#jd_upfile_1").offset().top; if(cboxOffset != cboxLeftCache || cboxOffset2 != cboxTopCache) { fixFileWin(); } }); var formOnClick = function(e) { e.preventDefault(); isCustomQuote = (jQuery(this).attr('id') == 'frprice')?false:true; jQuery.colorbox({html:jdModal,opacity:0.8,overlayClose:false,transition:'none', onComplete: function() { fixFileWin(); uploaderBox.show(); jQuery(".inp-file").change(function() { var _this = jQuery(this); if(_this.val() != "") { if(upload_on_progress &gt; 0) { alert("Upload is still in progress. Please wait."); } else { jQuery("input[name=jd_"+_this.attr("id")+"]").val("Uploading File.. Please Wait.."); _this.parent().submit(); upload_on_progress++; } } }); if(!isCustomQuote) { jQuery("#product_form input[name=size]").val(size[1]); jQuery("#product_form input[name=fold]").val(fold[1]); jQuery("#product_form input[name=back]").val(back[1]); jQuery("#product_form input[name=front]").val(front[1]); jQuery("#product_form input[name=qlnt]").val(qlnt); jQuery("#product_form input[name=qlt]").val(qlt); jQuery("#product_form input[name=tprice]").val(tprice); } jQuery("#colorbox #product_form").submit(function(e) { var tmp_progress = upload_on_progress; if(tmp_progress &gt; 0) { e.preventDefault(); alert("Upload in progress. Please wait."); } }); }, onClosed: function() { uploaderBox.hide(); }}); }; jQuery("#frprice").submit(formOnClick); jQuery("#customs").click(formOnClick); if(!isCustomQuote) { calculate(); } } }); &lt;/script&gt; &lt;?php while ( have_posts() ) : the_post(); ?&gt; &lt;?php get_template_part( 'content', 'page' ); ?&gt; &lt;?php endwhile; // end of the loop. ?&gt; &lt;/div&gt;&lt;!-- #content --&gt; &lt;/div&gt;&lt;!-- #primary --&gt; &lt;?php get_sidebar('right'); ?&gt; &lt;?php get_footer(); ?&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload