0

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.

2
Contributors
1
Reply
3
Views
7 Years
Discussion Span
Last Post by digitalgrauy
0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.