Develop Reference

Jquery Need siblings value but not working

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.

Append an element to a new one in the same position

THE PROBLEM IS NOT THE LABEL FOR ATTRIBUTE, IT WORKS, MY PROBLEM IS THAT I NEED TO RENDER THE DOCUMENT AS EXPECTED
Getting crazy on this code! Why it doesn't works?
<div>
<input type="checkbox" name="tonino" />
</div>
<script>
var $el=$('input[name="tonino"]');
var el=$el.prop('name');
$el.before('<label for="'+el+'" />');
$el.appendTo($el.parent().find('label:first'));
</script>
I'm expecting:
<div>
<label for="tonino">
<input type="checkbox" name="tonino" />
</label>
</div>

A straightforward approach using $.wrap() http://api.jquery.com/wrap/
var cb = $('input[name="tonino"]');
cb.wrap($('<label />', {
'for': cb.attr('name')
}));

I think you want like below (check HTML through browser console to see code working properly or not?):-
var el=$('input[name="tonino"]');
el.before('<label for="'+el.attr('name')+'" />'+el.attr('name')+'<label>');
el.appendTo(el.parent().find('label:first'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="tonino" />
</div>
Note:- jquery library needed too.

How to update multiple divs while typing (javascript onkeyUp)?

I have a short javascript code that updates the content of a div element (box1 in the example below). It replaces the default text ("hello") with the text typed in an input element.
I would like to modify this code so it'd update not only the box1 div, but box2 and box3 too. I tried to use getElementsByClassName, but I was unable to make it work. I would be very grateful if somebody'd help me. Thank you.
<div class="font1" id="box1">hello</div>
<div class="font2" id="box2">hello</div>
<div class="font3" id="box3">hello</div>
<input type='text' name='fname' class='chatinput' onkeyUp="document.getElementById('box1').innerHTML = this.value" />

This should work for you :)
document.querySelector('.chatinput').onkeydown = function(){
var box1 = document.querySelector('#box1'),
box2 = document.querySelector('#box2'),
box3 = document.querySelector('#box3');
box1.innerHTML = box2.innerHTML = box3.innerHTML = (this.value);
}
You basicly create a onkeydown event, and attach it to the input.chatinput. I advise you, not to use inline javascript in the HTML

Try this
<div class="font1" id="box1">hello</div>
<div class="font2" id="box2">hello</div>
<div class="font3" id="box3">hello</div>
<input type='text' name='fname' class='chatinput' onkeyUp="document.getElementById('box1').innerHTML = this.value; document.getElementById('box2').innerHTML = this.value; document.getElementById('box3').innerHTML = this.value; " />
Demo Here

document.getElementsByClassName('box') return list of element so you should do this in a for loop
function onKeyUp($this){
for(var i in document.getElementsByClassName('box'))
document.getElementsByClassName('box')[i].innerHTML = $this.value
}
<div id="box1" class="box">hello</div>
<div id="box2" class="box">hello</div>
<div id="box3" class="box">hello</div>
<input type='text' name='fname' class='chatinput' onkeyUp="onKeyUp(this)" />

jQuery:
jsfiddle
function foo(value){
$("div").each(function(){
this.innerHTML = value;
})
};
angular:
jsfiddle
<body ng-app>
<div class="font1" id="box1">Hello {{value}}</div>
<div class="font2" id="box2">hi {{value}}</div>
<div class="font3" id="box3">nihao {{value}}</div>
<input type='text' name='fname' class='chatinput' ng-model="value" />
</body>

You're on the right track. Just use the same command three times, either inline:
<input type="text" name="fname" class="chatinput" onkeyUp="
document.getElementById('box1').innerHTML = this.value;
document.getElementById('box2').innerHTML = this.value+'hello';
document.getElementById('box3').innerHTML = this.value+'world';" />
or use a JavaScript function:
<script>
function clickMe(s){
document.getElementById("box1").innerHTML = s;
document.getElementById("box2").innerHTML = s+"hello";
document.getElementById("box3").innerHTML = s+"world";
}
</script>
<input type="text" name="fname" class="chatinput" onkeyUp="clickMe(this.value)" />
(Side note: Use double quotes for HTML-attributes. Even though all browser will understand you if you use single quotes, the double quote is the standard and the only allowed way if you want to be XML/XHTML/HTML5-compatible)

Getting Value from a Custom Prompt

I'm having trouble getting the value of a custom prompt in PHP. I actually made a custom prompt that consist of two input boxes and stored it in a variable. When I clicked a button I'll just call it. I have no problem with this for its working well.
var popup = "div id='overlay'>
<div id='box_frame'>
<div id='box'><a href='javascript:closeDialog()'>close</a>
<h2>Edit Material</h2>
<h1>"+projName+"</h1>
<label>Material</label>
<input name='boxMatName' type='textbox' value='"+matName+"' disabled />
<br>
<label>Quantity</label>
<input id='boxEstVal' type='textbox' value='"+estQty+"' />
<br>
<button onclick='javascript:saveDesc()'>Save</button>
<div id='try'></div>
</div>
</div>
</div>
";
I tried this to get the value from the prompts:
function saveDesc(){
var mat = ('#boxMatName').val();
var est = ('#boxMatName').text();
alert(mat+est);
However, I am not getting any results. Can you help me understand what I am doing wrong?

why dont you give another id to your input:
var popup = "div id='overlay'>
<div id='box_frame'>
<div id='box'><a href='javascript:closeDialog()'>close</a>
<h2>Edit Material</h2>
<h1>"+projName+"</h1>
<label>Material</label>
<input name='boxMatName' id="boxMatName" type='textbox' value='"+matName+"' disabled />
<br>
<label>Quantity</label>
<input id='boxEstVal' type='textbox' value='"+estQty+"' />
<br>
<button onclick='javascript:saveDesc()'>Save</button>
<div id='try'></div>
</div>
</div>
</div>
then, this should work.
function saveDesc(){
var mat = $('#boxMatName').val();
var est = $('#boxEstVal').val();
alert(mat + ' - ' + est);
}
by the way, did you include the jquery in the head of your html file?
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

You are using <input> so you need val() and not text():
var mat = $("input[name=boxMatName]").val();
var est = document.getElementById('boxEstVal').value; // or $('#boxEstVal').val();

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().