Jquery Need siblings value but not working - javascript

I want to populate the value of the "eventTitle" in "Requirement" input box when some one click on the corresponding check box. i.e If some one clieck on the check box of Vels Group Of Instutions then automatically i want this to populate in texbox with name "Requirement" if multiple check box are clicked i want it to be comma seperated. Below is the code i tried to get but it is not working and getting undefined.
<div class="wid100">
<div class="eventTitle">Vels Group Of Instutions</div>
<div class="eventDate">2017-07-25</div>
<div class="eventVenue">This is world wide institute of technology </div>
<div class="selectEvent">
<input type="checkbox" class="seminar selected" id="179">
<label for="179"></label>
</div>
</div>
<div class="wid100">
<div class="eventTitle">Title goes here</div>
<div class="eventDate">2017-07-25</div>
<div class="eventVenue">sdfdsafasdfdsafdsafsadfsdfsdf </div>
<div class="selectEvent">
<input type="checkbox" class="seminar" id="179">
<label for="179"></label>
</div>
</div>
<input type="text" name="Requirement" placeholder="Title 01" id="divclass" required="required" class="pull-left" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
$(".seminar").click(function () {
if ($(this).is(":checked")) {
//checked
$(this).addClass("selected");
var event_title = "";
event_title = $(".selected").siblings('.eventTitle').val();
console.log(event_title); return false;
} else {
//unchecked
$(this).removeClass("selected");
}
});

.eventTitle is not the sibling of .selected and the .eventTitle is a div element having no value, text there. change this line
event_title = $(".selected").siblings('.eventTitle').val();
to
event_title = $(this).parent().siblings('.eventTitle').text();
or
event_title = $(this).parent().siblings('.eventTitle').html();

The issue you have is because .eventTitle is not a sibling of the clicked checkbox, so the DOM traversal logic is wrong. div elements also do not have a val(), so you should use text() or html() instead.
However, you can improve the logic and also achieve the comma separated list of the selected event titles by using map() to build an array which you can then join() before setting in the value of #divclass. Try this:
$(".seminar").click(function() {
$(this).toggleClass('selected', this.checked);
var eventNames = $('.seminar:checked').map(function() {
return $(this).closest('.wid100').find('.eventTitle').text();
}).get().join(',');
$('#divclass').val(eventNames);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wid100">
<div class="eventTitle">Vels Group Of Instutions</div>
<div class="eventDate">2017-07-25</div>
<div class="eventVenue">This is world wide institute of technology </div>
<div class="selectEvent">
<input type="checkbox" class="seminar selected" id="179">
<label for="179"></label>
</div>
</div>
<div class="wid100">
<div class="eventTitle">Title goes here</div>
<div class="eventDate">2017-07-25</div>
<div class="eventVenue">sdfdsafasdfdsafdsafsadfsdfsdf </div>
<div class="selectEvent">
<input type="checkbox" class="seminar" id="179">
<label for="179"></label>
</div>
</div>
<input type="text" name="Requirement" placeholder="Title 01" id="divclass" required="required" class="pull-left" size="100" />
I'd suggest changing the id of the #divclass to something more descriptive, as the element is not a div, and it's an identifier, not a class.
Finally, your .seminar elements have the same id attribute which is invalid. You should ensure that the ids are unique within the DOM - assuming that this is not just a typo from copy/pasting the code in the question.

Related

Changing placeholder with `this` on multiple elements via checkbox

Currently I have two search inputs on every page using the same classes. What I am trying to do is change the placeholder text of this element when the checkbox isnt checked here is what I have so far. Also Codepen
HTML
<nav class="navbar navbar-secondary-scroll-mobile" role="navigation">
<div class="container">
<div class="row">
<div class="search-scroll">
<div class="pull-left">
<input autocomplete="off" class="form-control SearchInput" name="search" placeholder="Have your search terms translated to Chinese." value="" type="text">
</div>
<div class="pull-right">
<label>
<input class="translateSearch" type="checkbox" checked="checked">
<span>Translate</span>
</label>
</div>
</div>
</div>
</div>
</nav>
JS
$('.translateSearch').on('change', function(e) {
if ($(this).is(':checked') == true) {
$('.translateSearch').not($(this)).attr('checked', true);
} else {
$('.translateSearch').not($(this)).attr('checked', false);
$('.translateSearch').attr('placeholder', 'Search using exact terms.');
}
});
I just cant seem to get it to work with the placeholder. Any ideas?
The following JS will set the placeholder on your text input with class SearchInput. I assumed you wanted the placeholder there instead of on the translateSearch checkbox as implied by the original code. Also made a change that restored the original placeholder text when the box is checked.
$('.translateSearch').on('change', function(e) {
if ($(this).prop('checked')) {
$('.SearchInput').attr('placeholder', 'Have your search terms translated to Chinese.');
} else {
$('.SearchInput').attr('placeholder', 'Search using exact terms.');
}
});
Also as a note - you don't need to manually to the checkbox behaviors as they are done automatically by default.
Here's a link to the CodePen: http://codepen.io/anon/pen/akxxOk
I am not sure what purpose the if/else statement serves in your JS.
I simplified it so it updates the placeholder (has to be on the proper class, in this case SearchInput) without any else condition:
$('.translateSearch').on('change', function(e) {
if ($(this).is(':checked') === false) {
$('.SearchInput').attr('placeholder', 'Search using exact terms.');
}
});
Here is an updated Codepen
You try to change the text of the checkbox not your input. So if you add a id to your input :
$('.translateSearch').on('change', function(e) {
if ($(this).is(':checked') == true) {
$('.translateSearch').not($(this)).attr('checked', true);
$('#inputToChange').attr('placeholder', "Have your search terms translated to Chinese.");
} else {
$('.translateSearch').not($(this)).attr('checked', false);
$('#inputToChange').attr('placeholder', 'Search using exact terms.');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-secondary-scroll-mobile" role="navigation">
<div class="container">
<div class="row">
<div class="search-scroll">
<div class="pull-left">
<input id="inputToChange" autocomplete="off" class="form-control SearchInput" name="search" placeholder="Have your search terms translated to Chinese." value="" type="text">
</div>
<div class="pull-right">
<label>
<input class="translateSearch" type="checkbox" checked="checked">
<span>Translate</span>
</label>
</div>
</div>
</div>
</div>
</nav>

I need help showing and hiding data based on a checkbox

Alright so I have a form. In the form I have a lot of check boxes. If a person clicks on the checkbox. It shows the field below the box. If they click on the checkbox again it makes the field below the checkbox disappear and makes the field have no value.
here is the code. I have JS running the show and hide. and Html calling it.
function ShowCutSewDescription() {
var select = $('#send_item_to_cutsew');
console.log(select)
//select = parseInt(select);
if (select.attr('checked', true)) {
$('#cutsew-checked').show();
}else {
$('#cutsew-checked').hide();
}
}
<div class="form-group">
<label class="col-md-3 control-label">Sending item to Cut/Sew Manager</label>
<div class="col-md-9">
<input type="checkbox" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">
</div>
Changes made
► select.attr('checked', true) to select.is(":checked")
► $('#send_item_to_cutsew') to $('[name="send_item_to_cutsew"]') since there is no element with that Id.
Working Demo
function ShowCutSewDescription() {
var select = $('[name="send_item_to_cutsew"]');
if (select.is(":checked")) {
$('#cutsew-checked').show();
} else {
$('#cutsew-checked').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-3 control-label">Sending item to Cut/Sew Manager</label>
<div class="col-md-9">
<input type="checkbox" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">
</div>
<div id="cutsew-checked">
Sample box
</div>
I assume this is using jQuery. If so, the selector that you have input is looking for something with an id of send_item_to_cutsew.
jQuery uses css selectors as a base, as referenced by this page: https://api.jquery.com/category/selectors/
The proper way to get the input that you want based on the name is as follows:
var select = $('[name="send_item_to_cutsew]');
or you can set the id to the above like so:
<input type="checkbox" id="send_item_to_cutsew" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">

Jquery each loop in rows not working

i want to get each value when a button clicked.
what i missed?
//add row
$("#btnAdd").click(function(){
$(".oItem:last").clone().insertAfter(".oItem:last");
});
//submit
$("#btnCalc").click(function(){
$("[id^=txtItemName]").each(function(){
alert($("#txtItemName").val());
});
});
my fiddle here
https://jsfiddle.net/k5ndm840/3/
thanks
You are using the same ID for each new field being added. You should use class instead of id in your case as id has to be unique.
Use $(this).val(); as you will be getting this => current element in each iteration. In each callback, this refers to the element
$("#txtItemName") will always select first element having id as txtItemName
Try this:
$("#btnAdd").click(function() {
$(".oItem:last").clone().insertAfter(".oItem:last");
});
$("#btnCalc").click(function() {
$("[id^=txtItemName]").each(function() {
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btnAdd">Add</button>
<button id="btnCalc">Submit</button>
<div class="masterItem">
<div class="row oItem">
<div class="col-md-4">
<div class="form-group">
<div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span>
<input id="txtItemName" type="text" class="form-control" placeholder="put random number here" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
</div>
Fiddle here
Edit: As per the www standards, There must not be multiple elements in a document that have the same id value. [Ref]. As you are dealing with attribute selector, you are not facing any issue but ID MUST BE UNIQUE
Edit: To find another child under the parent element, use .closest() to find the parent element and .find() to select child of the parent.
Try this:
$("#btnAdd").click(function() {
$(".oItem:last").clone().insertAfter(".oItem:last");
});
$("#btnCalc").click(function() {
$("[id^=txtItemName]").each(function() {
alert($(this).val());
alert($(this).closest(".form-group").find('[id=txtTwo]').val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="btnAdd">Add</button>
<button id="btnCalc">Submit</button>
<div class="masterItem">
<div class="row oItem">
<div class="col-md-4">
<div class="form-group">
<div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span>
<input id="txtItemName" type="text" class="form-control" placeholder="put random number here" aria-describedby="basic-addon1">
<input id="txtTwo" placeholder="second input">
</div>
</div>
</div>
</div>
</div>
when you are trying to access the elements with id it will always give the first element matching the selector criteria.
$("#txtItemName").val()
This will always give the value of first matching element. Try to do like this.
//submit
$("#btnCalc").click(function(){
$("[id^=txtItemName]").each(function(){
console.log($(this).val());
});
});

Sorting Input Text inside multiple div's using javascript / jquery?

There are three fields(first name, Last name & age) displayed in text boxes. Each field is displayed in separate div's. There are 4 records. On clicking a sort button above each field the div records should be sorted based on the data type of the field and should displayed in the HTML page.
I tried the solution in this link
I can't use this because the records are displayed in text box within the div.
<div id="content">
<div>
<div class="price"><input type="text" class="pri" value="120"/></div>
<div class="dateDiv">2012-05-09 20:39:38.0</div>
<div class="distance">20 mile</div>
</div>
<div>
<div class="price"><input type="text" class="pri" value="123"/></div>
<div class="dateDiv">2012-05-10 20:39:38.0</div>
<div class="distance">30 mile</div>
</div>
<div>
<div class="price"><input type="text" class="pri" value="100" /></div>
<div class="dateDiv">2012-05-11 20:39:38.0</div>
<div class="distance">50 mile</div>
</div>
<div>
<div class="price"><input type="text" class="pri" value="124"/></div>
<div class="dateDiv">2012-05-12 20:39:38.0</div>
<div class="distance">60 mile</div>
</div>
</div>
How can I do this in javascript?
see this demo using jquery.tinysort.min.js
see also this one
You can use knockoutjs to do something like that.
For example, the html:
<div id="content" data-bind="foreach: lines">
<div class="fname"><input type="text class="pri" data-bind="value: fname"/></div>
<div class="lname" data-bind="text: lname"/>
<div class="age" data-bind="text: age"/>
</div>
Javascript:
function EachDivViewModel(line)
{
this.fname = line.fname;
this.lname = line.lname;
this.age = line.age;
}
function YourViewModel()
{
var self = this;
self.lines = ko.observableArray([]); // this array will contain elements of EachDivViewModel type
self.handlerForYourSortButtongs = function() {
// Code here to sort the array based on the button clicked
// The UI will automatically get updated as you reorder the elements in the lines array
}
}
$(document).ready(function() {
var yourViewModelInstance = new YourViewModel();
// Code to get the lines here
ko.applyBindings(yourViewModelInstance);
});
It can be done using tablesorter.
Hope that will help you out.

jQuery keyup - not visible second input

HTML:
<div id="block">
<input type="text" value="1" id="number" />
<div id="price"></div>
</div>
<div id="block">
<input type="text" value="1" id="number" />
<div id="price"></div>
</div>
jQuery:
<script type="text/javascript">
$(function() {
$("#number").keyup(function () {
var value = $(this).val()*5;
$("#price").text(value);
}).keyup();
});
</script>
Price is only displayed at first. Why?
How it is correct to make?
Blocks can be endless.
UPDATE:
Make:
var id = 1;
$('.number').each(function() {
$(this).attr('id', 'id_' + id++);
});
How it associate?
Blocks can be endless.
Your code is searching for id = price where as your html has price as class.
Basically instead of
$("#price").text(value);
you should be using
$(".price").text(value);
# is used for id selector and . is used for class selector
Update:
As per edited Code:
In your html there are two div with the same id, whereas every element should have a unique id. Please change id of the element to be unique may be price1, price2 and then use
jQuery('#price1').text(value) or jQuery('#price2').text(value) as per your case
I'd suggest using the following:
$('input:text.number').keyup(
function() {
var v = parseFloat($(this).val()),
s = v*5;
$(this).next('.price').text(s);
});​
JS Fiddle demo.
The jQuery, onkeyup, takes the current user-entered value of the input, parses it to make sure it's a number, and then updates the next sibling-element that matches the supplied selector (.price) of the text-input, with the calculated number.
The above uses corrected, and now-valid, HTML:
<div class="block">
<input type="text" value="1" class="number" />
<div class="price"></div>
</div>
<div class="block">
<input type="text" value="1" class="number" />
<div class="price"></div>
</div>​
References:
next().
parseFloat().
text().
:text selector.
val().

Categories

Resources