Solved

Could you point how to obtain a modal textbox value when a modal is open?

Posted on 2016-10-20
8
61 Views
Last Modified: 2016-10-26
Hi Experts

Could you point how to obtain a modal textbox value when a modal is open?

When using:

$('#edit').on('show.bs.modal', function () {
              // date value
		var data_recebida = $("#data").val();
		console.log(data_recebida);
});

Open in new window


The value is always

NaN-NaN-NaN NaN:NaN:NaN

It runs only when clicking the textbox.

Any workaround?
Thanks in advance!
0
Comment
Question by:Eduardo Fuerte
  • 4
  • 3
8 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 41852781
Maybe show us the HTML and other parts of this script?  

The NaN is a JavaScript indicator of Not-a-Number.  You can get this from some arithmetic operations such as dividing by zero or using non-numeric values in arithmetic.
0
 

Author Comment

by:Eduardo Fuerte
ID: 41852845
Of course

Modal View code (partial):

<div id="view" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-width-projeto">
			<div class="modal-content">
				<!-- Begin: Modal Header -->
				<div class="modal-header bg-info bg-projeto">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">
						<i class="mr10 fa fa-building"></i>
						<span>Reclamação</span>
					</h4>
				</div>
				<!-- End: Modal Header -->
				<!-- Beign: Modal Body -->
				<div class="modal-body modal-body-projeto">
					<div class="panel panel-projeto mt-10">
						<!-- Begin: Form Edit -->
						<form method="post" action="#" id="entity-form" enctype="multipart/form-data">
							<input type="hidden" class="id_reclamacao" name="id_reclamacao" value="">

							<div class="panel-body panel-body-projeto p10 pb10 tab-content pn br-n admin-form">
								<!-- Begin: Campos -->
								<div class="row">
									<!-- Seguradora -->
									<div class="col-xs-12 mb15">
										<label for="fk_seguradora" class="field-label text-muted mb10">Cliente Corporativo</label>
										
										<label for="fk_seguradora" id="fk_seguradora" class="validar field select">
											<?php echo $fk_seguradora;?>
											<i class="arrow double"></i>
										</label>
									</div>
								</div>
								<div class="row">
									<!-- Data -->
									<div class="col-xs-4 mb15">
										<label for="data" class="field-label text-muted mb10">Data</label>
										<label for="data" class="validar field select">
											<input type='text'id='data' name='data' class="form-control gui-input br-light light" placeholder=""/>
										</label>
									</div>

...

Open in new window


The jQuery code as informed before.
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41853383
You have a disconnect in what you have shown us
JQuery
$('#edit').on('show.bs.modal', function () {

Open in new window

Dialog
<div id="view" class="modal fade" tabindex="-1" role="dialog">

Open in new window


view != edit
0
 

Author Comment

by:Eduardo Fuerte
ID: 41853591
Sorry....

<div id="edit" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-width-projeto">
			<div class="modal-content">
				<!-- Begin: Modal Header -->
				<div class="modal-header bg-info bg-projeto">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">
						<i class="mr10 fa fa-building"></i>
						<span>Reclamação</span>
					</h4>
				</div>
				<!-- End: Modal Header -->
				<!-- Beign: Modal Body -->
				<div class="modal-body modal-body-projeto">
					<div class="panel panel-projeto mt-10">
						<!-- Begin: Form Edit -->
						<form method="post" action="#" id="entity-form" enctype="multipart/form-data">
							<input type="hidden" class="id_reclamacao" name="id_reclamacao" value="">

							<div class="panel-body panel-body-projeto p10 pb10 tab-content pn br-n admin-form">
								<!-- Begin: Campos -->
								<div class="row">
									<!-- Seguradora -->
									<div class="col-xs-12 mb15">
										 <label for="fk_seguradora" class="field-label text-muted mb10">Cliente Corporativo</label>
										 <label for="fk_seguradora" class="validar field select">
											<?php echo $fk_seguradora;?>
											<i class="arrow double"></i>
										</label>
									</div>
								</div>
								<div class="row">
									<!-- Data -->
									<div class="col-xs-4 mb15">
										<label for="data" class="field-label text-muted mb10">Data</label>
										<label for="data" class="validar field select">
											<input type='text'id='data' name='data' class="form-control gui-input br-light light" placeholder=""/>
										</label>
									</div>

Open in new window

0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 52

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41853598
Here is a working version of the code you posted above - data value retrieved without issue. The problem is somewhere else in your code
HTML
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#edit">
  Open
</button>
<div id="edit" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-width-projeto">
    <div class="modal-content">
      <!-- Begin: Modal Header -->
      <div class="modal-header bg-info bg-projeto">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title">
          <i class="mr10 fa fa-building"></i>
          <span>Reclamação</span>
        </h4>
      </div>
      <!-- End: Modal Header -->
      <!-- Beign: Modal Body -->
      <div class="modal-body modal-body-projeto">
        <div class="panel panel-projeto mt-10">
          <!-- Begin: Form Edit -->
          <form method="post" action="#" id="entity-form" enctype="multipart/form-data">
            <input type="hidden" class="id_reclamacao" name="id_reclamacao" value="">

            <div class="panel-body panel-body-projeto p10 pb10 tab-content pn br-n admin-form">
              <!-- Begin: Campos -->
              <div class="row">
                <!-- Seguradora -->
                <div class="col-xs-12 mb15">
                   <label for="fk_seguradora" class="field-label text-muted mb10">Cliente Corporativo</label>
                   <label for="fk_seguradora" class="validar field select">
                    <?php echo $fk_seguradora;?>
                    <i class="arrow double"></i>
                  </label>
                </div>
              </div>
              <div class="row">
                <!-- Data -->
                <div class="col-xs-4 mb15">
                  <label for="data" class="field-label text-muted mb10">Data</label>
                  <label for="data" class="validar field select">
                    <input type='text'id='data' name='data' class="form-control gui-input br-light light" placeholder=""/>
                  </label>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Open in new window

jQuery
<script>
$(function() {
  $('#edit').on('show.bs.modal', function () {
    // date value
    var data_recebida = $("#data").val();
    console.log('Data: [' + data_recebida + ']');
  });
});
</script>

Open in new window

Working sample here (F12) to see the output
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41853603
Screenshot belowss82.jpg
0
 

Author Closing Comment

by:Eduardo Fuerte
ID: 41860073
Thanks for assistance!
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41860152
You are welcome.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now