使用 jquery load 加载 php 表单后提交按钮不起作用答案

【问题标题】：submit button not working after loading a php form using jquery load使用 jquery load 加载 php 表单后提交按钮不起作用
【发布时间】：2012-11-27 08:19:03
【问题描述】：

我有这个网站正在建设中。 http://www.orangewebscape.com/

问题出在包页面上。当您单击包菜单项时，jquery 加载会加载一个名为 wrap2.php 的 php 文件。 wrap2 页面有一个带有许多复选框、3 个文本框和一个提交按钮的大表单。提交按钮在 chrome 中运行良好，但在所有其他可用浏览器（IE9、opera、mozilla）中都无法运行。虽然它适用于 IE8。甚至 css 样式也不适用于表单和提交按钮。

jQuery 加载

    $('#tabs li').click(function(){
     $("#loading").show();

     $('#container').load('views/'+$(this).attr("class")+'.php', function(){  

setTimeout( "jQuery('#dloading').hide();",2000 );
     });
        return false;
    });

wrap2.php

<div id="wrap2" >


&nbsp&nbsp&nbsp&nbsp

<h1>&nbsp&nbsp&nbsp&nbsp<span id="packtop">Build Your Order</span></h1><br><br>
<div id="buildtext"> We have choices and options for everybody. Please pick as many you like and   submit a query. We assure you of an instant reply.</div>
<div class="servcont">
<form name="packages" action="core/orderplace.php" method="POST"       onsubmit="xmlhttpPost3('core/orderplace.php', 'packages', 'MyResult4', '<img src=\'pleasewait.gif\'>'); return false;">
<br>
<div class="plancont">
<div id="plantit">Biz Launch Pack</div> 

<div id="planbody">
<ul>
<li><img src="styles/images/2.jpg" width="10" height="10" /> Web Presence Pack <span id="price">INR 6717*</span></li>

<hr>
<li>Responsive Website Dev<span id="price"> 2499</span></li>
<li>Web Hosting <span id="price"> 2499</span></li>
<li>Email id's (pro+) <span id="price"> 1320</span></li>
<li>Domain name <span id="price"> 398</span></li>
<li>Customised Blog <span id="price"> Free</span></li>
</ul>
<ul>
<br>
<li><img src="styles/images/2.jpg" width="10" height="10" /> Print & Design Pack <span id="price">INR 1196*</span></li>

<hr>
<li>Logo Design<span id="price"> 298</span></li>
<li>Business card <span id="price"> 198</span></li>
<li>Brochure design<span id="price"> 498</span></li>
<li>Tshirt Design<span id="price"> 198</span></li>

</ul><br>
<ul>
<li><img src="styles/images/2.jpg" width="10" height="10" /> Stationary design Pack <span id="price">INR 896*</span></li>

<hr>
<li>Letter Head<span id="price"> 198</span></li>
<li>Envelope Deisgn<span id="price"> 198</span></li>
<li>Folder design<span id="price"> 298</span></li>
<li>CD Cover design<span id="price"> 198</span></li>

</ul>
<div id="totprice">Total = INR <span id="str">8800</span>*</div>
</div>

<div id="finalpricefoot">Offer Price - <b>INR 7800</b>* </div>
<div id="cartbt"><br><br><br> <input type="checkbox" name="pack[]" value="Business Pack" /> Select This Package</div>
</div>






<div class="plancont"> 
<div id="plantit">Bands ,Events  & Gigs</div> 

<div id="planbody">
<ul>
<li><img src="styles/images/2.jpg" width="10" height="10" /> Web Presence Pack <span id="price">INR 5397*</span></li>

<hr>
<li>Responsive Website Dev<span id="price"> 2499</span></li>
<li>Web Hosting <span id="price"> 2499</span></li>
<li>Domain name <span id="price"> 398</span></li>
<li>Customised Blog <span id="price"> Free</span></li>
<br>
</ul>
<ul>
<br>
<li><img src="styles/images/2.jpg" width="10" height="10" /> Print & Design Pack <span id="price">INR 1393*</span></li>

<hr>
<li>Logo Design<span id="price"> 298</span></li>
<li>Flyer Design <span id="price"> 199</span></li>
<li>Poster design<span id="price"> 499</span></li>
<li>Banner Design<span id="price"> 199</span></li>
<li>Tshirt Design<span id="price"> 198</span></li>


</ul><br>
<ul>
<li><img src="styles/images/2.jpg" width="10" height="10" /> Creative Pack <span id="price">99*</span></li>

<hr>
<li>Mascot Design<span id="price"> Variable</span></li>

<li>FB timeline cover<span id="price"> 99</span></li>

</ul><br>



<div id="totprice">Total = INR <span id="str">6889</span>*</div>
</div>

<div id="finalpricefoot">Offer Price - <b>INR 5889</b>* </div>
<div id="cartbt"><br><br><br><input type="checkbox" name="pack[]" value="Band,Events,Gigs,Package" /> Select This Package</div>
</div>
<div class="plancont"><div id="plantit">Individuals / Professionals</div> 

<div id="planbody">
<ul>
<li><img src="styles/images/2.jpg" width="10" height="10" /> Web Presence Pack <span id="price">INR 5397*</span></li>

<hr>
<li>Responsive Website Dev<span id="price"> 2499</span></li>
<li>Web Hosting <span id="price"> 2499</span></li>
<li>Domain name <span id="price"> 399</span></li>
<li>Customised Blog <span id="price"> Free</span></li>
<br>
</ul>
<ul>
<br>
<li><img src="styles/images/2.jpg" width="10" height="10" /> Print & Design Pack <span id="price">INR 497*</span></li>

<hr>
<li>Logo Design<span id="price"> 298</span></li>
<li>Business card <span id="price"> 199</span></li>
<li>Book Cover Design<span id="price"> Variable</span></li>
<br>
</ul><br>
<ul>
<li><img src="styles/images/2.jpg" width="10" height="10" /> Stationary design Pack <span id="price">INR 896*</span></li>

<hr>
<li>Letter Head<span id="price"> 198</span></li>
<li>Envelope Deisgn<span id="price"> 198</span></li>
<li>Folder design<span id="price"> 298</span></li>
<li>CD Cover design<span id="price"> 198</span></li>

</ul>
<div id="totprice">Total = INR <span id="str">6790</span>*</div>
</div>

<div id="finalpricefoot">Offer Price - <b>INR 5790</b>* </div>
<div id="cartbt"><br><br><br><input type="checkbox" name="pack[]" value="Individual & Professionals"> Select This Package</div>


</div>







<br><br><br><br>



</div><br><br>
<h1><br><br>&nbsp&nbsp&nbsp&nbspIndividual Picks</h1><br>
<div id="itemcont">


<div id="indiitem">
<div id="inditext"> Web Presence Pack</div>
<div id="indibody">Website + Email+ Hosting + Domain+Blog <br><br>   
<div id="indiprice"><input type="checkbox" name="pack[]" value="Webpack subscription">INR 6717*</div>

</div>
</div>
<div id="indiitem">
<div id="inditext"> Website Development</div>
<div id="indibody">Responsive Website + CSS3 + amazing stuff<br><br>   
<div id="indiprice"><input type="checkbox" name="pack[]" value="Website development">INR 2499*</div>
</div>
</div>
<div id="indiitem">
<div id="inditext"> Business Card Design</div>
<div id="indibody">High Quality & Innovative cards. 1 or 2 Sided<br><br>   
<div id="indiprice"><input type="checkbox" name="pack[]" value="business card Designing">INR 198*</div>
</div>
</div>
<div id="indiitem">
<div id="inditext">Logo Designing</div>
<div id="indibody">Highly creative logo designing<br><br><br>      
<div id="indiprice"><input type="checkbox" name="pack[]" value="Logo Designing">INR 298*</div>
</div>
</div>
<div id="indiitem">
<div id="inditext"> Brochure Designing</div>
<div id="indibody">Various Types of Brochures. 2,3 <br>& 4 fold.<br><br>   
<div id="indiprice"><input type="checkbox" name="pack[]" value="Brochure Designing">INR 498*</div>
</div>
</div>
<div id="indiitem">
<div id="inditext">T-shirt Designing</div>
<div id="indibody">Simplistic or innovative designs<br><br>   <br>   
<div id="indiprice"><input type="checkbox" name="pack[]" value="T-shirt Designing">INR 198*</div>
</div>
</div>
<div id="indiitem">
<div id="inditext">Flyer Designing</div>
<div id="indibody">Flyers for parties, events, gigs & shows. HQ<br><br>   
<div id="indiprice"><input type="checkbox" name="pack[]" value="Flyer Designing">INR 199*</div>
</div>
</div>
<div id="indiitem">
<div id="inditext">Poster Designing</div>
<div id="indibody">Poster for anything.<br><br>   <br>   
<div id="indiprice"><input type="checkbox" name="pack[]" value="Poster Designing">INR 499*</div>
</div>
</div>
<div id="indiitem">
<div id="inditext"> Banner Designing</div>
<div id="indibody">Simplistic or High Quality Banner designing.<br><br>   
<div id="indiprice"><input type="checkbox" name="pack[]" value="Banner Designing">INR 399*</div>
</div>
</div>
<div id="indiitem">
<div id="inditext">Letter Head</div>
<div id="indibody">Part of Corporate Branding<br><br>   <br> 
<div id="indiprice"><input type="checkbox" name="pack[]" value="letter Head Designing">INR 199*</div>
</div>
</div>
<div id="indiitem">
<div id="inditext">Envelope Design</div>
<div id="indibody">Creative and Awe-inspiring designs<br><br>   <br> 
<div id="indiprice"><input type="checkbox" name="pack[]" value="Envelope Designing">INR 199*</div>
</div>
</div>
<div id="indiitem">
<div id="inditext">Folder Design</div>
<div id="indibody">Simple and eye catching deisgns for folders.<br><br>   
<div id="indiprice"><input type="checkbox" name="pack[]" value="Folder Design">INR 299*</div>
</div>
</div>
<div id="indiitem">
<div id="inditext">CD Cover Design</div>
<div id="indibody">CD covers.<br><br>   <br> 
<div id="indiprice"><input type="checkbox" name="pack[]" value="CDcover Designing">INR 199*</div>
</div>
</div>
<div id="indiitem">
<div id="inditext">App Icon & Buttons Design</div>
<div id="indibody">Icons & Buttons for websites & Apps<br><br>   
<div id="indiprice"><input type="checkbox" name="pack[]" value="Application Icon Designing">INR 199*</div>
</div>
</div>
<div id="indiitem">
<div id="inditext">Books Cover Design</div>
<div id="indibody">Book covers.<br><br>   <br> 
<div id="indiprice"><input type="checkbox" name="pack[]" value="Book Cover Designing">INR 499*</div>
</div>
</div>
<div id="indiitem">
<div id="inditext">Mascot Designing</div>
<div id="indibody">Highly Creative Thinking<br><br><br> 
<div id="indiprice"><input type="checkbox" name="pack[]" value="Mascot Designing">Variable</div>
</div>
</div>
</div>



<div id="formel">Name *</div>
<div id="formel"><input type="text" name="fname" id="fname" size="20" ></div>
<div id="formel">Email * </div>
<div id="formel"><input type="text" name="fmail" id="fmail" size="20" ></div><br><br>
<div id="formel">Phone No </div>
<div id="formel"><input type="text" name="phone2" id="phone2" size="20" ></div>
<div id="formel">Country *</div>
<div id="formel"><input type="text" name="country" id="country" size="20" ></div>

<input type="submit" id="formsent" value="Order" name="forpackages" />
<div id="MyResult4" ></div>

</form>
<br>



</div>

【问题讨论】：

你有xmlhttpPost3函数吗？
你！它在一个单独的 .js 中！这里的问题是当我单击提交按钮时没有任何效果。但在 chrome 中一切正常
我见过的最糟糕的代码。 id 像 class、settimeout 一样使用，而不是 .delay().. 和 .php 文件，只有 html。

标签： php jquery html

【解决方案1】：

看起来 HTML 标记不平衡。 个人精选部分之前似乎有一个额外的</div>。不同的浏览器会尝试从不同的错误中恢复。在这种情况下，额外的结束标记可能导致 <form> 在 Name * 之前的行上的 </div> 上结束，即在解析按钮之前，因此按钮未连接到任何形式。

【讨论】：

让我再签到！但是，如果我尝试直接通过浏览器而不是 jquery 加载打开 php 表单，则提交按钮可以工作。
@stasGrin 这是我第一次尝试 Web 开发。我要学很多东西。
@SaurabhShukla 实际上再次查看它似乎是正确的，抱歉。它只是在最后缺少一个关闭标签，这让我失望。但为了调试，您可以尝试减少代码，删除表单中除按钮和单个字段之外的所有内容，看看是否可行。
我应该如何将复选框与 div 分组？
问题已解决。改变了几个div，瞧！感谢您的帮助。