Databases
StackOverflow2013
Postsdbo
POjQuery's val() returns empty string on bootstrap popover input field
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery's val() returns empty string on bootstrap popover input field
    text
    copied!<p>I have a bootstrap popup form with a few input fields. I've added a submit button to the form, that triggers client-side JS validation. However, when the button is clicked, the current value of the input fields is not captured by jQuery's val() method: I just get an empty string.</p> <p>Here is the markup:</p> <pre><code>&lt;div class="popover fade right in" style="top: -154.5px; left: 249px; display: block;"&gt; &lt;div class="arrow"&gt; &lt;/div&gt; &lt;h3 class="popover-title"&gt;New Job Site contact&lt;/h3&gt; &lt;div class="popover-content"&gt; &lt;form class="popover-form form-horizontal" id="newjobsite_contact_form" accept-charset="utf-8" method="post" action="http://dev.temperature/home/#"&gt; &lt;div class="form-group"&gt; &lt;div class=" required "&gt; &lt;input type="text" class="form-control" id="popover-first_name" required="1" placeholder="First name" value="" name="first_name"&gt; &lt;/div&gt; &lt;div class=" required "&gt; &lt;input type="text" class="form-control" required="1" placeholder="Surname" value="" name="surname"&gt; &lt;/div&gt; &lt;div class=" required "&gt; &lt;input type="text" class="form-control" required="1" placeholder="Phone" value="" name="phone"&gt; &lt;/div&gt; &lt;div class=""&gt; &lt;input type="text" class="form-control" placeholder="Mobile" value="" name="mobile"&gt; &lt;/div&gt; &lt;div class=""&gt; &lt;input type="email" class="form-control" placeholder="Email" value="" name="email"&gt; &lt;/div&gt; &lt;div class=""&gt; &lt;input type="url" class="form-control" placeholder="Website" value="" name="website"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="popover_buttons"&gt; &lt;button class="btn btn-success" onclick="submit_newjobsite_contact(); return false;" type="button" id="newjobsite_contact_submit"&gt;Submit&lt;/button&gt; &lt;button class="btn btn-warning" onclick="close_newjobsite_contact(); return false;" type="button" id="newjobsite_contact_cancel"&gt;Cancel&lt;/button&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here is the JS:</p> <pre><code>function submit_newjobsite_contact() { errors_found = validate_popover_form($('#newjobsite_contact_form')); if (errors_found.length == 0) { // Form values submitted to PHP code through AJAX request here } else { error_msg = "Please check the following errors:\n"; $(errors_found).each(function(key, item) { error_msg += "- "+item.message+"\n"; }); alert(error_msg); } } function validate_popover_form(form_element) { found_errors = []; $('span.error').remove(); form_element.find('select,input').each(function(key, item) { if ($(item).attr('required') &amp;&amp; $(item).val().length == 0) { found_error = true; found_errors.push({elementname: $(item).attr('name'), message: "A value for "+$(item).attr('placeholder')+" is required"}); } console.log($(item).val()); // More validation here, just putting debugging code instead }); return found_errors; } </code></pre> <p>What am I doing wrong? All other attributes for these input fields are being correctly retrieved by jQuery, just not the value after I've typed text into them.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload