How do I get this code to work?

Permalink
I'm not sure how to make the following code work. Whenever I add it all in, the form shows up but the edit bar goes blank after and I can't edit it anymore. I realize I probably have some duplicates of jquery calls here. Can someone give me a step-by-step?

Here's the code:

<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="css/communitystyle.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/jquery-ui-timepicker-addon.js"></script>
<script src="js/livevalidation_standalone.compressed.js"></script>

<script type="text/javascript">
$(function() {

$('#Start').datetimepicker({onSelect: function(dateStr) {
var newDate = $(this).datepicker('getDate');
newDate.setDate(newDate.getDate() + 0);
$('#End').datepicker('option', {minDate: newDate || 0 });
}});
$('#End').datetimepicker({onSelect: function(dateStr) {
var newDate2 = $(this).datepicker('getDate');
newDate2.setDate(newDate2.getDate() - 0);
$('#Start').datepicker('option', {maxDate: newDate2});

}});
});
</script>


<script>
jQuery(document).submit(function(e){
var form = jQuery(e.target);
var LegalCheck = new LiveValidation('legal');
if(form.is("#adform") && LegalCheck.add( Validate.Acceptance ) ){ // check if this is the form that you want (delete this check to apply this to all forms)
e.preventDefault();
jQuery.ajax({
type: "POST",
url: "query.php",
data: form.serialize(), // serializes the form's elements.
success: function(data) {
console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
document.getElementById("txtHint").innerHTML = data;
}
});
}
});
</script>
</head>

<body>
<h1>Community Ads</h1>
<noscript>
<h3>JavaScript is disabled! Please enable JavaScript in your web browser!</h3>

<style type="text/css">
#main-content { display:none; }
</style>
</noscript>

<div id="main-content">
<form id="adform" name="adform" method="post" \>
<br lass="clear" />
<label for="ContactName">name</label><input type="text" name="ContactName" id="ContactName" value="ContactNameHere"/>
<br class="clear" />
<label for="ContactPhone">phone</label><input type="text" name="ContactPhone" id="ContactPhone" value="Phone Number" />
<br class="clear" />
<label for="ContactEmail">email</label><input type="text" name="ContactEmail" id="ContactEmail" value="email" />
<br class="clear" />
<label for="EventTitle">Event title</label><input type="text" name="EventTitle" id="EventTitle" value="title" />
<br class="clear" />
<label for="EventDesc">Event description</label><textarea cols="75" rows="4" name="EventDesc" id="EventDesc" />enter Event description</textarea>
<br class="clear" />
<label for="Category">Category</label>
<select name="Category" id="Category">
<option value="">Type of Event</option>
<option value="Music">Music</option>
<option value="Sports">Sports</option>
<option value="Food">Food</option>
<option value="Entertainment">Entertainment</option>
<option value="Cause Awareness">Cause Awareness</option>
<option value="None of the Above">None of the Above</option>
</select>
<br class="clear" />

<label for="City">City</label>
<select name="City" id="City">
<option value="">Choose Town or City</option>
<option value="Burgessville">Burgessville</option>
<option value="Ilderton">Ilderton</option>
<option value="Ingersoll">Ingersoll</option>
<option value="LA SALETTE">LA SALETTE</option>
<option value="London">London</option>
<option value="Norwich">Norwich</option>
<option value="Otterville">Otterville</option>
<option value="Port Franks">Port Franks</option>
<option value="Thedford">Thedford</option>
<option value="Woodstock">Woodstock</option>
</select>
<br class="clear" />

<label for="Address">Address</label><input type="text" name="Address" id="Address" value="Event Location" />
<br class="clear" />
<label for="Start">Start</label><input type="datetime" name="Start" id="Start" />
<br class="clear" />
<label for="End">End</label><input type="datetime" name="End" id="End" /></input>
<br class="clear" />
<label for="Cost">Cost</label><input type="text" name="Cost" id="Cost" value="0.00" />
<input type="text" name="JamesSpader" id="Catchall" style="display:none;" />
<br class="clear" />
<label for "legal"><input type="checkbox" name="legal" id="legal" />Check here if you agree that all this information is correct and accurate</input>
<br class="clear" />
<input type="submit" name="submit" id="submit" Value="Submit" /></input>
<script type="text/javascript">
var submitForm1 = new LiveValidation('EventDesc', {onlyOnSubmit: true } );
var submitForm2 = new LiveValidation('ContactEmail', {onlyOnSubmit: true } );
var submitForm3 = new LiveValidation('EventTitle', {onlyOnSubmit: true } );
var contactName = new LiveValidation('ContactName' , {onlyOnSubmit: true });
var Address = new LiveValidation('Address' , {onlyOnSubmit: true });
var ContactPhone = new LiveValidation('ContactPhone' , {onlyOnSubmit: true });
submitForm1.add(Validate.Length, { minimum: 25, maximum: 300});
submitForm2.add(Validate.Email, { failureMessage: "Please supply an Email address" } );
submitForm2.add(Validate.Length, {minimum: 10, tooShortMessage: "Not long Enough" } );
submitForm3.add(Validate.Length, {minimum: 10, tooShortMessage: "Please Enter a Title" } );
contactName.add(Validate.Exclusion, { within: [ 'ContactNameHere' ], partialMatch: true, failureMessage: "Please Supply a Contact Name" } );
contactName.add(Validate.Length, {minimum: 9, tooShortMessage: "Please supply a full contact name" } );
Address.add(Validate.Exclusion, { within: [ 'Event Location' ], partialMatch: true, failureMessage: "Please Supply an Event Location" } );
ContactPhone.add( Validate.Format, { pattern: /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/, failureMessage: "Please Supply a Contact Phone Number" } );


</script>
</form>
</div>
<br>
<div id="txtHint"></div>

View Replies:
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi execulink,

What version of concrete5 are you using?

Also, in the future, to make pasted code more readable, please use the [code][/code] tags.

At the beginning of the head, there are issues that are most likely causing the problem.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

jQuery and jQuery UI are automatically loaded by the concrete5 interface. Loading them twice can cause the interface to break.

"The jQuery UI stylesheet that's included with Concrete5 is fairly customized, so including a different one generated from jqueryui.com might break things like Concrete5's dialogs."
execulink replied on at Permalink Reply
Thanks for your reply.

I took out those few lines but it still seems to be breaking the page. Edit bar goes blank and I lose all functionality.
MrKDilkington replied on at Permalink Reply
MrKDilkington
Have you checked the browser console for errors?

Try commenting out all the CSS and JS files and the JS in your <script> tags.

If the form still works, then uncomment the files and scripts one by one until it breaks. This could point you to the offender.