Solved

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

Posted on 2016-10-20
8
66 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 110

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 57

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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 
LVL 57

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 57

Expert Comment

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

Author Closing Comment

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

Expert Comment

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

Featured Post

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
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 the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

734 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