Processing Jquery Post with PHP

Question

I've been at this for hours, and i'm at a complete loss.... I've tried everything I can but the problem is that i'm not very familiar with Jquery, this is the first time I've ever used it.... Basically, i'm attempting to pass form data to a php script, and then return a variable which will contain the source code of a webpage.

Here is the jquery:

 $("button").click(function(){
hi = $("#domain").serialize();
var page;
    $.ajax({
    type: "POST",
    url: "webcrawler.php",
    data: hi,
    //dataType: "text",
    success: function(data){
    page = data;
    document.write(page);
    }
  });

  });

Here is the html it references:

      <div id="contact_form">
      <form name="contact" action="">
      <fieldset>
      <label for="domain" id="domain_label">Name</label>  
      <input type="text" name="domain" id="domain" size="30" value="" class="text-input" />


      <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
      </fieldset>
      </form>
      </div>

Here is the PHP that process it:

      $search = $_POST["domain"];

      if(!$fp = fopen($search,"r" )) {

      return false;

      } 

      fopen($search,"r" );
      $data = "";



      while(!feof($fp)) { 

      $data .= fgets($fp, 1024);

      }

      fclose($fp); 

  return $data;

      ?>

I think the variable $search is blank, but is that because i'm not sending it correctly with jquery or receiving it correctly with php? Thanks!

Answer 1

See you have to do several things:

$("form[id='contact_form']").submit(function (e) {//<---instead click submit form
    e.preventDefault(); //<----------------you have to stop the submit for ajax
    Data = $(this).serialize(); //<----------$(this) is form here to serialize
    var page;
    $.ajax({
       type: "POST",
       url: "webcrawler.php",
       data: Data,
       success: function (data) {
          page = data;
          document.write(page);
       }
   });

});

So as in comments:

1. Submit form instead button click
2. Stop the form submission otherwise page will get refreshed.
3. $(this).serialize() is serializing the form here because here $(this) is the form itself.

Answer 2

Well, when you serialize form data using jQuery, you should serialize the <form>, not the <input> field.

So try this:

$("button").click(function() {
    var formData = $('form[name="contact"]').serialize();
    var page;

    $.ajax({
        type: "POST",
        url: "webcrawler.php",
        data: formData,
        success: function(data) {
            page = data;
            document.write(page);
        }
    });
});