2013-06-18 47 views
0

我有一個腳本,它是一個簡單的HTML/JS聯繫表單。 該網站是基於Joomla。具體來說,是YooTheme模板之一。 它也在運行WidgetKit。當其他地方包含JavaScript時,JavaScript不能正常工作

我有問題之前已經解決了在這裏與我的腳本,包括JS和WidgetKit包括JS。

我刪除了我的JS包含。

但是,現在JS實際上並沒有在我的腳本上工作。表單通過電子郵件發送,無需驗證。

該腳本在未將Joomla,IE放入其自己的PHP文件時工作,所以我知道代碼是可以的。

這只是不工作時,添加到Joomla。我懷疑它有某種衝突。

我需要的是JS驗證表單併發送電子郵件。目前它只是發送電子郵件。

這裏是代碼,我目前的樣子:

<!DOCTYPE HTML> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta charset="utf-8" /> 

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" href="rppalmer12/style.css"> 


<script type="text/javascript"> 
//$.noConflict(); 
$(document).ready(function() { 

function isInt(n) { 
return typeof n === 'number' && n % 1 == 0; 
} 

// Form validation 
$(".darkBtn").click(function(e) { 
e.preventDefault(); 
var email_check = /^[A-Z0-9._%+-][email protected][A-Z0-9.-]+\.[A-Z]{2,6}$/i; 
var email = $("form.form_contact .email").val(); 

var zipCheck = /[A-Z]{1,2}[0-9R][0-9A-Z]? [0-9][ABD-HJLNP-UW-Z]{2}/i; 
var zip = $("form.form_contact .zipcode").val(); 

var phoneCheck = /^\d+$/; 
var phone = $("form.form_contact .phone").val(); 

var error = ""; 

if(!email_check.test(email)) 
{ 
error = "Please give a valid email address."; 
} 

if(!zipCheck.test(zip)) 
{ 
error = "Please give a valid postcode."; 
} 

if(!phoneCheck.test(phone) || phone.length != 11) 
{ 
error = "Please give a valid phone number."; 
} 

// Check if all is filled 
if($(".gender").val() == 0 || $(".title").val() == 0 || $(".fname").val() == "" || $(".sname").val() == "" || $(".phone").val() == "" || $(".email").val() == "" || $(".zipcode").val() == "" || $(".dday").val() == 0 || $(".dmonth").val() == 0 || $(".dyear").val() == 0 || $(".insurance").val() == 0 || $(".sday").val() == 0 || $(".smonth").val() == 0 || $(".syear").val() == 0 || $(".hear").val() == 0) { 
error = "Please fill in all the form."; 
} 

// No error ? -> Submit 
if(error == "") 
{ 

$("form#contact_form").submit();$(".form_error").hide(); 
} else { 
$(".form_error").empty().text(error); 
$(".form_error").show(); 
} 
}); 
}); 
</script> 
</head> 
<body><?php if (isset($_POST['action'])) {  $to = "[email protected]"; $emailfrom = "[email protected]"; $subject = "Insurance Quote"; $message = "\r\n Title:" . $_POST['title'] . "\r\n First Name:" . $_POST['fname'] . "\r\n Surname:" . $_POST['sname'] . "\r\n Gender:" . $_POST['gender'] . "\r\n Number: " . $_POST['number'] . "\r\n Email: " . $_POST['email'] . "\r\n Post: " . $_POST['post'] . "\r\n DOB:Day: " . $_POST['dobday'] . "\r\n DOB:Month: " . $_POST['dobmonth'] . "\r\n DOB:Year:" . $_POST['dobyear'] . "\r\n Hear: " . $_POST['hear'] . "\r\n Insurance Type:" . $_POST['type'] . "\r\n START:Day:" . $_POST['startday'] . "\r\n START:Month:" . $_POST['startmonth'] . "\r\n START:Year:" . $_POST['startyear']; $headers = "From:" . $emailfrom;  if (mail($to, $subject, $message, $headers)) {  echo "Thankyou for using B"; } echo "done";} else { ?> 
<div class="menu_contact"> 
<h3>Get A Quote</h3> 
<hr /> 
<form action="" method="POST" class="form_contact" id="contact_form"> 

<label>Title:</label> 
<select class="input title" name="title"> 
<option value="0">Please select</option> 
<option value="Mr">Mr</option> 
<option value="Mrs">Mrs</option> 
<option value="Miss">Miss</option> 
<option value="Ms">Ms</option> 
</select> 
<label>First name:</label> 
<input type="text" class="input fname" placeholder="John" name="fname"/> 
<label>Surname:</label> 
<input type="text" class="input sname" placeholder="Doe" name="sname" /> 
<label>Gender:</label> 
<select class="input gender" name="gender"> 
<option value="0">Please select</option> 
<option>Male</option> 
<option>Female</option> 
</select> 
<label>Contact Number:</label> 
<input type="text" class="input phone" placeholder="Your number" name="number" /> 
<label>Email:</label> 
<input type="email" class="input email" placeholder="[email protected]" name="email"/> 
<label>Postcode:</label> 
<input type="text" class="input zipcode" placeholder="CW3 9SS" name="post"/> 
<label>Date of birth:</label> 
<select class="input dateDay bday" name="dobday"> 
<option value="0">Day</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
<option value="8">8</option> 
<option value="9">9</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
<option value="13">13</option> 
<option value="14">14</option> 
<option value="15">15</option> 
<option value="16">16</option> 
<option value="17">17</option> 
<option value="18">18</option> 
<option value="19">19</option> 
<option value="20">20</option> 
<option value="21">21</option> 
<option value="22">22</option> 
<option value="23">23</option> 
<option value="24">24</option> 
<option value="25">25</option> 
<option value="26">26</option> 
<option value="27">27</option> 
<option value="28">28</option> 
<option value="29">29</option> 
<option value="30">30</option> 
<option value="31">31</option> 
</select> 
<select class="input dateMonth bmonth" name="dobmonth"> 
<option value="0">Month</option> 
<option value="January">January</option> 
<option value="February">February</option> 
<option value="March">March</option> 
<option value="April">April</option> 
<option value="May">May</option> 
<option value="June">June</option> 
<option value="July">July</option> 
<option value="August">August</option> 
<option value="September">September</option> 
<option value="October">October</option> 
<option value="November">November</option> 
<option value="December">December</option> 
</select> 
<select class="input dateYear byear" name="dobyear"> 
<option value="0">Year</option> 
<option value="1996">1996</option> 
<option value="1995">1995</option> 
<option value="1994">1994</option> 
<option value="1993">1993</option> 
<option value="1992">1992</option> 
<option value="1991">1991</option> 
<option value="1990">1990</option> 
<option value="1989">1989</option> 
<option value="1988">1988</option> 
<option value="1987">1987</option> 
<option value="1986">1986</option> 
<option value="1985">1985</option> 
<option value="1984">1984</option> 
<option value="1983">1983</option> 
<option value="1982">1982</option> 
<option value="1981">1981</option> 
<option value="1980">1980</option> 
<option value="1979">1979</option> 
<option value="1978">1978</option> 
<option value="1977">1977</option> 
<option value="1976">1976</option> 
<option value="1975">1975</option> 
<option value="1974">1974</option> 
<option value="1973">1973</option> 
<option value="1972">1972</option> 
<option value="1971">1971</option> 
<option value="1970">1970</option> 
<option value="1969">1969</option> 
<option value="1968">1968</option> 
<option value="1967">1967</option> 
<option value="1966">1966</option> 
<option value="1965">1965</option> 
<option value="1964">1964</option> 
<option value="1963">1963</option> 
<option value="1962">1962</option> 
<option value="1961">1961</option> 
<option value="1960">1960</option> 
<option value="1959">1959</option> 
<option value="1958">1958</option> 
<option value="1957">1957</option> 
<option value="1956">1956</option> 
<option value="1955">1955</option> 
<option value="1954">1954</option> 
<option value="1953">1953</option> 
<option value="1952">1952</option> 
<option value="1951">1951</option> 
<option value="1950">1950</option> 
<option value="1949">1949</option> 
<option value="1948">1948</option> 
<option value="1947">1947</option> 
<option value="1946">1946</option> 
<option value="1945">1945</option> 
<option value="1944">1944</option> 
<option value="1943">1943</option> 
<option value="1942">1942</option> 
<option value="1941">1941</option> 
<option value="1940">1940</option> 
<option value="1939">1939</option> 
<option value="1938">1938</option> 
<option value="1937">1937</option> 
<option value="1936">1936</option> 
<option value="1935">1935</option> 
<option value="1934">1934</option> 
<option value="1933">1933</option> 
<option value="1932">1932</option> 
<option value="1931">1931</option> 
<option value="1930">1930</option> 
<option value="1929">1929</option> 
<option value="1928">1928</option> 
<option value="1927">1927</option> 
<option value="1926">1926</option> 
<option value="1925">1925</option> 
<option value="1924">1924</option> 
<option value="1923">1923</option> 
<option value="1922">1922</option> 
<option value="1921">1921</option> 
<option value="1920">1920</option> 
<option value="1919">1919</option> 
<option value="1918">1918</option> 
<option value="1917">1917</option> 
<option value="1916">1916</option> 
<option value="1915">1915</option> 
<option value="1914">1914</option> 
<option value="1913">1913</option> 
</select> 
<label>Insurance Type:</label> 
<select class="input insurance" name="type"> 
<option value="0">Please select</option> 
<option>Type 1</option> 
<option>Type 2</option> 
</select> 
<label>Start Date:</label> 
<select class="input dateDay sday" name="startday"> 
<option value="0">Day</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
<option value="8">8</option> 
<option value="9">9</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
<option value="13">13</option> 
<option value="14">14</option> 
<option value="15">15</option> 
<option value="16">16</option> 
<option value="17">17</option> 
<option value="18">18</option> 
<option value="19">19</option> 
<option value="20">20</option> 
<option value="21">21</option> 
<option value="22">22</option> 
<option value="23">23</option> 
<option value="24">24</option> 
<option value="25">25</option> 
<option value="26">26</option> 
<option value="27">27</option> 
<option value="28">28</option> 
<option value="29">29</option> 
<option value="30">30</option> 
<option value="31">31</option> 
</select> 
<select class="input dateMonth smonth" name="startmonth"> 
<option value="0">Month</option> 
<option value="January">January</option> 
<option value="February">February</option> 
<option value="March">March</option> 
<option value="April">April</option> 
<option value="May">May</option> 
<option value="June">June</option> 
<option value="July">July</option> 
<option value="August">August</option> 
<option value="September">September</option> 
<option value="October">October</option> 
<option value="November">November</option> 
<option value="December">December</option> 
</select> 
<select class="input dateYear syear" name="startyear"> 
<option value="0">Year</option> 
<option value='2013'>2013</option> 
<option value='2014'>2014</option> 

</select> 
<label>Where did you hear about us:</label> 
<select class="input hear" name="hear"> 
<option value="0">Please select</option> 
<option value="google">Google</option> 
<option value="recommendation">Recommendation</option> 
<option value="email">Email</option> 
<option value="Magazine">Magazine</option> 
<option value="Facebook">Facebook</option> 
<option value="Other">Other</option> 
</select> 
<div class="form_error" style="display:none;color:red;text-align:center;text-shadow:none;width:278px;"></div><input type="hidden" name="action" value="postform" /> 
<input class="darkBtn submit" type="submit" value="Get A Quote >" name="test"> 
</form> 
</div><?php } ?> 
</body> 
</html> 

我已經嘗試了 「變量$ J = jQuery.noConflict();」伎倆,但無濟於事。

任何幫助,將不勝感激。

+0

過得好從螢火蟲或Chrome瀏覽器開發工具的任何錯誤? – Lodder

+0

沒有伴侶,什麼也沒有 –

+0

我一直在這裏約6個小時。大聲笑。我發現它不僅僅是WidgetKit。它只是通常與Joomla –

回答

0

好的我想我知道問題是什麼。您不會將Javascript添加到正確的位置。而不是簡單地增加它的模塊內的任何地方,使用以下方法:

$document = JFactory::getDocument(); 
$document->addScriptDeclaration(' 
    // your code goes here 
'); 

假設你已經保持了標準爲Joomla模塊中添加以下代碼其間頂部的<?php ?>標籤。

希望這有助於

+0

我在哪裏添加這在我的代碼多數民衆贊成在OP?我有點困惑。從來沒有碰過像JFactory這樣的Joomla代碼。不知道如何使用它 –

+0

你不能簡單地將代碼添加到sourcerer中。它需要成爲一個合適的模塊。您可以使用我的[模塊生成器](http://joomjunk.co.uk/extras/module-generator.html)並查看[Joomla Docs](http://docs.joomla.org/Module_Development) – Lodder

+0

我曾使用Sourcerer來添加PHP,它工作正常嗎?和CSS –