jquery and ajax form problem

[saad_sinpk]

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

    <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

    // 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

    <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

[jscheuer1]

Assuming this all works up to the point where you have:

            var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
            //alert (dataString);return false;

Like if you take away the red comment token (//) there, it alerts the expected dataString and prevents the form from submitting.

If that much works, I see a problem with the very next command:

            $.ajaxs({

That should be:

            $.ajax({

with no s. There could also be other problems.

[saad_sinpk]

still not working here is new ajax code i use

// 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 = "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);
}


$(function () {
  $('.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;
		
		$.ajax({
      type: "POST",
      url: "http://pickthefights.com/wp-content/themes/alyeska/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='http://pickthefights.com/wp-content/themes/alyeska/images/check.png' />");
        });
      }
     });
    return false;
	});
});
runOnLoad(function(){
  $("input#name").select().focus();
});

[jscheuer1]

Do you have this up live somewhere? If so, post a link to it. Perhaps an error code will pop up in one of my developer's tools.

Please post a link to a page on your site that contains the problematic code so we can check it out.

[saad_sinpk]

ok here it's work
http://tinyurl.com/6cwmhrr
not here
http://tinyurl.com/5vns5d6

[jscheuer1]

OK, to begin with get rid of all of these scripts:

////////////////////////////////
//
// Refreshing the DIV TIMEINWASHINGTON
//
////////////////////////////////

function refreshdiv_timeinwashington(){
 . . .

all of them. Some are making errors, and when they do work, they take the focus away from the form. Once we get the form working, we can worry about bringing them back later with some changes that hopefully won't cause a problem. It might not be possible though, as I say - each time one of them updates, it takes the focus away from the form.

Because of that, I was unable to test the form code on that page. There's one other error I'm getting:

Error: JSON.stringify is not a function
Source File: http://connect.facebook.net/en_US/all.js?ver=3.2.1
Line: 9

It may or may not be a fatal error affecting the form script. If getting rid of those time scripts doesn't fix things, get rid of that facebook script at least temporarily.

[saad_sinpk]

can u tell me how can i run this 2 script can u tell em what i do ? i am not that much expert in this field please can u tell em

[saad_sinpk]

i have remove header and footer now there is only my code can u please check it still getting error
and i did not use any facebook code

[jscheuer1]

At least some of those time scripts are still on the non-working page. They prevent the form from being able to maintain focus.

I seriously doubt if we can have both on the same page unless we were to have a variable that tracks what if anything has focus in the form, then after each update of a timer thing we could return focus to that element. That might work.

But to even tell whether or not the form is working, we first need to remove all of those timer things, at least to test the form code on that page.

[saad_sinpk]

check http://tinyurl.com/5vns5d6
i have add 2 form one in boo2.php and one in index page. in index it is working but not in other page please check it, or can u tell me is there any way from which i can make a form which refresh after every 5 seconds