Multiple Checkbox Form Issue using Ajax and Jquery

Question

I'm trying to make a form that is in a loop has a unique id. The issue with this is only the first form is working and all the rest after is not triggering the jquery code.

Form:

<?php foreach( $tasks as $tasks ) : ?>
<tr>
    <td><?php echo $tasks->title ?></td>
    <td><?php echo $newDate; ?></td>
    <td><?php echo $tasks->details ?></td>
    <td><?php echo $tasks->category ?></td>
    <td>

<form class="noclass">
    <input class="hideit id" type="text" name="id" value="<?php echo $tasks->id ?>" />
    <input type="checkbox" value="<?php echo $tasks->user ?>" name="value" id="checkbox-2-1" class="regular-checkbox big-checkbox" <?php echo $tasks->user ?> />
</form>

</td>
</tr>
<?php endforeach; ?>

Jquery:

<script>
    $(function() {
        $('#checkbox-2-1').click(function() {
            var id = $(".id").val();
            var value = $(".check").val();
            var dataString = '?id=' + id + '&value=' + value + '&user=<?php echo $id ?>';
            alert(dataString);

            $.ajax({
                type: "POST",
                url: "http://example.com/process.php",
                data: dataString,
                cache: false,
            });
        })
    })
    return false;
</script>

Dipesh Parmar · Accepted Answer · 2013-06-06 05:27:13Z

1

You are using

var id = $(".id").val();  
var value = $(".check").val();

and what $(".id") and `$(".check")' will return is object.

So you need to convert it into string of key value pair and then send it.

Also refer Gautam answer for foreach correction.

ONE MORE

You are repeating checkbox-2-1 id for checkbox evert-time loop gets execute and ID for each dom must be unique.

What i suggest

Use code as below.

for checkbox click event use

$('input:ckeckbox[name="value"]').on('change',function(){ });

and inside function(){ } write code for getting value of class id and check as below

$(this).closest('form.noclass').find('.id').val();
$(this).closest('form.noclass').find('.value').val()

edited Jun 6, 2013 at 5:27

answered Jun 6, 2013 at 5:20

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

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

2 Comments

Frank Aguilar Over a year ago

Sorry I'm a newbie, How can I alert what these values hold?

Dipesh Parmar Over a year ago

just create variable that hold value and then alert it as normal.. var id = $(this).closest('form.noclass').find('.id').val(); alert(id);

GautamD31 · Accepted Answer · 2013-06-06 05:16:17Z

1

Your first form is not closing....close like this

<form class="noclass">
    <input class="hideit id" type="text" name="id" value="<?php echo $tasks->id ?>" />
</form>
<form class="noclass">
    <input class="hideit id" type="text" name="id" value="<?php echo $tasks->id ?>" />
    <input type="checkbox" value="<?php echo $tasks->user ?>" name="value" id="checkbox-2-1" class="regular-checkbox big-checkbox" <?php echo $tasks->user ?> />
</form>

And what is

<?php foreach( $tasks as $tasks ) : ?>

try to give another variable like

<?php foreach( $tasks as $task ) : ?>

and then change the symultanious

answered Jun 6, 2013 at 5:16

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

Collectives™ on Stack Overflow

Multiple Checkbox Form Issue using Ajax and Jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related