Develop Reference

Changing input box also need to find check box checked or not in JS

I have input box along with checkbox in table <td> like below,
<td>
<input class="Comment" type="text" data-db="comment" data-id="{{uid}}"/>
<input type="checkbox" id="summary" title="Check to set as Summary" />
</td>
Based on check box only the content of input box will be stored in DB.
In the JS file, I tried like
var updateComment = function( eventData )
{
var target = eventData.target;
var dbColumn = $(target).attr('data-db');
var api = $('#api').val();
var newValue = $(target).val();
var rowID = $(target).attr('data-id');
var summary = $('#summary').is(':checked');
params = { "function":"updatecomments", "id": rowID, "summary": summary };
params[dbColumn] = newValue;
jQuery.post( api, params);
};
$('.Comment').change(updateComment);
But the var summary always returning false.
I tried so many ways prop('checked'),(#summary:checked).val() all are returning false only.
How to solve this problem?

Looks like you have multiple rows of checkboxes + input fields in your table. So doing $('#summary').is(':checked') will return the value of first matching element since id in a DOM should be unique.
So, modify your code like this:
<td>
<input class="Comment" type="text" data-db="comment" data-id="{{uid}}"/>
<input type="checkbox" class="summary" title="Check to set as Summary" />
</td>
And, instead of $('#summary').is(':checked'); you can write like this:
var summary = $(target).parent().find(".summary").is(':checked');
By doing this, we are making sure that we are checking the value of checkbox with the selected input field only.
Update: For listening on both the conditions i.e. when when checking checkbox first and then typing input box and when first typing input box and then checked:
Register the change event for checkbox:
// Whenever user changes any checkbox
$(".summary").change(function() {
// Trigger the "change" event in sibling input element
$(this).parent().find(".Comment").trigger("change");
});

You have missed the jQuery function --> $
$('#summary').is(':checked')
('#summary') is a string wrapped in Parentheses. $ is an alias for the jQuery function, so $('#summary') is calling jquery with the selector as a parameter.

My experience is that attr() always works.
var chk_summary = false;
var summary = $("#summary").attr('checked');
if ( summary === 'checked') {
chk_summary = true;
}
and then use value chk_summary

Change all the occurrences of
eventData
To
event
because event object has a property named target.
And you should have to know change event fires when you leave your target element. So, if checkbox is checked first then put some text in the input text and apply a blur on it, the it will produce true.

Use like this
var summary = $('#summary').prop('checked');
The prop() method gets the property value
For more details, please visit below link.
https://stackoverflow.com/a/6170016/2240375

On typing/entering data in text box getting the entered value to display

I have a text box, after entering which i need to get that value and display in alert box,without using any forms or buttons.
This is what I used: But its not working ,it gives null value on loading of the file.
HTML
<tr>
<td><br>Address of Patient</td>
<td> <br> <input type="text" name="inc_patientAddress" id="inc_address" required></td>
</tr>
Jvascript
<script type="text/javascript">
var x = document.getElementById('inc_address');
alert(x.value);
</script>
I want to display the text box value after entering the data in text box , Is it possible? Please help

Use blur event:
document.getElementById('inc_address').addEventListener('blur', function() {
console.log(this.value);
}, false);
Demo: http://jsfiddle.net/tusharj/hop3szu4/
Docs: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Try this
For every input
$('#inc_address').on('input', function() {
alert($(this).val());
});
Working Fiddle Here
For every complete Input
$('#inc_address').on('change', function() {
alert($(this).val());
});
Working Fiddle Here

You need to add blur function for that input.
As soon as it will lost focus from that text box it will call this function and so the alert will be displayed.
<input type="text" name="inc_patientAddress" id="inc_address" onblur="myFunction()" required>
Call this funtion on blur:
myFunction(){
alert("#inc_address").value();
}

Jquery next() is not working

I have
<table class="prodtable">
<tr>
<td></td>
<td>
<input class="editok" value="2" />
</td>
<td>
<input name="prodnumber" value="1" />
<i></i>
</td>
</tr>
</table>
and this js
$('.prodtable').on('blur','.editok',function(){
var neuanzahl = $(this).val();
$(this).parent('td').text(neuanzahl);//<-- till here works fine
$(this).parent('td').next().find('input').val(neuanzahl);//<-- from here, failure
$(this).parent('td').next().find('i').addClass('icon-pencil');
});
the editok input was inserted dynamically, thats why i am setting the handler from parent table.
my problem is, on blur event, the value of the given input should be put in the next input which is inside the next td with name prodnumger and the <i> should get the class icon-pencil.
I am trying for 1 hour now, what a shame.. not a single success. what am I doing wrong here?

This line
$(this).parent('td').text(neuanzahl);
replaces everything in the TD, as that's what text() does, it overwrites everything, so on the next line when you do
$(this).parent('td').next().find('input') ...
there is no this, you just removed it with text()
Just chaining instead of using multiple lines will keep the reference
$('.prodtable').on('blur','.editok',function(){
var neuanzahl = this.value;
$(this).parent('td')
.text(neuanzahl)
.next('td')
.find('input')
.val(neuanzahl)
.next('i')
.addClass('icon-pencil');
});
FIDDLE

The minute you call $(this).parent('td').text(...), you've removed the input from its parent. So $(this).parent('td') in the following calls won't match anything.
Save that td at the start, and use it throughout:
$('.prodtable').on('blur','.editok',function(){
var neuanzahl = $(this).val();
var td = $(this).parent('td');
td.text(neuanzahl);
td.next().find('input').val(neuanzahl);
td.next().find('i').addClass('icon-pencil');
});
Example: http://codepen.io/paulroub/pen/xHwdi

Solution is to store reference of next div in a variable.
$('.prodtable').on('blur', '.editok', function () {
var td = $(this).parent('td');
var next = $(this).parent('td').next(); //Store reference of next div in a variable
var neuanzahl = $(this).val();
td.text(neuanzahl);
next.find('input').val(neuanzahl);
next.find('i').addClass('icon-pencil');
});
Problem with your code is that when $(this).parent('td').text(neuanzahl) reference to this is lost as you have replaced the content to td.

Your table opening tag is not spelled correctly that is likely why you are having difficulties.

Pass the value of html input text to Javascript Function and get the result

This is my very first time I'm using Javascript.
I have this Script:
<script type="text/javascript">
function baunilha()
{
var qb=document.getElementById("quantbaunilha").innerHTML;
var prbau=5.58;
var totbau=qtd*prbau;
}
document.getElementById("valorlinhab").innerHTML=baunilha();
</script>
And, this is how the Function is called:
<tr>
<td><img src="/imagens/DOB_Baunilha.PNG" style="vertical-align: middle" alt="Ima_Bau"> </td>
<td>Caixa de 42 Unidoses de Detergente Ultra-Concentrado aroma Baunilha</td>
<td><input id="quantbaunilha" name="quantbaunilha" value="0" maxlength="2" type="text" size="2" onchange="baunilha()"></td>
<td><input id="valorunib" name="valorunib" size="6" value="5.58">€</td>
<td><input id="valorlinhab" name="valorlinhab" size="8" value="0.00">€</td>
</tr>
So, I want that the result of the Function apears in text-box id="valorlinhab".
I tried the examples of w3schools, but they didn't work, as others examples in the web.
Is there someone who could help me? Any help is wellcome.
Thank you, in advance.

You need to be using value instead of innerHTML. Additionally, you are using "qtb" instead of "qb" in your calculation. You should also set the value inside the baunilha function. Finally, you must tie an event listener to the input so that it will call the javascript function.
I also added a line which would check if the input is actually a number.
function baunilha()
{
var qb=document.getElementById("quantbaunilha").value;
//check that quantbaunilha is a number
if(isNaN(parseFloat(qb)))
{
alert('Enter a number');
return;
}
var prbau=5.58;
document.getElementById("valorlinhab").value=qb*prbau;
}
document.getElementById("quantbaunilha").addEventListener('change', baunilha);
Here is a fiddle: http://jsfiddle.net/uLfcG/3/

You use innerHTML to put the results in to an element's inner HTML for a tag with both an opening and closing tag (like <p>).
Also, since you are using it for your onchange event, you should move the value setting in to the function as well.
For <input>, you set the value attribute instead:
<script type="text/javascript">
function baunilha() {
var qb=document.getElementById("quantbaunilha").value;
var prbau=5.58;
var totbau=qb*prbau;
document.getElementById("valorlinhab").value=totbau;
}
</script>
That should do the trick.
Here is a JSFiddle with a working example: http://jsfiddle.net/U7ZZh/
Also, you had a small typo on the line that is var totbau=qtb*prbau should be var totbau=qb*prbau

JQuery - Append to text area that has been modified with Jquery

I am trying to append the value of a div or a input box to my text area. I have this working no problem but if i clear the contents of the text area first with a Jquery action it doesnt allow me to use my append features.
E.g.
<script type="text/javascript">
$(document).ready(function() {
$("#Column1").click(function () {
$("#sql").append($("#Column1").val())
})
$("#Column2").click(function () {
$("#sql").append($("#Column2").html())
})
$("#reset_sql").click(function () {
$("#sql").val('SELECT ')
})
</script>
<div> <input type="checkbox" name="column1" id="column1" value="`Column1`"> column1 </div>
<div id="Column2"> Column2 </div>
<textarea rows="10" cols="80" name="sql" id="sql"><? echo $sql ;?></textarea>
<input type="submit" value="submit" />
<input type="button" value="reset sql" id="reset_sql" />
The input and div lines above are just generic examples but relate exactly to what i'm trying to do.
I dont understand that when i clear the text area with javascript that my appends wont work. I get no JS errors in firefox error console.
thank you

You have several issues with your code: you haven't closed your document.ready callback, you are using the incorrect case when refering to your ID's, and you're using some of the jQuery methods incorrectly. For example, append() appends HTML to an element, whereas you want to update the value.
Your logic isn't quite correct either, since columns won't be removed when you uncheck a checkbox, and the columns won't be comma delimited (it looks like you are building a SQL string here).
I believe something like this is what you're looking for:
$(document).ready(function() {
var $sql = $('#sql');
var initialValue = $sql.val();
$("#column1, #column2").on('change', function () {
var cols = [];
var checked = $('input[type="checkbox"]').filter(':checked').each(function() {
cols.push($(this).val());
});
$sql.val(initialValue + ' ' + cols.join(', '));
})
$("#reset_sql").on('click', function () {
$sql.val(initialValue)
})
});
Working Demo

Your checkbox has an id of 'column1', but your event handler is $("#Column1").click(function () {.
Case matters! Either change the id to 'Column1' or the event handler to look for $('#column1').
Demo