JavaScript Not Working When Included Elsewhere

Question

rosstafarian 12 Light Poster

11 Years Ago

I have a script which is a simple HTML/JS contact form. The site is based on Joomla. Specifically, one of the YooTheme Templates. It is also running WidgetKit.

I have had issues before which have been solved on here which were to do with my script including JS and WidgetKit including JS.

I removed my JS inclusion.

However, now the JS does not actually work on my script. The form gets emailed without validation.

The script works when not put into Joomla, IE, in its own PHP file so i know the code is ok.

It just does not work when added to Joomla. I suspect its some kind of conflict.

What i need is for the JS to validate the form AND send the email. At the moment it just sends the email.

Here is the code i have at the moment:

<!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._%+-]+@[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 = "test@test.com";  $emailfrom = "test@test.com";   $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="something@domain.com" 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>

I have tried the "var $j = jQuery.noConflict();" Trick but to no avail.

Any help would be appreciated.

javascript

4 Contributors
7 Replies
349 Views
1 Day Discussion Span
Latest Post 11 Years Ago Latest Post by stbuchok

pritaeas 2,194 ¯\_(ツ)_/¯

11 Years Ago

I don't see a jquery include.

pritaeas 2,194 ¯\_(ツ)_/¯

11 Years Ago

Sorry. Am sure someone familiar to Joomla can help.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

rosstafarian 12 Light Poster · Answer 1 · 2013-06-18T22:19:41+00:00

I said above that i removed my jquery include due to the fact that WidgetKit has already loaded the jquery onto the page.

If i keep my inclusion in aswell, it causes errors to the widgetkit

rosstafarian 12 Light Poster · Answer 2 · 2013-06-18T22:27:27+00:00

rosstafarian 12 Light Poster

11 Years Ago

No problem, thanks anyways

almostbob 866 Retired: passive income ROCKS · Answer 3 · 2013-06-18T22:33:39+00:00

not part of the q, <label> use is wrong (non functional)
html <label> is used to add clickable text to input buttons, does nothing if used elsewhere
<input type='radio' name='gender' value='M' id='bloke'> <label for='bloke'>Male</label>
<input type='radio' name='gender' value='F' id='sheila'> <label for='sheila'>Female</label>
<input type='radio' name='gender' value='?' id='shim'> <label for='shim'>confused</label>

rosstafarian 12 Light Poster · Answer 4 · 2013-06-18T22:39:08+00:00

The label tag is then formatted using CSS. So it is used...

stbuchok · Answer 5 · 2013-06-20T12:20:28+00:00

Is script debugging enabled? Are there any JavaScript errors? If so, what are they. If you put alert('test'); at line 15, do you see the alert when you go to the page? If not, do you get an alert if you put it at line 13 (not commented out)?
Saying something doesn't work without any error message or a page to go to kinda makes it hard to help you out.