Loading data from form using jquery to php file returns null

Question

When ever I pass a value from a form using submit to a php file using load, $.get or post and try to receive data or load it in general as shown below, I just get ruturned a null or undefined value. Anyone know what im doing wrong ?

iNDEX.HTML `

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

        $("#NewOrgForm").submit(function(){
            var name = $("#companyname").val();  
            $(".content").load("NewEntry.php",{Name: name});
        });
    });
</script>


<form id="NewOrgForm">
<p> Name: <input type="text" id="companyname" value="" /> </p>
<p> <input type="submit" value="Submit New Entry" id="submit" /> </p>
</form>

NEWENTRY.PHP

<?php

$companyname = $_POST['Name'];
echo $companyname;

?>

`

Answer 1

If you're just doing a POST, it should look something like:

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

        $("#NewOrgForm").attr({
            "method": "POST",
            "action": "NewEntry.php"
            }).submit();
    });
</script>

although why even use jquery for this, then...just set method and action attribs on your form element...

Answer 2

Is there actually an element in your HTML that has the class "content"?

Try making use of the callback function so that you are aware that the load actually ran:

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});

The above code is taken from the jquery site (http://api.jquery.com/load/)

UPDATE: The more I look at this, the more I think that you are probably better going w/.post (http://api.jquery.com/jQuery.post/)

UPDATE2: What happens if you try this:

$(document).ready(function(){
  runOnLoad('content');
});

function runOnLoad(className){

  var name="peter";
  var ajaxData = {"Name": name};
  var url="NewEntry.php";
  var contentToReturn="";

  $.ajax({
     type: "POST",
     url: url,
     data: ajaxData,
     datatype: "html",
     success: function(html) {
       contentToReturn="Success! It returned "+html+"<br>";
       $('div.'+className).html(contentToReturn);
     },
     error: function(html) {
       contentToReturn="Failure! It returned "+html+"<br>";
       $('div.'+className).html(contentToReturn);
     }

  });
  return;
}

Answer 3

From some of the comments you posted it looks to me like you are incorrectly collecting data from the form. Have you tried making an alert to see if the name variable is actually set? Also try using firebug or something to see the exact URL you're loading.

Perhaps try using a directly passed event reference to the function and fetch the fields from there instead of using an absolute selector. Might help.