dynamic web form include within jQuery toggle

Question

Likely not the best approach; (I know) but I have several toggle buttons within a very interactive website that when toggled load the form fields and radio buttons below; nested in a div, all of the toggles are pulling in the same exact form -- I am seeking a way to write or pull in the below within a AJAX call or include of somesort, php or iFrame if I must -- so that I can update 1 file and all of my toggles will reflect the updated. Preferring a solution to keep most of current code, rather then absolutely rewriting everything for the change.

$(function() {
$('#toggle3').click(function () {
    $('.toggle').hide('1000');
    $('.toggle').html('<div style="font-size: 12px; color: #000; text-align: left; padding-left: 15px; padding-top: 20px;"><form><br>Back wheel color?<br><input type="radio" name="backwheel" value="Purple"><span style="color: #B500E4"><img src="http://ecx.images-amazon.com/images/I/41S7CRzpV3L._AA160_.jpg" style="max-height: 100px;">Purple</span><br><input type="radio" name="backwheel" value="White">White</br><input type="radio" name="backwheel" value="Light Blue"><span style="color: #74A1C4;">Light Blue</span></br><input type="radio" name="backwheel" value="Blue">Blue</br><input type="radio" name="backwheel" value="Tan">Tan</br><input type="radio" name="backwheel" value="Grey">Grey</br><input type="radio" name="backwheel" value="Pink">Pink</br><input type="radio" name="backwheel" value="Red">Red</br><input type="radio" name="backwheel" value="Yellow">Yellow</br><input type="radio" name="backwheel" value="Black">Black</br><input type="radio" name="backwheel" value="Green"><span style="color:#44CA2C">Green</span></br></form></span></form><br>Front Wheel (if different)<br><form><br>Front wheel color?<br><input type="radio" name="backwheel" value="Purple"><span style="color: #B500E4">Purple</span><br><input type="radio" name="backwheel" value="White">White</br><input type="radio" name="backwheel" value="Light Blue"><span style="color: #74A1C4;">Light Blue</span></br><input type="radio" name="backwheel" value="Blue">Blue</br><input type="radio" name="backwheel" value="Tan">Tan</br><input type="radio" name="backwheel" value="Grey">Grey</br><input type="radio" name="backwheel" value="Pink">Pink</br><input type="radio" name="backwheel" value="Red">Red</br><input type="radio" name="backwheel" value="Yellow">Yellow</br><input type="radio" name="backwheel" value="Black">Black</br><input type="radio" name="backwheel" value="Green"><span style="color:#44CA2C">Green</span></br></form></div><div id="next"><a href="#" id="toggle3">Check Out!<img src="http://northbrooklyncollective.com/wp-content/uploads/2013/11/519629-129_ArrowRight-128.png" class="tool"></a></div>');
$('.toggle').slideToggle('1000');

return false; 
    });
  });

Recent attempt:

$(document).ready(function() {

$('#toggle3').click(function(){
    var $tog = $('.toggle');
    $.ajax({
        url: '/BikeCustom/shine/script.php',
        type: 'GET', //this is default anyway, only for verbosity
        success: function (fields){
            $tog.html(fields);
            $tog.slideToggle(1000);
        }
  });
});

script.php = nested div in original.

jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

Ohgodwhy · Accepted Answer · 2014-01-22 16:46:30Z

1

$('#toggle3').click(function(){
    var $tog = $('.toggle');
    $tog.hide(1000);
    $.ajax({
        url: 'path/to/my/script.php',
        type: 'GET', //this is default anyway, only for verbosity
        success: function (fields){
            $tog.html(fields);
            $tog.slideToggle(1000);
        }
    });
});

edited Jan 22, 2014 at 16:46

answered Jan 22, 2014 at 6:03

Ohgodwhy

50.9k11 gold badges86 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lieutenant Dan Over a year ago

Thanks so much, I love this! Although it doesn't work for me and the toggle dies?

Lieutenant Dan Over a year ago

The above worked with the removal of $ on all instances of tog.

Collectives™ on Stack Overflow

dynamic web form include within jQuery toggle

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related