passing external variables (php) into divs with ajax

passing external variables (php) into divs with ajax

hello all-

I have a very simple accordion style form system.  Fill in the form in the first section, then go to the next section of the accordion, etc...

What I have:
Right now when the submit button on each form is clicked (one form per section, or div), the code calls the .lasso (similar to php) page, does any processing (add to DB, set variables form field info, etc...) and then replaces the div with the output from the external page.

What I need:
Similar to above except when the form submit button is clicked, the next section of the accordion is opened (haven't figured this out yet) and instead of "loading" the results of the external page into the selected div, the div is "reloaded" and thus the form in the newly opened section of the accordion gets populated with the newly created Lasso variables (the fields are written to populate if the variable exists like this:
<input type="text" name="email" value="[var('email')]">

I hope this makes sense.  Try as I might (and read what I might) I haven't been able to figure this out with my new and very limited knowledge of query and ajax :-)


Here's the code at it's simplist (each section (div) is titles info1, info2, info3 etc...):

jquery code (I'm working on dynamically changing the target so I only need one of these code blocks but don't want to ask for too much here in this post!) :
 <script type="text/javascript">
$(document).ready(function() { 
    $('#htmlForm').ajaxForm({ 
        target: '#info1', 
        success: function() { 
            $('#info1').fadeIn('slow'); 
        } 
    }); 
});
</script>
...
 <script type="text/javascript">
$(document).ready(function() { 
    $('#htmlForm').ajaxForm({ 
        target: '#info5', 
        success: function() { 
            $('#info5').fadeIn('slow'); 
        } 
    }); 
});
</script>

HTML CODE:
<div id="wrapper">
    <h3 class="slider-1"><a href="#slider-1">Info</a></h3>
    <div class="slider-1 box"><p><span class="black18_B">Enter your Info Below.</span>
            <div id="info1">
<form id="htmlForm" action="inc/testInfo.lasso" method="post">
<input type="hidden" name="formName" value="info1" />
                                                <input type="text" name="email" value="[var('email')]">
                                               ... more form fields here ...
                                                ...
                                                </form>
            </div>
      </div>
repete for info2, info3, etc...


Here's the js code I found and am using:
function accordion(rate){
var tab = $('#wrapper').find('h3'),
visible = tab.next().filter(':first'),
width = visible.outerWidth();
//hide all but first panel, set width to zero for animate function to work
tab.next().filter(':not(:first)').css({display:'none', width:0});
//attach click handler
tab.click(function(){
if(visible.prev()[0] == this){
return;
}
visible.animate({width:0},{duration:rate});
visible = $(this).next().animate({width:width},{duration:rate});
});
};

$(document).ready(function(){
accordion(350);
});

Any help or nudge in the right direction would be appreciated!
    • Topic Participants

    • james