PHP to JS - Passing value of looped element to JS

Question

I'am trying to pass the value of the textbox (id = msg) to js but the output is always the first textbox value on the foreach loop. Please Help me. Here is the code.

JS:

function sub() {
    var name = document.getElementById('msg').value;
    alert(name);
}

HTML:

<?php 
foreach($messages->result() as $msg):
    foreach($agentname->result() as $agnt):
        if($msg->message_status == 1):
            $message_status = "<font class='icon-exclamation-sign'></font>&nbsp;<font class='purple'>New message!</font>";
        else:
            $message_status = "";
        endif;
?>
        <div class="accordion-wrapper" style="margin-top:0">
            <a id="message" onclick="return sub();" rel="msg<?php echo $msg->message_id;?>" id = "button_id"  style="background-color:#C2E4CD" href="javascript:void(0)" class="accordion-title blue"><span><?php echo $message_status; ?>&nbsp;<font class="icon-comment"></font>&nbsp;<font class="orange" >From:</font> <?php echo $agnt->agent_shortname;?> | <font class="icon-envelope-alt"></font>&nbsp;<font class="orange">Subject:</font> <?php echo $msg->message_title;?></span></a>
            
            <div class="accordion-content">
                <input type="text" id="msg" value="<?php echo $msg->message_id;?>" />
                <p><?php echo $msg->message;?></p>
            </div>
        </div>
    <?php endforeach; ?>
<?php endforeach; ?>

You have id attributes of html elements inside php loop. All elements will have same id and this causes error. id="msg" — ddinchev
– ddinchev, Commented Oct 1, 2013 at 6:44
As above mentions, multiple elements with the same id will cause you trouble. Could you use jQuery for this? If so, I have a solution for you. — Erik Kinding
– Erik Kinding, Commented Oct 1, 2013 at 6:50

Pupil · Accepted Answer · 2013-10-01 06:45:16Z

1

You are putting value of outer loop in the textbox.

As per my knowledge, you should put inner loop's value in the textbox.

<input type="text" id="msg" value="<?php echo $msg->message_id;?>" />

Did you mean $agnt instead of $msg?

answered Oct 1, 2013 at 6:45

Pupil

24k6 gold badges50 silver badges71 bronze badges

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

Comments

Rahul Gupta · Accepted Answer · 2017-07-11 07:44:58Z

I have added name attribute to your input and a button clicking on which it will display the values of the inputs one by one, so now you can try this code

JS:

function check() {

    var inputs = document.getElementsByName('messages[]');
    alert(inputs.length);
    for (var x = 0; x < inputs.length; x++) {
        inp_val = inputs[x].value;
        alert(inp_val);
    }

}

HTML :

<?php
    foreach($messages->result() as $msg):
    foreach($agentname->result() as $agnt):
    if($msg->message_status == 1):
      $message_status = "<font class='icon-exclamation-sign'></font>&nbsp;<font class='purple'>New message!</font>";
    else:
      $message_status = "";
    endif;
   ?>

  <div class="accordion-wrapper" style="margin-top:0">
    <a id="message" onclick="return sub();" rel="msg<?php echo $msg->message_id;?>" id = "button_id"  style="background-color:#C2E4CD" href="javascript:void(0)" class="accordion-title blue"><span><?php echo $message_status; ?>&nbsp;<font class="icon-comment"></font>&nbsp;<font class="orange" >From:</font> <?php echo $agnt->agent_shortname;?> | <font class="icon-envelope-alt"></font>&nbsp;<font class="orange">Subject:</font> <?php echo $msg->message_title;?></span></a>
    <div class="accordion-content">
      <input type="text" id="msg" name="messages[]" value="<?php echo $msg->message_id;?>" />
      <p><?php echo $msg->message;?></p>
    </div>
  </div>
  <?php endforeach; ?>
  <?php endforeach; ?>

  <input type="button" value="check" onclick="check()">

Collectives™ on Stack Overflow

PHP to JS - Passing value of looped element to JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related