Pass value to modal window, retrieve data and reuse it

Asked

Viewed 5,501 times

1

Good afternoon to you all. Guys, I have the following difficulty: I have the following screen:

01.png

By clicking on the button highlighted (Edit), this modal window opens, where I pass to it the ID of the request, and the date, as shown in the image:

inserir a descrição da imagem aqui

My difficulty is to reuse the information I have passed on. As you can see, I have been able to pass on this information and retrieve it via javaScript, only when I submit my form, or try to capture the field value by id, returns me null.

I passed the information on as follows:

Button that calls the modal, and pass the information through the attribute data-id='$xid|$dataexibir'

<a type='button' href='#editar' class='btn btn-primary espacos' data-toggle='modal' data-target='.editar' data-id='$xid|$dataexibir' id='btnEditar' >

Field that receives the information in the modal window:

<input type="text" class="form-control" name="meuid" id="meuid" disabled="true">

Javascript function I used to pass data:

   $(document).on("click", "#btnEditar", function () {
        var info = $(this).attr('data-id');
        var str = info.split('|');
        var meuid = str[0];
        var minhadata = str[1];
        $(".modal-body #meuid").val(meuid);
        $(".modal-body #minhadata").val(minhadata);
    });

As you can see in the second image, I try to recover this id to select and fill this table below with the information already contained for that id, and I can’t, nor can I recover or submit through the form. I look forward to some help, and thank you for your attention. Thank you!

1 answer

3


You can’t capture the data because you set the attribute on it disabled as true. In doing so, these fields are ignored. It is as if they do not exist.

To solve your problem, remove the disabled attribute and instead, to not lose the desired effect, add the class disabled bootstrap.

<input type="text" class="disabled" id="input1" name="input1">

I hope I’ve contributed.

@Edit

For future people with this problem, use the readonly

<input type="text" class="form-control" id="input1" name="input1" readonly"

Seems to be the right way to achieve this effect.

  • 1

    Yes, it did. Actually, minutes after posting the question I realized this, and instead of the Bootstrap class, I added an attribute called readonly="readdonly", and solved. Thank you very much @Clayderson Ferreira for the attention and help! :)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.