Fetching text input val in jquery is always empty - javascript

I'm fetching the value the user has put into a text field in Jquery but the value is empty. Maybe I'm doing something wrong here or maybe I'm trying to access a clone of something istead of the real element because the inputed value is inside a popover in a fullcalendar. And I'm using bootstrap. Here is my code.
$(document).on('click', '#saveEvent', function () {
//save to db
var yogaspaceid = $("#HiddenYogaSpaceId").val();
var eventTitle = $("#eventTitle").val(); // always empty
//var eventTitle = $("#eventTitle").attr('value'); //always emtpy
var eventStartTime = $( "#timeSelect" ).val();
var eventDuration = $("#timeDuration").val();
$.post(
'/ManageSpaces/SaveNewEvent',
{ id: yogaspaceid, title: eventTitle, startTime: eventStartTime, duration: eventDuration}
);
$calPopOver.popover('destroy');
//refresh callendar or add new event then re render
});
<div id="eventcalendar">
<div class="col-md-10">
<div id='fullcalendar' style="width:100%"></div>
<div id="day-popover-head" class="hide">Add Event</div>
<div id="day-popover-content" class="hide">
#*<form role="form">*#
<div class="form-group">
<label for="eventTitle">Title:</label>
<input type="text" id="eventTitle" class="form-control">
</div>
<div class="form-group">
<label for="timeSelect">Select time:</label>
<select class="form-control" id="timeSelect">
</select>
<br>
<label for="timeDuration">Select duration:</label>
<select class="form-control" id="timeDuration">
<option value="30">30 min</option>
<option value="45">45 min</option>
<option value="60">60 min</option>
<option value="75">75 min</option>
<option value="90">90 min</option>
<option value="105">105 min</option>
<option value="120">120 min</option>
</select>
</div>
<div class="form-inline">
<button type="button" id="saveEvent" class="btn btn-default">Submit</button>
<button type="button" id="cancelEvent" class="btn btn-default">Cancel</button>
</div>
#*</form>*#
</div>
</div>
<div id="eventDetails" class="col-md-2 collapse" style="background-color:yellow;">
hello
</div>
</div>

Had to use
var eventTitle = $(".popover #eventTitle").val();
not sure why I had to use .popover in the call, but found the solution here

Related

How do I display a JS value in the <option value="url here & js here">

How can I use document.write to display a value from the drop down menu in
<option value="jmp.php?type=auto&rate=<script>document.write(rate)</script>">Auto Insurance</option>
Is this even possible? How can I accomplish this goal? On the next page I need to _GET the 'rate' and I cannot figure out how to pass it into the value.
When the forms submitted this code is used to send the user to the URL in the value=""
var goBtn = document.getElementById("search");
var menu = document.getElementById("s1");
goBtn.onclick = function() {
window.location = menu.value;
}
Here is the HTML I am working with.
<script>
function getRate() {
var rate = document.getElementById("s2").value;
</script>
<div class="row">
<div class="col-md-12">
<div class="subscribe-block">
<div class="row">
<form class="form-horizontal" role="form" id="subscribeForm">
<div class="col-sm-4">
<fieldset style="margin-top: -1.1em">
<div style="color: #fff;">Insurance Plan</div>
<select id="s1" class="form-control input-lg">
<option value="jmp.php?type=auto&rate=<script>document.write(rate)</script>">Auto Insurance</option>
<option value="jmp.php?type=health&rate=<script>document.write(rate)</script>">Health Insurance</option>
</select>
</fieldset>
</div>
<div class="col-sm-4">
<fieldset style="margin-top: -1.1em">
<div style="color: #fff;">Estimated Current Payment</div>
<select name="s2" id="s2" class="form-control input-lg">
<option>$5</option>
<option>$10</option>
<option>$20</option>
<option>$30</option>
<option>$40</option>
<option>$50</option>
<option>$60</option>
<option>$70</option>
<option>$80</option>
<option>$90</option>
<option>$100</option>
<option>$110</option>
<option>$120+</option>
</select>
</fieldset>
</div>
<div class="col-sm-4">
<input style="color: #fff;" id="search" placeholder="Continue >>" class="btn btn-warning btn-block btn-lg">
</div>
<script>
var goBtn = document.getElementById("search");
var menu = document.getElementById("s1");
var myObject = {
"value1": "jmp.php?type=auto&rate=<script>document.write(rate)<\/script>",
"value2": "jmp.php?type=health&rate=<script>document.write(rate)<\/script>"
}
goBtn.onclick = function() {
window.location = myObject[menu.value];
}
</script>
<select id="s1" class="form-control input-lg">
<option value="value1">Auto Insurance</option>
<option value="value2">Health Insurance</option>
</select>

jquery code not working for all selection options

jquery code does not alert for all options I have in select element, instead jquery only alerts for 1 of the Select option. Please see the below code
I did spent hours to get this fix by checking solution online, but no success
<div>
<h4>Company name</h4>
<select class="form-control" id="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Owner name</h4>
<select class="form-control" id="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Address </h4>
<select class="form-control" id="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Vertical</h4>
<select class="form-control" id="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div class="form-group" style="margin:100px;">
<label for="comment" style="float:left;">Comment:</label> <button class="btn btn-primary btn-xs" id="get_comment_button" role="button" style="float:left;">Get Comment</button>
<textarea class="comment-box" rows="5" id="comment"></textarea>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#get_comment_button").on('click',function(){
var optionText = $("#sel1 option:selected").text();
if (optionText == "updated") {
$("#comment").html("Team Updated on ");
}else {
$("#comment").html("Team Validated on ");
}
});
});
</script>
The ID attribute is unique per document and your code does not work in an intended way because you are repeating the same ID. Either use unique IDs or attach an event to the <select>
Also as a side note, it would also be a good practice to use console.log() for debugging instead of alert()
var company_name = $('#company_name');
var owner_name = $('#owner_name');
var address = $('#address');
var vertical = $('#vertical');
$("#get_comment_button").on('click', function() {
if (company_name.val() == "Updated" ||
owner_name.val() == "Updated" ||
address.val() == "Updated" ||
vertical.val() == "Updated") {
$("#comment").html("Team Updated on ");
} else {
$("#comment").html("Team Validated on ");
}
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div>
<h4>Company name</h4>
<select id="company_name">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Owner name</h4>
<select id="owner_name">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Address </h4>
<select id="address">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Vertical</h4>
<select id="vertical">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div class="form-group" style="margin:100px;">
<label for="comment" style="float:left;">Comment:</label> <button class="btn btn-primary btn-xs" id="get_comment_button" role="button" style="float:left;">Get Comment</button>
<textarea class="comment-box" rows="5" id="comment"></textarea>
</div>
You have used same id in all <select>. Id should be unique. So, you can add same class in all <select> tags.
Here is the Demo
$(document).ready(function(){
$(".sel1").on('change',function(){
var optionText = $(this).children("option:selected").text();
alert("Selected Option Text: "+optionText);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<h4>Company name</h4>
<select id="sel1" class="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Owner name</h4>
<select id="sel1" class="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Address </h4>
<select id="sel1" class="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Vertical</h4>
<select id="sel1" class="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div class="form-group" style="margin:100px;">
<label for="comment" style="float:left;">Comment:</label> <button class="btn btn-primary btn-xs" id="get_comment_button" role="button" style="float:left;">Get Comment</button>
<textarea class="comment-box" rows="5" id="comment"></textarea>
</div>

Last-child not working inside iteration of div

In browser, the HTML is generated dynamically and is rendered as
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status0" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div><div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status1" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div>
</div>
The code is
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName =$this.find("input[type=text]:first-child").val();
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
I am trying to fetch values of contact numbers i.e with id's relationship-type-contact(n) values in the line "
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();"
This is fetching values of first-child textboxes in the variable relationshipContactNumber in the loop.
Please help !!!
This should work, use the .first() and .last() selectors.
Another way, if you have access to alter the HTML, is to add class names for the input fields and select them by using that instead.
function getData() {
var relationship_details_array = [];
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName = $this.find("input[type=text]").first().val();
var relationshipContactNumber = $this.find("input[type=text]").last().val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
console.log(relationship_details_array);
}
$("#getData").on("click", getData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="getData">Show data in console log</button>
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control">
<option value="">Select Relationship</option>
<option value="Father">Father</option>
<option value="Mother" selected>Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" value="Mommy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" value="1234" placeholder="Contact Number">
</div>
</div>
<div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control">
<option value="">Select Relationship</option>
<option value="Father" selected>Father</option>
<option value="Mother">Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" value="Daddy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" value="5678" placeholder="Contact Number">
</div>
</div>
</div>

Search key add on url with jQuery

I have a short problem. This is my html code:
<select name="searchtips" id="searchtips" class="form-control">
<option value="http://88.99.78.54/category/bonnes-affaires/ameublement/searchkey">Ameublement</option>
<option value="Electro ménager">Electro ménager</option>
<option value="Extérieur">Extérieur</option>
<option value="Hi-tech">Hi-tech</option>
<option value="Prêt-à-porter">Prêt-à-porter</option>
<option value="Jouets">Jouets</option>
<option value="Animaux">Animaux</option>
<option value="Divers">Divers</option>
</select>
<label></label>
<input type="text" class="form-control" name="search" placeholder="Mots cles">
</div>
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 buttons-section">
<button type="submit" class="btn btn-tips btn-block submit-button">J'EN PROFITE</button>
</div>
</div>
This is the jQuery:
$(".btn").click(function(){
var go_to_url = $("#searchtips").find(":selected").val();
document.location.href = go_to_url;
});
Ok, so when I select an category from options and click on J'EN PROFITE all works fine redirect me to the website. But when I write something on "Mots Cles" I want to add on my search key link: http://88.99.78.54/category/bonnes-affaires/ameublement/searchkey. So how can I add the text on my link?
Thank you so much for your help!
You need to check if the field is populated and based on that, you can append it to the URL. Check the below code:
$(".btn").click(function() {
var searchString = '';
if($("#searchString").val() != '')
var searchString = $("#searchString").val();
var go_to_url = $("#searchtips").find(":selected").val();
document.location.href = go_to_url + '/' + searchString;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="searchtips" id="searchtips" class="form-control">
<option value="http://88.99.78.54/category/bonnes-affaires/ameublement/searchkey">Ameublement</option>
<option value="Electro ménager">Electro ménager</option>
<option value="Extérieur">Extérieur</option>
<option value="Hi-tech">Hi-tech</option>
<option value="Prêt-à-porter">Prêt-à-porter</option>
<option value="Jouets">Jouets</option>
<option value="Animaux">Animaux</option>
<option value="Divers">Divers</option>
</select>
<label></label>
<input type="text" class="form-control" name="search" placeholder="Mots cles" id="searchString">
</div>
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 buttons-section">
<button type="submit" class="btn btn-tips btn-block submit-button">J'EN PROFITE</button>
</div>
</div>

Remove all other div's on click of a image

<label>Project Type </label>
<div>
<select name="category" id="category" class="form-control ">
<option value="">Select Project Type</option>
<option value="Independent_House">Independent House</option>
<option value="Duplex_House">Duplex House</option>
<option value="Pent_House">Pent House</option>
</select>
</div>
<div class="cato" id="category_Independent_House" style="display:none">
<input type="button" id="addindependant" value="Add Property" />
<div id="cato_Independent_House">
<div class="form-group">
<label>Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<div class="cato" id="category_Duplex_House" style="display:none">
<input type="button" id="addduplex" value="Add Property" />
<div id="cato_Duplex_House">
<div class="form-group">
<label >Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<div class="cato" id="category_Pent_House" style="display:none">
<input type="button" id="addpenthouse value="Add Property" />
<div id="cato_Pent_House">
<div class="form-group">
<label >Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<script type="text/javascript">
js(function() {
js('#addindependant').click(function(e){
js('#cato_Independent_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
js('#addduplex').click(function(e){
js('#cato_Duplex_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
js('#addpenthouse').click(function(e){
js('#category_Pent_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
});
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('#category_'+selection).show('slow');
});
});
</script>
This is my code. When I select the category based upon the category selected the divs cato_Independent_House cato_Duplex_House and category_Pent_House get appended to their respective categories.
Consider first independant house is selected from drop down so its respective cato_Independent_House gets appended to the div with id id="category_Independent_House" on click of the button.after that when duplex house is selected from drop down its respective 'cato_Duplex_House' gets appended to div with id="cato_Duplex_House" on click of the button.
But when I go back and select Independant house it must not show previous selected div until the button is clicked. But here the div is already been displayed even the button is not clicked when I go back.The previous menu should show its div only when the button is clicked.i.e, the previous divs must get empty or removed when other option is selected.How to do this?
js
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('.cato').each(function() {
console.log(js('.cato'));
if(js(this).attr('data-visible') != "true") {
js(this).hide();
}
});
js('#category_'+selection).show('slow');
});
js('.addProperty').click(function(){
js(this).parents('.cato').attr('data-visible','true');
});
});
html
<input type="button" id="addduplex" value="Add Property" class="addProperty" />
add class addProperty to all your add property input
Working JsFiddle Link. I guess this is what you wanted
You should use the jquery hide method to hide the others divs depending on wich one you have selected:
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('#category_'+selection).show('slow');
if(selection=="Independent_House"){
js('#cato_Duplex_House').hide();
js('#cato_Pent_House').hide();
}else if(...){
{otherCases}
});});
And if you want to clear also the inputs selection of each div you could do something like this:
js("#input_controller_id_to_clear")[0].selectedIndex = -1;

Categories