I tried this code but it alerts undefined
<?php
foreach($result1 as $res1)
{
$user_id = 5;
?>
<form name="wish" method="post" action="javascript:void(0);">
<input type="submit" class="submit_wish1" id="calButton" data-wid="<?php echo $res1->user_id; ?>" data-uid="<?php echo $user_id; ?>" value="" onclick="favfunction()"/>
</form>
<?php
}
?>
<script>
function favfunction()
{
calBtn = $(this).attr('data-wid');
calBtn1 = $(this).attr('data-uid');
alert(calBtn);
alert(calBtn1);
}
</script>
when I use
calBtn = $('#calButton').attr('data-wid');
calBtn1 = $('#calButton').attr('data-uid');
it alerts same values.
What I would suggest is that you pass the DOM object itself into your function
onclick="favfunction(this);"
And then you can do this in your JS
<script>
function favfunction(elm)
{
var calBtn = $(elm).attr('data-wid');
alert(calBtn);
}
</script>
More than likely, the root of your issue is with using the same id
for your submit buttons.
<form name="wish" method="post" action="javascript:void(0);">
<?php
$i = 1;
foreach($result1 as $res1)
{
$user_id = 5;
?>
<input type="submit" class="submit_wish1" id="calButton_<?php echo $i; ?>" data-wid="<?php echo $res1->user_id; ?>" data-uid="<?php echo $user_id; ?>" value="" onclick="favfunction(this)"/>
<?php
$i += 1;
}
?>
</form>
there should only be 1 form
tag in an html document.
elements should not have the same ids, so we're appending a number to the id, that correlates to the iteration of the foreach loop.
<script>
function favfunction(elm)
{
var wid = $(elm).data('wid'),
uid = $(elm).data('uid');
alert('wid: ' + wid + ' - uid: ' + uid);
}
</script>
with Sample Php output.
function favfunction(elm)
{
var wid = $(elm).data('wid'),
uid = $(elm).data('uid');
alert('wid: ' + wid + ' - uid: ' + uid);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="wish" method="post" action="javascript:void(0);">
<input type="submit" class="submit_wish1" id="calButton_1" data-wid="1" data-uid="5" value="Submit" onclick="favfunction(this)" />
<input type="submit" class="submit_wish1" id="calButton_2" data-wid="2" data-uid="5" value="Submit" onclick="favfunction(this)" />
<input type="submit" class="submit_wish1" id="calButton_3" data-wid="3" data-uid="5" value="Submit" onclick="favfunction(this)" />
<input type="submit" class="submit_wish1" id="calButton_4" data-wid="4" data-uid="5" value="Submit" onclick="favfunction(this)" />
<input type="submit" class="submit_wish1" id="calButton_5" data-wid="5" data-uid="5" value="Submit" onclick="favfunction(this)" />
</form>
</div>