I am working on translating a website where instead of repotting the pages I just move the changed content into a <DIV> using jQuery “ajax_load”. The code is simple and of the form:

var loadCreditCardDonation = 'content/creditCardDonation.php';
$('#load_credit_card_donation').click(function(){
    $('#rightContent').html(ajax_load).load(loadCreditCardDonation);
});

I am now working on a page that I am stuck on. I have a form (see below) which asks the user to choose an amount for a donation to this charity and then submit the form to the “authorization page”. What I have been fumbling about for the last half day is how to write a function to pass the selected value to the “authorization page” which I should bring into the same <DIV> which is #rightContent.

<div id="donationForm">
       <form name='formDonate' method ='request' onsubmit='return isNumeric();' action='content/creditCardAuthorize.php'>
           <fieldset>
            <legend>Donation Form</legend> <br />
            <p class='submit'><input type='radio' name='donation' value='10'  onclick='noteAmount()' /> &nbsp; $10</p>
            <p class='submit'><input type='radio' name='donation' value='20'  onclick='noteAmount()' /> &nbsp; $20 </p>
            <p class='submit'><input type='radio' name='donation' value='30'  onclick='noteAmount()' /> &nbsp; $30 </p>
            <p class='submit'><input type='radio' name='donation' value='40'  onclick='noteAmount()' /> &nbsp; $40 </p>
            <p class='submit'><input type='radio' name='donation' value='50'  onclick='noteAmount()' /> &nbsp; $50 </p>
            <p class='submit'><input type='radio' name='donation' value='75'  onclick='noteAmount()' /> &nbsp; $75 </p>
            <p class='submit'><input type='radio' name='donation' value='100' onclick='noteAmount()' /> &nbsp; $100</p>
            <p class='submit'><input type='radio' name='donation' value=''   onclick='noteAmount()' /> &nbsp; Other Amount </p>
            <br />
            <p><label for='amount'>Amount $</label> <input type='text' name='amount' id='amount' disabled='false'/></p>
            <p class='submit'><input type='submit' id="donateButton" value='Continue' /></p>
            <br />
        </fieldset>
    </form>
</div>

Any help, tutorial or example would be appreciated.

Are you attempting to load the authorisation page into the same div on form submit?
If so, the easiest way would be to use a (horrible) iFrame... But that's not particularly AJAX-y...
For an AJAX version you'd need to perform a POST request to the other page by catching and then collecting the details on submit, however if it's cross-domain then security will probably step in and block it. In which case your only option is to iFrame it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.