getting values from a modal using jquery

Question

-----------SOLVED-----------

thanks for taking the time to help me. i managed to make it work now. i think the problem was my negligence. i have to add the getVal on my modal like so id="modal_"getVal. it was calling the wrong modal, thats why the input box returns empty. Im very sorry for this and I appreciate the help people do. thank you

i have a simple modal which contains a textbox and button.

<input type="text" class="form-control" id="textb" val_A="1">
<button type="button" id="but"> submit </button>

i want to get the textbox .val() and the attributes val_A upon button click

$(document).on('click','#but', function() {
name = $('#textb').attr('value');
val_A = $('#textb').attr('val_A');

alert(name + "-" + val_A);

});

but Im getting undefined result for the name.

ive also tried $('#textb').val(); and it didn't worked.

please note that i want the values from a textbox inside a modal, and not sure if theres a different approach of getting values considering modal behaviour.

----------[update]-----------

When this button is clicked, modal will appear

<button type="button" class="btn" val="1"> show modal </button>

The button has a specific value with it, val=1 which then activates a specific modal. thus, $(#modal_+getVal).

$(document).on('click','.btn', function () {
getVal = $(this).attr('val');
$('#modal_+getVal').modal({show:true})
});

Which then brings me to my question above. after the modal appears, i want to get the value of the textbox upon clicking yet, another button inside the modal.

but all it shows is undefined

Can you show us your markup and the rest of your JS. Do you have any other element with the id `textb` anywhere else on your page? — PeterKA, Jul 09 '14 at 12:21
the value attribute does not get updated in real time the same way the value property does — charlietfl, Jul 09 '14 at 12:22
You are saying that form is in modal dialog. initial state form fields will be in hidden mode. so you have to get the fields from the form after showing the form in callback method. or you have to use :hidden selector to get the form field value. are you using jquery dialog or any other plugin? let me know . if you are using jquery dialog you can have dialog show callback $( ".selector" ).dialog({ open: function(event, ui) { here get the field values } }); — Jagadeesh, Jul 09 '14 at 13:25
@Jagadeesh thanks for your inputs. im using bootstrap modal and not jquery dialog. — user1735120, Jul 09 '14 at 13:34
If my answer is helped you to find the problem make sure you mark it as correct answer so it may help to other people — Jagadeesh, Jul 09 '14 at 15:07

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

There shouldn't be any difference between a modal and any other div, concerning your problem. If the textarea (your textbox is a textarea, isn't it?) isn't in another frame or iframe, you can find the modal with 'normal' jQuery selector usage. That being said, here are some possible solutions:

If your textbox is a textarea, try this:

var textbox_value = $('#textb').val();

If all of that doesn't work, try to figure out if you are selecting the correct element! What does console.log($('#textbox')) print?

Edit:

Oh, and, yes. You might want to try this:

<div id="foo" data-valA="test"></div>

<script>
    $('#foo').data('valA');
</script>

Edit 2:

I cannot link this one often enough: Why is console.log() considered better than alert()?

edited May 23 '17 at 12:14

Community

1
1

answered Jul 09 '14 at 12:26

CunningFatalist

453
1
9
21

`data()` won't work without `data-` prefix in the markup for the attribute and an `input` has no `text()` – charlietfl Jul 09 '14 at 12:32
Yes, that's why I wrote data-valA. And I know that an input has no text, that's what it's all about. Although I have to admit, I didn't see the input there and assumed his textbox might be any kind of element. (Whoops!) Edit: Deleted it, thanks for pointing it out. – CunningFatalist Jul 09 '14 at 12:34
i have used `console.log()` and it prints nothing. just blank. values inputted from textbox doesnt print. – user1735120 Jul 09 '14 at 12:48
But it does find the textbox itself? – CunningFatalist Jul 09 '14 at 12:50
hi, sorry. can you enlighten me what you mean 'finds the textbox itself' ? – user1735120 Jul 09 '14 at 13:10
Oh sorry, I thought that was clear. You can write both console.log($('#textb')) and console.log($('#textb').val()) - version a returns the textbox and version b should return the textbox value. Edit: http://s14.directupload.net/images/140709/ravdavei.png (the box exists vs. the box doesn't exist) – CunningFatalist Jul 09 '14 at 13:13
http://imgur.com/uMY8t2l this shows up in my console. `console.log($('#textb'))` prints the the textbox, and `console.log($('#textb').val())` shows blank :( – user1735120 Jul 09 '14 at 13:28
Looks like #textb cannot be found (as a test, try $(document).click(function(){ console.log($('#nonExistentId')); }); ). Okay, maybe that's caused by the Bootstrap error thrown. Where does this come from? Did you check your devtools if the element actually exists? – CunningFatalist Jul 09 '14 at 14:12

score 0 · Answer 2 · answered Jul 09 '14 at 13:45

$('.btn').on('click', function () {
    var modelNumber = $(this).val()
    console.log('model number',modelNumber);
    $('#modal_'+modelNumber).modal({show:true})
    $('#modal_'+modelNumber).on('shown.bs.modal', function (e) {
      console.log('modal dialog shown, get the form values')
      // try to get input values here
   }) });

And change your input type button attribute "val" to "value".

getting values from a modal using jquery

2 Answers2