AJAX live update a PHP page with a new echo output

I'm currently working on an insurance website, and really anything other than CSS and HTML is a bit over my head. I just recently figured out how to make variable links that spit out different echo statements. Here's an example of an original page: http://www.mmisi.com/autoquote.php and here's one with a variable link: http://www.mmisi.com/autoquote.php?discount=safedriver

What I'm trying to do is employ this similar feature while using AJAX (well, I presume AJAX is what I need) in order to update a live page after clicking on a link without having to reload the page.

So, what I would like to be able to do, is have a viewer be on autoquote.php, and click a link for autoquote.php?discount=safedriver. Instead of the link loading a completely new page, it would just spit out the appropriate echo statement on the开发者_StackOverflow社区 fly.

Here's the PHP I currently have:

$discount = $_GET['discount'];

if ( $discount == "safedriver" ) { echo "Ask about a safe driver discount, which could save you up to 25% for drivers with no violations or at-fault accidents!"; }

You don't neccesserily need an AJAX request, but there you go:

Your HTML:

<a href="/autoquote.php?discount=safedriver" discount="safedriver" class="discount-class">Safe Driver</a>
<a href="/autoquote.php?discount=unsafedriver" discount="unsafedriver" class="discount-class">Unsafe Driver</a>
<span class="result"></span>

Your jQuery:

$(function(){
    $('a.discount-class').click(function(){
        $.get('/autoquoteAjax.php?discount=' + $(this).attr('discount'), function(data) {
            $('.result').html(data);
        });
    });
});

Your autoquoteAjax.php:

switch(trim($_GET['discount'])){
    case 'safedriver':
        echo "Ask about a safe driver discount, which could save you up to 25% for drivers with no violations or at-fault accidents!";
    break;
    case 'unsafedriver':
        echo "This will be expensive!";
    break;
}

Please note that the discount="safedriver" won't validate in XHTML

Is there any particular reason why you have to use AJAX? Could you not just have the pre-set outputs stored in, say a javascript hash map (i.e. associative array/object) and based on what the user selects, you can use javascript to display that particular line to a < div > on the page. It seems like making requests just to show something is adding a bit too much overhead.

Another option could be to have these "lines" as < p > tags (or whatever) on the page, and then just show/hide them dynamically.

Bottom line: you should just have to be able to attach some event handlers to your HTML elements (they don't necessarily have to be < a > tags) in order to trigger some sort of action. show/hiding, or setting the innerHTML of an element based on a group of pre-set lines.

edit: but if your heart is set on using AJAX, then you are more or less on the right track. What you would need to do is make an AJAX request and then assign the responseText to the innerHTML of an element on the page. Any decent AJAX tutorial will give you the basics of how to implement an XMLHttpRequest object (IE vs. everyone else) and how to open(), send(), and check for status. w3schools for example has a good tutorial. http://www.w3schools.com/ajax/default.asp

I would recommend that you take a look at jQuery, more specific, the .load()-method.

There are plenty of tutorials and examples around the net.

To be 150% honest, I don't believe that you should be playing around with AJAX and PHP for professional purposes unless you know what you're doing, simply because there are a lot of places you can mess up and make yourself look stupid

That aside, I also believe that this community is a generally good one and if you're asking for this it's because you have an impending deadline and not because you are too lazy to learn these languages. Which is why I will give you the code:

*note the php should go on a seperate page called /autoquoter.php

JS:

function getXMLText(dname){
    if (window.XMLHttpRequest){
      xhttp=new XMLHttpRequest();
    }
    else{
      xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhttp.open("GET",dname,false);
    xhttp.send();
    return xhttp.responseText;
}
function safery(boolvar){
    if(boolvar){
        document.getElementById("changling").innerHTML = getXMLText("/autoquoter.php?discount=safedriver");
    }
    else{
        document.getElementById("changling").innerHTML = getXMLText("/autoquoter.php?discount=unsafedriver");   
    }
}

HTML:

<a href="javascript:safery(true)">I am a safe driver</a><br />
<a href="javascript:safery(false)">I am NOT a safe driver</a><br />
<div id="changling"> </div>

Then put this at the top of your autoquoter.php page:

<?php switch(trim($_GET['discount'])){
    case 'safedriver':
        die("Ask about a safe driver discount, which could save you up to 25% for drivers with no violations or at-fault accidents!");
    break;
    case 'unsafedriver':
        die("This will be expensive!");
    break; } ?>

And to see the whole thing as a JSFiddle, go here (without the php of course).

Now you have a deadline to get to, so you can stop reading here. I'll leave this explanation here for posterity:

1. Page is loaded
2. When user clicks on a link the javascript queries that page (autoquoter.php) and funnels its output into the empty div called changeling
3. autoquoter.php uses a standard switch statement to output the correct warning based on its GET variable