using javascript code inside a PHP while loop for multiple text fields

Question

I am selecting data from a database using PHP with some javascript inside the loop:

<script type="text/javascript">
    $('#voip_type<?php echo $i; ?>').on('change',function(){
        var val = $(this).val();
        if( val ==="no"){
            $("#producttype<?php echo $i; ?>").show()
        }
        else if( val ==="extension")
        {
            $("#producttype<?php echo $i; ?>").val("VoIP Telephony").show()
        }
        else {
            $("#producttype<?php echo $i; ?>").val("VoIP Telephony").show()
        }
    });
    </script>

each time it loops round, it adds +1 onto $i

this does the same in the textfield IDs so the code in the JS and the text field IDs match names but the values aren't changing on the textfields and select elements

here is one example of a select element:

<select name="voip_type<?php echo $i; ?>" id="voip_type<?php echo $i; ?>" style="width:120px;">
        <option value="">VoIP Item?</option>
        <optgroup label="No">
        <option value="no" <?php if($result["voip_type"] != 'extension' or $result["voip_type"] != 'queue' or $result["voip_type"] != 'ivr' or $result["voip_type"] != 'storage') { echo 'selected="selected"'; } ?>>Continue</option>
        </optgroup>
        <optgroup label="Yes">
        <option value="extension" <?php if($result["voip_type"] == 'extension') { echo 'selected="selected"'; } ?>>Extension</option>
        <option value="queue" <?php if($result["voip_type"] == 'queue') { echo 'selected="selected"'; } ?>>Queue</option>
        <option value="ivr" <?php if($result["voip_type"] == 'ivr') { echo 'selected="selected"'; } ?>>IVR</option>
        <option value="storage" <?php if($result["voip_type"] == 'storage') { echo 'selected="selected"'; } ?>>Storage</option>
        </select>

UPDATE - Full code:

<?php
$sql="SELECT * FROM customer_billing where customer_seq = '".$_GET["seq"]."' ";
$rs=mysql_query($sql,$conn) or die(mysql_error());
$i=0;
while($result=mysql_fetch_array($rs)) {
    $i++; ?>
    <script type="text/javascript">
    $('#voip_type<?php echo $i; ?>').on('change',function(){
        var val = $(this).val();
        if( val ==="no"){
            $("#producttype<?php echo $i; ?>").show()
        }
        else if( val ==="extension")
        {
            $("#producttype<?php echo $i; ?>").val("VoIP Telephony").show()
        }
        else {
            $("#producttype<?php echo $i; ?>").val("VoIP Telephony").show()
        }
    });
    </script>
    <input type="hidden" name="sequence<?php echo $i; ?>" size="30" value="<?php echo $result["sequence"]; ?>" />

    <select name="voip_type<?php echo $i; ?>" id="voip_type<?php echo $i; ?>" style="width:120px;">
        <option value="">VoIP Item?</option>
        <optgroup label="No">
        <option value="no" <?php if($result["voip_type"] != 'extension' or $result["voip_type"] != 'queue' or $result["voip_type"] != 'ivr' or $result["voip_type"] != 'storage') { echo 'selected="selected"'; } ?>>Continue</option>
        </optgroup>
        <optgroup label="Yes">
        <option value="extension" <?php if($result["voip_type"] == 'extension') { echo 'selected="selected"'; } ?>>Extension</option>
        <option value="queue" <?php if($result["voip_type"] == 'queue') { echo 'selected="selected"'; } ?>>Queue</option>
        <option value="ivr" <?php if($result["voip_type"] == 'ivr') { echo 'selected="selected"'; } ?>>IVR</option>
        <option value="storage" <?php if($result["voip_type"] == 'storage') { echo 'selected="selected"'; } ?>>Storage</option>
        </select><br />

        <select name="producttype<?php echo $i; ?>" id="producttype<?php echo $i; ?>" style="width:120px;">
        <option value="">none</option>
        <option value="Broadband">Broadband</option><option value="Hosted Exchange">Hosted Exchange</option><option value="Offsite Backup">Offsite Backup</option><option value="PC Maintenance">PC Maintenance</option><option value="Phone Lines (PSTN/ISDN)" selected="selected" >Phone Lines (PSTN/ISDN)</option><option value="Software Development">Software Development</option><option value="VoIP Telephony">VoIP Telephony</option><option value="Web Hosting">Web Hosting</option>     </select>

      <input type="text" name="productname<?php echo $i; ?>" size="30" value="<?php echo $result["productname"]; ?>" />
      <?php
}
?>

Answer 1

Your code is super hard to debug. My suggestion is that you turn your code into 2 separated piece of code one for PHP and one for Javascript. You can mix 2 languages but it doesn't mean that you should mix them. Instead do this

<script type="text/javascript">
  var result = <?= json_encode($the_final_query_result) ?>;
</script>

The idea is to turn all your PHP variables that will be used in JS into JS variables. Then in you JS code you can just use normal JS functions to loop through the variables instead of mixing PHP loops and JS code (and HTML code) which makes your code "impossibru" to debug

Another thing is that mysql_fetch_array is deprecated as of PHP 5.5 (https://www.php.net/mysql_fetch_array), you should consider switching to something else

Answer 2

if you want to php code inside javascript or jquery then you should do like this..

funciton() {;}