Solved

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

Posted on 2016-10-20
8
67 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 58

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
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 

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 58

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 58

Expert Comment

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

Author Closing Comment

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

Expert Comment

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

Featured Post

Industry Leaders: 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!

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

628 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