Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2016-10-20
8
Medium Priority
?
68 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 111

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 59

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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 

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 59

Accepted Solution

by:
Julian Hansen earned 2000 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 59

Expert Comment

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

Author Closing Comment

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

Expert Comment

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

Featured Post

Certified OpenStack Administrator Course

We just refreshed our COA course based on the Newton exam.  With 14 labs, this course goes over the different OpenStack services that are part of the certification: Dashboard, Identity Service, Image Service, Networking, Compute, Object Storage, Block Storage, and Orchestration.

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…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
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.

661 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