我使用SuiteCRM創建了一個Web到主管表單。使用它生成的代碼,我進一步增強了它,並添加了一組4個複選框。Java腳本代碼在Joomla中不起作用
我將它保存爲HTML普通頁面。當我在瀏覽器中打開這個html頁面時,它正確顯示警報並正確提交所有需要的值到指定的MySQL數據庫表。
下面是該html頁面的完整代碼:
<html lang='en_us'><head><base target=」_parent」 /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><style type="text/css"><!--
form#WebToLeadForm, form#WebToLeadForm * {margin: 0; padding: 0; border: none; color: #333; font-size: 12px; line-height: 1.6em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;}
form#WebToLeadForm {float: left; border: 1px solid #ccc; margin: 10px;}
form#WebToLeadForm h1 {font-size: 32px; font-weight: bold; background-color: rgb(60, 141, 188); color: rgb(247, 247, 247); padding: 10px 20px;}
form#WebToLeadForm h2 {font-size: 24px; font-weight: bold; background-color: rgb(60, 141, 188); color: rgb(247, 247, 247); padding: 10px 20px;}
form#WebToLeadForm h3 {font-size: 12px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h4 {font-size: 10px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h5 {font-size: 8px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h6 {font-size: 6px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm p {padding: 10px 20px;}
form#WebToLeadForm input,
form#WebToLeadForm select,
form#WebToLeadForm textarea {border: 1px solid #ccc; display: block; float: left; min-width: 170px; padding: 5px;}
form#WebToLeadForm select {background-color: white;}
form#WebToLeadForm input[type="button"],
form#WebToLeadForm input[type="submit"] {display: inline; float: none; padding: 5px 10px; width: auto; min-width: auto;}
form#WebToLeadForm input[type="checkbox"],
form#WebToLeadForm input[type="radio"] {width: 18px; min-width: auto;}
form#WebToLeadForm div.col {display: block; float: left; width: 330px; padding: 10px 20px;}
form#WebToLeadForm div.clear {display: block; float: none; clear: both; height: 0px; overflow: hidden;}
form#WebToLeadForm div.center {text-align: center;}
form#WebToLeadForm div.buttons {padding: 10px 0; border-top: 1px solid #ccc; background-color: #f7f7f7}
form#WebToLeadForm label {display: block; float: left; width: 160px; font-weight: bold;}
form#WebToLeadForm span.required {color: #FF0000;}
--></style>
<!-- TODO ???
<script type="text/javascript" src='http://localhost/suitecrm/cache/include/javascript/sugar_grp1.js?v=WCpISilUvngJZgJBZ4o1BA'></script>
--><form id="WebToLeadForm" action="http://localhost/suitecrm/index.php?entryPoint=WebToPersonCapture" method="POST" name="WebToLeadForm">
<h2>FREE Blog Subscription - IT & Networking Blog</h2>
<p style="text-align: center;">Submitting this form will add you to subscription list of IT & Networking Blog. You will receive email about each new post as soon as published.</p>
<p><img src="http://localhost/images/banners/LeadManagement/Blog-Subscription-image.png" alt="" /></p>
<div class="row">
<div class="col"><label>First Name: <span class="required">*</span></label><input name="first_name" id="first_name" type="text" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="col"><label>Last Name: <span class="required">*</span></label><input name="last_name" id="last_name" type="text" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="col"><label>Email Address: <span class="required">*</span></label><input name="email1" id="email1" type="email" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<p style="text-align: center;">Select the target lists, you want to join:</p>
<input type="checkbox" id="IT" value="IT">IT<br>
<input type="checkbox" id="Process" value="Process">Process<br>
<input type="checkbox" id="Management" value="Management">Management<br>
<input type="checkbox" id="Education" value="Education">Education<br>
<p style="text-align: center;">100% Privacy! We will never spam you.</p>
<div class="row center buttons" style="text-align: center;"><input class="button" name="Submit" type="submit" value="Subscribe" onclick="submit_form();" />
<div class="clear"> </div>
</div>
<input name="campaign_id" id="campaign_id" type="hidden" value="13f62ae3-f38d-fe80-a93a-57d4090f764d" /> <input name="assigned_user_id" id="assigned_user_id" type="hidden" value="1" /> <input name="moduleDir" id="moduleDir" type="hidden" value="Prospects" /><input name="prospect_list_id" id="prospect_list_id" type="hidden" value="ac6ce628-de45-4813-d1a0-57e2jgjhr49146" />
<!--my code starts here -->
<input name="list_name_c" id="list_name_c" type="hidden" value="mello" /></div>
</form>
<p>
<script type="text/javascript">// <![CDATA[
function submit_form()
{
if (typeof(validateCaptchaAndSubmit) != 'undefined')
{
validateCaptchaAndSubmit();
}
else
{
check_webtolead_fields();
//document.WebToLeadForm.submit();
check();
}
}
function check_webtolead_fields()
{
if (document.getElementById('bool_id') != null)
{
var reqs = document.getElementById('bool_id').value;
bools = reqs.substring(0, reqs.lastIndexOf(';'));
var bool_fields = new Array();
var bool_fields = bools.split(';');
nbr_fields = bool_fields.length;
for (var i = 0; i < nbr_fields; i++)
{
if (document.getElementById(bool_fields[i]).value == 'on')
{
document.getElementById(bool_fields[i]).value = 1;
}
else
{
document.getElementById(bool_fields[i]).value = 0;
}
}
}
}
function check()
{
var list_name = "";
var test = document.forms[0];
var txt = "";
var i;
for (i = 0; i < test.length; i++)
{
if (test[i].checked)
{
txt = txt + test[i].value + " ";
}
}
list_name = txt;
alert(list_name);
document.getElementById('list_name_c').value = list_name;
}
// ]]></script>
</p></body></html>
但是當我從中剝離開閉& HTML代碼我的問題開始。我在Joomla中創建了一個「自定義HTML」模塊,並將代碼粘貼到文章中並進行訪問。表格在網站的前端形狀正確。
3字段,即名字,姓氏,電子郵件的所有值都正確記錄在數據庫中,但不記錄複選框的值。即使在我點擊提交/訂閱按鈕後立即發生的警報是空白的。
我不知道爲什麼它不是在JOOMLA 3
我的目標努力:爲了有四個複選框,其價值被附加以「 - 」,並存儲在數據庫表中的「list_name_c」字段。
我能做些什麼來使它工作?
與感謝,
RK