Interactive forms with PHP and Ajax via JQuery

Question

I can't make the html loaded via ajax update the DOM. What am I doing wrong?

HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Test</title>

<link rel="stylesheet" type="text/css" href="//atpc.info/f/styles.css" media="all">
<link rel="stylesheet" type="text/css" href="//atpc.info/f/form.css" media="all">
<link rel="stylesheet" type="text/css" href="//atpc.info/f/pesquisa.css" media="all">

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="//atpc.info/f/t/test.js"></script>
</head>
<body>

<form id="form_p" action="">

    <fieldset class="p_test">
        <legend>Test question text?</legend>
        <label for="p_test_y"><input type="radio" id="p_test_y" name="p_test" value="y">Yes!</label>
        <label for="p_test_n"><input type="radio" id="p_test_n" name="p_test" value="n">No!</label>
        <a class="continue_r">Continue &rarr;</a>
    </fieldset>

    <small id="update_p"></small> <span id="status_p"></span>

</form>

</body>
</html>

JQuery:

$(document).ready(function() {

    $('label').css('display','block');

    $('a.continue_r').live('click',function(event) {
        var id_p=$('input:radio:first').attr('name');
        var v_r=$('input:radio:checked').val();
        alert(v_r);

        $.post(
            'test.php',
            { id_p:id_p, v_r:v_r },
            function(data){
                alert('Retorno:\n' + data);
                //$('form').append($(data).hide().fadeIn('slow'));
                $('body').append(data);
                $('label').css('display','block');
            }
        );
    });

});

PHP:

<?
if(!empty($_REQUEST['id_p'])) $id_p=$_REQUEST['id_p'];
else die('Ops! no id_p');

if(!empty($_REQUEST['v_r'])) $v_r=$_REQUEST['v_r'];
else die('Ops! no v_r');

if($_REQUEST['id_p']=='p_test1') die('Victory!!!');

echo<<<FORM
<fieldset class="p_test1">
    <legend>Test 1 question text?</legend>
    <small>Last question was $id_p and you option was $v_r</small>
    <label for="p_test1_y"><input type="radio" id="p_test1_y" name="p_test1" value="ohy">Oh, Yes!</label>
    <label for="p_test1_n"><input type="radio" id="p_test1_n" name="p_test1" value="ohn">Oh, No!</label>
    <a class="continue_r">Continue &rarr;</a>
</fieldset>
FORM;
?>

For those interested, here is the final working JQuery code:

$(document).ready(function() {

    $('label').css('display','block');

    $('a.continue_r').live('click',function(event) {

        //var fieldset=$(this).closest('fieldset');
        var fieldset=$(this).parent('fieldset');
        //alert(fieldset.attr('class'));

        //var id_p=$('input:radio').attr('name');
        //var id_p=fieldset.attr('class');
        var id_p=$('fieldset:last').attr('class');
        var v_r=$('input:radio:checked:last').val();
        if(v_r=='') v_r=$('textarea:last').val();

        fieldset.hide();

        //alert('id_p = '+id_p+' - v_r = '+v_r);

        $.post(
            'test.php',
            { id_p:id_p, v_r:v_r },
            function(data){
                //alert('Retorn:\n' + data);
                $('body').append($(data).hide().fadeIn('slow'));
                //$('body').append($(data));
                //$('body').append($data);
                $('label').css('display','block');
                //console.log(data);
            }
        );
    });

});

Did you try to set the fourth argument to 'html'; i.e. expect HTML return? — Wayne
– Wayne, Commented Oct 24, 2011 at 14:08
@Grim, choose Yes in the first question than choose No in the second. You will see that the alert continues to show Yes... The DOM was not updated... — Roger
– Roger, Commented Oct 24, 2011 at 14:12
did you try $('body).append($(data));? (on a side note, it should be var v_r=$('input:radio:first:checked').val(); in case you uncheck first radio button ) — roselan
– roselan, Commented Oct 24, 2011 at 14:45
@Roger, sorry no that wasn't the problem. I'll post a full answer shortly. — Wayne
– Wayne, Commented Oct 24, 2011 at 15:49

Wayne · Accepted Answer · 2011-10-25 02:36:13Z

1

Actually, the DOM is updated. But I think the selector is wrong.

Try this?

$(':radio:checked:last')

This will get the last checked radio input, which is probably what you want instead. Based on the markup:

<fieldset class="p_test">
    <legend>Test question text?</legend>
    <label for="p_test_y"><input type="radio" id="p_test_y" name="p_test" value="y">Yes!</label>
    <label for="p_test_n"><input type="radio" id="p_test_n" name="p_test" value="n">No!</label>
    <a class="continue_r">Continue &rarr;</a>
</fieldset>

The fieldset tag wraps everything up, so your handler can be defined like:

$('a.continue_r').live('click', function() {
    var $fieldset = $(this).parent('fieldset');

    // Do stuff like $fieldset.find(), which ensures that your matches are contained therein.
});

edited Oct 25, 2011 at 2:36

answered Oct 24, 2011 at 15:56

Wayne

1,2901 gold badge8 silver badges20 bronze badges

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

4 Comments

Roger Over a year ago

Yes, you are right. I am making some tests with var fieldset=$(this).closest('fieldset'); alert(fieldset.attr('class'));. You can see the updated js here: atpc.info/f/t/test.js

Roger Over a year ago

I think I got it: to get the latest fieldset class and radion value: var id_p=$('fieldset:last').attr('class'); var v_r=$('input:radio:checked:last').val(); - atpc.info/f/t/test.htm

Wayne Over a year ago

Yes, it worked! :) FYI, the fieldset tag wraps the entire markup, you could've also used something like $(this).parent('fieldset').

Roger Over a year ago

By the way, @Wayne Khan, what are you using to conclude that "the fieldset tag wraps the entire markup"?

Collectives™ on Stack Overflow

Interactive forms with PHP and Ajax via JQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related