Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 142646

How to refer textfield name in ajax?

$
0
0

I am trying to autofill information from a database into text fields when the user selects the specific name. I initialized the text fields with unique names that are dynamically added.

This is the table for the form:

<form name="senarai" id="senarai">
        <div class="container table-responsive col-lg-10">
          <table class="table table-hover table-responsive table-bordered" id="demo_table">
            <thead>
              <tr>
                <td class="text-center col-lg-1">#</td>
                <td class="text-center col-lg-3">Nama</td>
                <td class="text-center col-lg-2">No Personal</td>
                <td class="text-center col-lg-1">Department</td>
                <td class="text-center col-lg-1">Telefon</td>
                <td class="text-center col-lg-1">Ext</td>
              </tr>
            </thead>

            <tbody>
            </tbody>
          </table>

      </form>
        </div>
      </div>
          <!-- buttons -->
        </head>

        <div class="form-group">
          <div class="row">
            <input type="button" class="add-row" value="Add Row">
            <button type="button" class="delete-row">Delete Row</button>
          </div>
        </div>

The javascript below added the text field dynamically. It contains a selection field and text fields which will be filled with information grabbed from the database.

<script>
 count=1;
$(document).ready(function(){
    $(".add-row").click(function(){
        var markup = '<tr><td class="col-lg-3"><input type="checkbox" name="rekod"></td>';
        markup +=  '<td class="col-lg-3"><select id="nama'+ count +'" name="nama[]" class="form-control"><option value="">Choose</option><?php foreach($nama as $key => $value):echo '<option value="'.$key.'">'.addslashes($value).'</option>'; endforeach; ?></select></td>';
        markup +=  '<td class="col-lg-2"><input type="text" name="nopersonal'+ count +'" value="test"></td>';
        markup +=  '<td class="col-lg-1"><input type="text" name="jabatan'+ count +'"></td>';
        markup +=  '<td class="col-lg-1"><input type="text" name="telefon'+ count +'"></td>';
        markup +=  '<td class="col-lg-1"><input type="text" name="ext'+ count +'"></td></tr>';
        $("table tbody").append(markup);
        count++;
    });

    // Find and remove selected table rows
    $(".delete-row").click(function(){
        $("table tbody").find('input[name="rekod"]').each(function(){
            if($(this).is(":checked")){
                $(this).parents("tr").remove();
            }
        });
    });
});    
</script>

This is a javascript code to autofill the text fields.

<script type="text/javascript">
 jQuery(document).ready(function ()
 {
        $(document).on('change','#nama'+ count +'',function(){
           var ID = jQuery(this).val();
           if(ID)
           {
              jQuery.ajax({
                 url : 'add_demo/get_nama/'+ID,
                 type : "GET",
                 dataType : "json",
                 success:function(data)
                 {
                    console.log(data);
                        alert($('input[name="nopersonal'+count+'"]').val());//the problem is here
                        $('input[name="jabatan'+count+'"]').val(data.JabID);
                        $('input[name="telefon'+count+'"]').val(data.notelttp);
                        $('input[name="ext'+count+'"]').val(data.ext);  
                 }
              });
           }
           else
           {
              $('input[name="nopersonal"'+count+']').empty();
              $('input[name="jabatan'+count+'"]').empty();
              $('input[name="telefon'+count+'"]').empty();
              $('input[name="ext'+count+'"]').empty();
           }
        });
});
</script>

I cannot put id on the text fields, it creates problems and warning in the console. I tried to use text field name property but the dynamic name "nopersonal'+count+'" cannot be identified.

When i tried this:

  alert($('input[name="nopersonal'"]').val()); //i put test value in the textfield

The text field can be identified and the value appears in the alert.

How I can fix this issue? Thank you.


Viewing all articles
Browse latest Browse all 142646

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>