show div in selecting option inside looping data - php

Question

i have code in php:
<?php
$produk = mysql_query("SELECT * FROM produk ORDER BY id_produk DESC");
while($p=mysql_fetch_array($produk)){
<select name='urutan' onChange='yesnoCheck(this);'>
<option value='yes' selected>Yes</option>
<option value='no'>No</option>
</select>
<div id='ifY' style='display: none;'>
<input type=submit value=submit class=ui-btn-primary>
</div>
<div id='ifN' style='display: none;'>
<input type=submit value=submit class=ui-btn-primary>
</div>
}
in my jquery code:
<script>
function yesnoCheck(that) {
if (that.value == "other") {
document.getElementById("ifNon").style.display = "block";
} else {
document.getElementById("ifNon").style.display = "none";
}
if (that.value == "yes") {
document.getElementById("ifY").style.display = "block";
} else {
document.getElementById("ifY").style.display = "none";
}
if (that.value == "no") {
document.getElementById("ifN").style.display = "block";
} else {
document.getElementById("ifN").style.display = "none";
}
}
</script>
in my looping data,i try run selecting option to show div, but it just run in my first data,so cant run in another data. help me please

Answer 1

Try this, this should work
<?php
$produk = mysql_query("SELECT * FROM produk ORDER BY id_produk DESC");
$i = 0;
while($p=mysql_fetch_array($produk)){ ?>
<select name='urutan' onChange='yesnoCheck(this,<?= $i ?>);' rel="<?= $i ?>">
<option value='yes' selected>Yes</option>
<option value='no'>No</option>
</select>
<div id="ifY<?= $i ?>" style='display: none;'>
<input type=submit value=submit class=ui-btn-primary>
</div>
<div id="ifN<?= $i ?>" style='display: none;'>
<input type=submit value=submit class=ui-btn-primary>
</div>
<br>
<?php $i++; } ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function yesnoCheck(that,i) {
if (that.value == "yes") {
$("#ifY" + i).css("display","block")
$("#ifN" + i).css("display","none")
} else if (that.value == "no"){
$("#ifY" + i).css("display","none")
$("#ifN" + i).css("display","block")
}
}

Answer 2

Use Dynamic ID and name for the div and select element with using counter variable.
PHP Code
<?php
$produk = mysql_query("SELECT * FROM manufacturer ORDER BY id DESC limit 5");
$i = 1;
while($p=mysql_fetch_array($produk))
{
?>
<select name='urutan<?php echo $i?>' id="urutan<?php echo $i?>" onChange='yesnoCheck("<?php echo $i?>");'>
<option value='yes' selected>Yes</option>
<option value='no'>No</option>
</select>
<div id='ifY<?php echo $i?>' style='display: none;'>
<input type=submit value=submit class=ui-btn-primary>
</div>
<div id='ifN<?php echo $i?>' style='display: none;'>
<input type=submit value=submit class=ui-btn-primary>
</div>
<?php
$i++;
}
?>
Javascript Code
<script>
function yesnoCheck(id)
{
var that = document.getElementById("urutan"+id);
/*if (that.value == "other") {
document.getElementById("ifNon"+id).style.display = "block";
} else {
document.getElementById("ifNon"+id).style.display = "none";
}*/
if (that.value == "yes") {
document.getElementById("ifY"+id).style.display = "block";
} else {
document.getElementById("ifY"+id).style.display = "none";
}
if (that.value == "no") {
document.getElementById("ifN"+id).style.display = "block";
} else {
document.getElementById("ifN"+id).style.display = "none";
}
}
</script>

Answer 3

Something like this would help i guess. Also id should always be unique use class instead.
PHP code and html
<?php
$produk = mysql_query("SELECT * FROM produk ORDER BY id_produk DESC");
while($p=mysql_fetch_array($produk)){ ?>
<div> // new div added here.
<select name='urutan' onChange='yesnoCheck(this);'>
<option value='yes' selected data-selector="ifY">Yes</option> // added new data-selector attribute.
<option value='no' data-selector="ifN">No</option>
</select>
<div class='ifY commonclass' style='display: none;'> // changed id to class and added a commonclass to get all divs.
<input type=submit value=submit class=ui-btn-primary>
</div>
<div class='ifN commonclass' style='display: none;'>
<input type=submit value=submit class=ui-btn-primary>
</div>
</div>
<?php } ?>
Jquery
$('[name="urutan"]').change(function(){
var $this = $(this);
var $parentDiv = $this.parent();
var $selected = $("option:selected",$this),
$parentDiv.find('.commonclass').hide();
$parentDiv.parent().find("."+$selected.data('selector')).show();
}).trigger('change');