Solved

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

Posted on 2016-10-20
8
60 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 51

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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 51

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 51

Expert Comment

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

Author Closing Comment

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

Expert Comment

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

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jQuery Scroll on Mobile devices 1 31
ajax form sumbit 3 31
showing numeric numbers 2 11
Need help with jQuery plugin 10 8
This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

744 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

12 Experts available now in Live!

Get 1:1 Help Now