Member Avatar for rosstafarian

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.

  • 4 Contributors
  • 7 Replies
  • 349 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by stbuchok
Member Avatar for pritaeas

I don't see a jquery include.

Member Avatar for rosstafarian

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

Member Avatar for pritaeas

Sorry. Am sure someone familiar to Joomla can help.

Member Avatar for rosstafarian

No problem, thanks anyways

Member Avatar for almostbob

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>

Member Avatar for rosstafarian

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

Member Avatar for stbuchok

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.

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.