How to get input tag id of html form?

Question

<?php
        $i = 1;
        $query1 = mysql_query("SELECT * FROM `alert_history` ORDER BY `alert_history`.`id` DESC LIMIT ".$start.",".$per_page."");
        while($result = mysql_fetch_array($query1)){
            echo '<td colspan = "2"><form method = "POST" onsubmit = "submitform()" ><textarea onFocus = "myFunction(1)" onBlur = "myFunction(0)" id = "comment'.$i.'" name = "comment"></textarea> <br />';
            echo '<input type = "text" id = "alertid'.$i.'" name = "alertid" value = "'.$result['id'].'">';
            echo '<input  type = "submit" name = "submit" value = "Comment" ></form></td>';
            $i++;
        }
?>


<script>
    function submitform(){
            var comment = $("#comment").val();
        var alertid = $("#alertid").val();
        alert(comment);
        $.ajax({
        type: "POST",
            url: "analytic.php",
            data:{cmt:comment,alert_id:alertid}
        });
            //return false;
      }
</script>

How to get textarea tag and input tag id for javascript function ?
Both tag show in while loop so i want every textarea and input tag has different id.

Answer 1

If you generate dynamic id in text box that time if change something in text box that time store it's id in local variable and use it on in your code

<input type = "text" class="textBox" id = "alertid'.$i.'" name = "alertid" value = "'.$result['id'].'">';
var Id
  $(document).on('change', "input.textBox", function () {
             Id = $(this).attr("id");
alert(Id )
});

Hope this code can help you..

Answer 2

so first you set the different IDs and then you fetch it.

var textAreaId = $('textarea').prop('id);
var inputId = $('input').prop('id);

Update

$i is constant for every single set of textarea and input combined together.

If you want to grab every set of textarea and input , you should rather assign the ID to instead of doing it for every textarea and input element.

<?php
        $i = 1;
        $query1 = mysql_query("SELECT * FROM `alert_history` ORDER BY `alert_history`.`id` DESC LIMIT ".$start.",".$per_page."");
        while($result = mysql_fetch_array($query1)){
            echo '<td colspan ="2" id='.$i.'"><form method = "POST" onsubmit = "submitform()" ><textarea onFocus = "myFunction(1)" onBlur = "myFunction(0)" name = "comment"></textarea> <br />';
            echo '<input type = "text" name = "alertid" value = "'.$result['id'].'">';
            echo '<input  type = "submit" name = "submit" value = "Comment" ></form></td>';
            $i++;
        }
?>



<script>
    function submitform(){
            var comment = $(this).closest('td').find('textarea').val();
            var alertid = $(this).parent().prop('id');
        alert(comment);
        $.ajax({
        type: "POST",
            url: "analytic.php",
            data:{cmt:comment,alert_id:alertid}
        });
            //return false;
      }
</script>

Answer 3

In jQuery, select the tag and use the .each() :

$("textarea").each(function(){
   alert($(this).attr("id"));
   alert($(this).val());
});
$("input").each(function(){
   alert($(this).attr("id"));
   alert($(this).val());
});

Demo here (Client side).

Answer 4

Try this one:

( See JsFiddle working demo )

<?php
        $i = 1;
        $query1 = mysql_query("SELECT * FROM `alert_history` ORDER BY `alert_history`.`id` DESC LIMIT ".$start.",".$per_page."");
        while($result = mysql_fetch_array($query1)){
            echo '<td colspan = "2"><form method = "POST" onsubmit = "submitform(this)" ><textarea onFocus = "myFunction(1)" onBlur = "myFunction(0)" id = "comment'.$i.'" name = "comment"></textarea> <br />';
            echo '<input type = "text" id = "alertid'.$i.'" name = "alertid" value = "'.$result['id'].'">';
            echo '<input  type = "submit" name = "submit" value = "Comment" ></form></td>';
            $i++;
        }
?>


<script>
    function submitform(form){

      var comment = $(form).find("textarea").val();
      alert(comment);

      var alertid = $(form).find("input[name=alertid]").attr("id");
      alert(alertid);
      //Or if you mean:
      var alertid = $(form).find("input[name=alertid]").val();
      alert(alertid);

        $.ajax({
        type: "POST",
            url: "analytic.php",
            data:{cmt:comment,alert_id:alertid}
        });
            //return false;
      }
</script>