jquery and ajax form problem
hi i am new here my name is saad, i have some issue in developing one jquery script
i have 3 page one index.php , ajax.js, boo2.php , process.php
now problem is this that when i run index.php the form does not work properly, when i run boo2.php it work perfect, and when i put form code in index.php it works i want to keep form code in boo2.php so it update every 5-10 seconds is there any way to make like this because i will update mysql database and it should show the database form so please help me out down is code
this is index.php code
Copy code
Code:
<script src="<?php bloginfo('template_directory'); ?>/js/jquery-1.2.3.pack.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/runonload.js"></script>
<link href="<?php bloginfo('template_directory'); ?>/css/tutorial.css" media="all" type="text/css" rel="stylesheet">
<script src="<?php bloginfo('template_directory'); ?>/ajax.js"></script>
<script type="text/javascript">
refreshdiv_timeinwashington();
</script>
this is ajax.js code
Code:
// The AJAX function...
function AJAX(){
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}
}
// Timestamp for preventing IE caching the GET request (common function)
function fetch_unix_timestamp()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
////////////////////////////////
//
// Refreshing the DIV TIMEINWASHINGTON
//
////////////////////////////////
function refreshdiv_timeinwashington(){
// Customise those settings
var seconds = 5;
var divid = "timeinwashington";
var url = "http://pickthefights.com/boo2/";
// Create xmlHttp
var xmlHttp_two = AJAX();
// No cache
var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;
// The code...
xmlHttp_two.onreadystatechange=function(){
if(xmlHttp_two.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp_two.responseText;
setTimeout('refreshdiv_timeinwashington()',seconds*1000);
}
}
xmlHttp_two.open("GET",nocacheurl,true);
xmlHttp_two.send(null);
}
// Start the refreshing process
window.onload = function startrefresh(){
setTimeout('refreshdiv_timeinwashington()',seconds*1000);
}
////////////////////////////////
//
// form code
//
////////////////////////////////
$(function FORM() {
$('.error').hide();
$('input.text-input').css({backgroundColor:"#FFFFFF"});
$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#FFDDAA"});
});
$('input.text-input').blur(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});
$(".button").click(function() {
// validate and process form
// first hide any error messages
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phone_error").show();
$("input#phone").focus();
return false;
}
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
//alert (dataString);return false;
$.ajaxs({
type: "POST",
url: "process.php",
data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
});
});
runOnLoad(function(){
$("input#name").select().focus();
});
here is boo2.php code
Code:
<script src="<?php bloginfo('template_directory'); ?>/js/jquery-1.2.3.pack.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/runonload.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/tutorial.js"></script>
<link href="<?php bloginfo('template_directory'); ?>/css/tutorial.css" media="all" type="text/css" rel="stylesheet">
<script src="<?php bloginfo('template_directory'); ?>/ajax.js"></script>
<div id="contact_form">
<form name="contact" method="post" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<label for="email" id="email_label">Return Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">This field is required.</label>
<label for="phone" id="phone_label">Return Phone</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">This field is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
and in process.php that is form process i don't think so that i need to show that code that is only form process
thanks for reading my post now please help me out please :)
