Question

Two things I’m trying to achieve and need help with

1) Click a link and load it in any div on the page, specified within the link itself, which I can do by this:

<div id="box">      
    <a href="test1.php" data-target-div="target1" class="menu-item">Item1</a>
    <a href="test2.php" data-target-div="target2" class="menu-item">Item2</a>     
    <a href="form.html" data-target-div="target1" class="menu-item">Open Form</a>     
</div>
<div id="target1"></div>  
<div id="target2"></div>  

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


     $(document).ready(function(){

          $('a.menu-item').click(function(e){

            e.preventDefault(); // prevent default click event (equivalent to 'return false;')

            var targetDiv = $(this).data('target-div'); // $(this) is a reference to the menu item we clicked

            var href = $(this).attr('href');                
            console.log(href);  // Write to the console to check we got the href attribute (hit F12 in your browser)

            $("div#"+targetDiv+"").load(href);

            // Note: .load won't work across domains, so both this page and the pages you're loading need to be on the same domain.
            // See this link for a possible work around: 
            // http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin

          });                  

     });

</script>  

2) I want to create a single jQuery/Ajax function that handles all my forms, by picking up the values from the form itself. Something like this:

$(function() {

jQuery(document).ready( function($) {

var $form = $('Figure out which form I mean by finding the ID');

$form.submit( function() {
    $.ajax({
    type: 'POST',
    url: $form.attr( 'action' ), 
    data: $form.serialize(),
    success: function( response ) {
        alert(response);
    }
    });

    return false;
});   
});


});

And finally: Instead of that alert(response); section, display the results in a specified DIV, similar to the Point 1

Still quite new to jQuery so please don’t dumb it down for me 🙂

Answer 1

For point #2, it’s quite simple, and you’re almost there.

Try this

Javascript

$(document).ready(function(){
    //Target all form tags
    $("form").submit( function() {
        //Get the target div to fill response, assume it's an id
        $div = $("#"+$(this).data("result-div"));

        //Do the ajax, and reference `$(this)` for this instance that was submitted
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'), 
            data: $(this).serialize(),
            success: function( response ) {
                $div.html(response);
            }
        });

        return false;
    }); 
});

HTML

<div id='div_1'></div>
<div id='div_2'></div>
<div id='div_3'></div>
<form method='post' action='url_1.php' data-result-div='div_1'>
    <input type='hidden' name='data_1' value='1' />
    <input type='hidden' name='data_2' value='2' />
    <input type='hidden' name='data_3' value='3' />
    <input type='hidden' name='data_4' value='4' />
    <input type='submit' />
</form>
<form method='post' action='url_2.php' data-result-div='div_2'>
    <input type='hidden' name='data_5' value='1' />
    <input type='hidden' name='data_6' value='2' />
    <input type='hidden' name='data_7' value='3' />
    <input type='hidden' name='data_8' value='4' />
    <input type='submit' />
</form>
<form method='post' action='url_3.php' data-result-div='div_3'>
    <input type='hidden' name='data_9' value='1' />
    <input type='hidden' name='data_10' value='2' />
    <input type='hidden' name='data_11' value='3' />
    <input type='hidden' name='data_12' value='4' />
    <input type='submit' />
</form>