CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Guillaume
Guillaume

Reputation: 51

Pass variables from HTML form -> ajax load()

What I am trying to do

I have a HTML form which looks like this: [input text field] [submit button]. I want the output results to display in only a small part of the page (don't want to refresh the entire page after the button is clicked).

What I have done so far

I am using jquery load() as follows:

<script type="text/javascript">
function searchresults(id) {
$('#myStyle').load('displaysearchresults.php?id=' + id ; ?>);
}
</script>

Results will appear in a div which is exactly what I want:

<div id='myStyle'></div>

The problem

The script above works just fine (I used a variation of it elsewhere). But I have 2 problems:

1-How to call the load() script from the form. I tried this but it doesn't work:

<form id="form" name="form" method="post" action="searchresults('1')">

2-If I am not able to call the load() script from the form, how do I pass what is into the input text field to the load() script so in the end it can be proceessed by the displaysearchresults.php file???

Thanks

Upvotes: 1

Views: 2908

Answers (2)

Guillaume
Guillaume

Reputation: 51

Ok I have been able to do what I wanted to do, i.e., displaying search results in part of the page without reloading.

Actually it is not necessary to use the ajax load() function. You can do it with the script below:

<form id="form" method="POST">
<input type="text" id="textbox" name="textbox" />
<input type="submit" name="test" />
</form>
<div id="myStyle"></div>
<p>
<script src="jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#form').on('submit', function(e){
e.preventDefault(); // prevent the form from reloading
$.ajax({
url: 'displaysearchresults.php',
type: 'POST',
dataType: 'html',
data: {text:$('#textbox').val()},
success: function(response) {
$('#myStyle').html(response);
}
});
});
});
</script>

So what is this doing:

It will "read" what the user entered in the textbox,

When the user click the "submit" button, it will put that into a POST variable and send it to "displaysearchresults.php" without reloading the page,

The search results will be displayed between the "mystyle" div.

Pretty nice.

Note for beginers: do not forget to copy the jquery file to your root folder otherwise ajax just won't work.

Upvotes: 0

Kevin
Kevin

Reputation: 41885

Currently its not working since you have a typo:

function searchresult(id) {
                   /^ no s
    $('#myStyle').load('displaysearchresults.php?id=' + id ; ?>);
}

Here:

action="searchresults('1')"> // this should be on the onsubmit
                    ^

Since you're intention is to submit the form without reloading, you could do something like:

$('#form').on('submit', function(e){
    e.preventDefault();
    $.ajax({
        url: 'displaysearchresults.php',
        data: {id: 1},
        type: 'POST',
        success: function(response) {
            $('#myStyle').html(response); // assuming the markup html is already done in PHP
        }
    });
});

Of course in the PHP side, just call it like a normal POST variable:

if($_SERVER['REQUEST_METHOD'] == 'POST') {
    $id = $_POST['id'];
    // other stuff you have to do
    // echo markup stuff
    exit;
}

Upvotes: 2

Related Questions