-3

I've an action button which opens a modal when clicked, that button has a value attribute named blockNo with a value. Now I want to capture that value and insert it into a text field in the modal which opens when the button is clicked.

The Button

<button class="btn btn-info btnAddADM" idMark="'.$value["id"].'" blockNo="'.$value["blockNo"].'" data-toggle="modal" data-target="#addADM"><i class="fa fa-sort-numeric-asc"></i></button>

The Input field on the modal

<input class="form-control input-lg" type="text" id="newBlock" name="newBlock" value="" readonly>

Thanks

*Edit1

The Page

the page contains data loaded from the database and each row has 3 buttons to edit, insert new data & delete respectively. The question here is about the middle button which opens a modal to insert data into new table in the database.

web page picture

modal picture

now in the first field which is blank in the picture i want to capture block no from the table and insert it automatically, coz it is the id field. After applying the solution given by Rohit it worked only for the first row button and for other row buttons sometimes takes first row's block no and sometimes its blank. I want it to display respective rows block nos.

javascript file code

    $(document).ready(function(){
      $("#btnAddADM").click(function(){
         $("#blockNo").val($(this).attr("blockNo"));
      });
    });

button code

<button class="btn btn-info btnAddADM" id="btnAddADM" idMark="'.$value["id"].'" blockNo="'.$value["blockNo"].'" data-toggle="modal" data-target="#addADM"><i class="fa fa-sort-numeric-asc"></i></button>

input field code

<input class="form-control input-lg" type="text" id="blockNo" name="blockNo" readonly required>
Jogesh Ravani
  • 91
  • 1
  • 5
  • provide full code... – Sayed Mohd Ali Feb 15 '19 at 08:45
  • When you ask the question here then you have to provide some snippets of your code so can others will get idea and give the solution. – Yogesh Patel Feb 15 '19 at 08:55
  • 1
    Hi and welcome to Stack Overflow! [Right now, your question looks like a „can I haz codes?“-question](https://can-i-haz.codes) what is off-topic on SO. Either follow the steps on the first link, read [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) or visit [the Help Center](https://stackoverflow.com/help). Good luck! – CodeF0x Feb 15 '19 at 08:55
  • Sorry this is my first question, i will follow the steps the next time. Thanks – Jogesh Ravani Feb 15 '19 at 09:01
  • IDs _must_ be unique within an HTML document. You can not use `id="blockNo"` multiple times, and then still expect `$("#blockNo")` to select whatever you imagine was the “correct” element at that time, it will only ever access the first one in the document. Works as designed. Things like this should not be done using IDs in the first place, but should make use of classes and the relation elements have within the DOM. – 04FS Feb 15 '19 at 12:49

2 Answers2

1

Try this:

$(document).ready(function(){
  $("#ClickMeButton").click(function(){
    $("#blockNo").val($(this).attr('blockNo'));
  });
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="ClickMeButton" blockNo="123456" >Click me </button>
 <input type="text" id="blockNo">
Rohit Ghotkar
  • 803
  • 5
  • 17
0

I followed the answer of mg1075 on this link and made small changes in my code according to the answer now everything is working fine. Thanks to MG1075 and Rohit

the changes made are as follows

JS code

$(document).on("click", ".open-btnAddADM", function () {
 var blockNo = $(this).data('id');
 $(".modal-body #blockNo").val( blockNo );

});

Button code

<button class="btn btn-info open-btnAddADM" id="btnAddADM"  idMark="'.$value["id"].'" data-id="'.$value["blockNo"].'" data-toggle="modal" data-target="#addADM"><i class="fa fa-sort-numeric-asc"></i></button>

Input tag code

<input class="form-control input-lg" type="text" id="blockNo" name="blockNo" value="" readonly required>
Jogesh Ravani
  • 91
  • 1
  • 5