Develop Reference

İ can't pull data with JavaScript

I want to pull data using JavaScript and show it in console. I don't know what I did wrong.
main.js
// ADD TO CART
$("#addToCartBtn").on('click',function(){
var _qty=$("#productQty").val();
var _productId=$(".product-id").val();
var _productName=$(".product-name").val();
console.log(_productId,_productName,_qty);
});
I am using django framework to write backend
detail.html
<div class="product-btns">
<div class="qty-input">
<span class="text-uppercase">Ədəd: </span>
<input class="input" type="number" value="1" id="productQty">
</div>
<input type="hidden" class="product-id" value="{{product.id}}">
<input type="hidden" class="product-name" value="{{product.name}}">
<button class="primary-btn add-to-cart"><i class="fa fa-shopping-cart" id="addToCartBtn"></i> Səbətə at</button>
</div>

The problem is probably that the element that has id="addToCartBtn" is not really the button but the <i> element - which has no content and therefore no width. So it is never clickable.

Comments system : open a complex form (editor) next to Reply button

I have written a comment system in PHP. Currently, the editor is on the top of the page:
<form method="POST" id="comment_form" enctype="multipart/form-data">
<input type="text" name="comment_name" id="comment_name" value="<?php echo $user ?>" placeholder="User" />
<textarea name="comment_content" id="comment_content" placeholder="Comment" rows="5"></textarea>
<input type="hidden" name="comment_id" id="comment_id" value="" />
<input type="submit" name="submit" id="save" class="btn" value="Send" />
</form>
Each comment look like that (simplified):
<div class="comment">
<b><?php echo $row["user"] ?></b>
<div>
<?php echo $row["comment"] ?>
</div>
<button type="button" class="btn reply" id="'.$row["comment_id"].'">Reply</button>
</div>
An small javascript function sets the focus on the editor when the Reply button is clicked:
$(document).on('click', '.reply', function(){
var comment_id = $(this).attr("id");
$('#comment_id').val(comment_id);
$('#comment_name').focus();
});
});
I would like that editor to open below any Reply button when one of the buttons is clicked.
I guess that adding the editor code after each comment with a "display: none" attribute is not the best solution.
Would you please help me to achieve that ?

If I understand correctly you want one form for all comments, rather than duplicating the form HTML inside every comment.
In which case you need to move it in the DOM via JavaScript. You don't show any attempt at this but it might look something like this:
$(document).on('click', '.reply', function() {
$('#comment_form').insertAfter(this); //<-- move form
var comment_id = $(this).attr("id");
$('#comment_id').val(comment_id);
$('#comment_name').focus();
});
Note also that your JS is syntactically invalid as you have double });.

HTML - PHP UPDATE Database when button is clicked

I have html page that has several button. I want to update my database column when I click a button.
In index.html
<form action="db.php" method="post">
<button type="submit" id="1_y" class="btn btn-success">1.Lambayı Yeşil Yak</button>
<button type="submit" id="1_k" class="btn btn-danger">1.Lambayı Kırmızı Yak</button></form>
And it looks like that
http://prntscr.com/fa5eba
My db table Webtek
http://prntscr.com/fa5ffl
What I want is to update 'birinci_lamba' to 1 when 1_y is clicked and update 'birinci_lamba' again to 0 when 1_k is clicked.
So, what should be my db.php page ? Or any other advise to do that ?

You use a from-tag, so you should use <input.. instead of <button... You seem to use bootstrap and <input class="btn btn-danger" /> should also work.
Then, you need to give your inputs a name attribute:
<form action="db.php" method="post">
<input type="submit" name="1_y" id="1_y" class="btn btn-success">1.Lambayı Yeşil Yak />
<input type="submit" name="1_k" id="1_k" class="btn btn-danger">1.Lambayı Kırmızı Yak /></form>
Your db.php file could look like that:
<?php
if(isset($_POST['1_k'])){
mysql_query("..."); //your update-query
} elseif(isset($_POST['1_y']){
mysql_query("..."); //your other update-query
}

better options for writing this jquery

I have a html file like the following one,
<i class=‘icon-calendar icon-large' data-placement='top' data-toggle='popover' type='button'>
<div class='head hide'>Calendar</div>
<div class='content hide'>
<form action="#" data-remote="true" id="calendar_form" method="post">
<div style="...">
<input type="hidden" />
<input type="hidden" />
</div>
<table border='0px'>
<tbody>
<tr>
<td colspan='2'>
<button class='btn btn-default btn-block' id='submit' type='submit'>Convert</button>
</td>
</tbody>
</table>
</form>
</div>
</i>
<li class="..." id="calendar_example"><label class=" label" for="...">...</label>
<input class="..." id="calendar_example_1" name="[calendar_example][0][calendar_example_1][0]" type="text" />
I'm trying to use Jquery to write the function as when click button where id is submit, i can pass value from the popover to the field with id calendar_example_1, my code, the working one to find the field, is
$(function(){
$('body').on('click','#submit', function(){
var calendar_name = $(this).parent().parent().parent().parent().parent().parent().siblings().find('#calendar_example_1').attr('name');
return false;
});
});
by using .parent() multiple times, i don't think this is a good way to write this code. As i'm new to jquery, i can't find any better solution yet that works the way i want. Anyone can give me some suggestion?
EDIT:
the outside form is nested.

you can just do this instead:
var calendar_name = $(this).closest("i.icon-calendar").siblings("li#calendar_example").find('#calendar_example_1').attr('name');

You can use
$('#submit').click(function(){
var calendar_name = $('#calendar_example_1').attr('name');
});

Change a button value via Jquery

Sorry but I'm quite a noob if it comes to Javascript with HTML.
I'm trying to make a button that will change the value of it when a multiple checkboxes are checked.
Example:
If one checkbox is checked = Button: Delete 1 row
If two checkboxes are checked = Button: Delete 2 rows
etc.
And I want this to happen automaticly when I check all checkboxes. The only problem is that it won't change anything.
JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('input[type="checkbox"]').click( function() {
$("input[type=submit]").val("Delete "+$('input:checkbox:checked').length+" rows");
});
</script>
HTML:
<input type="submit" name="submit" class="btn btn-success" value="Verwijder" />
The server-side of this(PHP) does work(deleting the rows).
Thank you for helping and your time!

First you must put your code inside this block:
$(document).ready(function(){
// your code
});
We use this because:
The document.ready handler is triggered when the DOM has been loaded
by the browser and ready to be manipulated.
Second:
<input type="submit" name="submit" class="btn js-button btn-success" value="Verwijder" />
$(".js-button").val("Value that you need");

Try this.
Fiddle Demo
HTML
<input type="submit" name="submit" class="btn btn-success" value="Verwijder" />
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
JS Code
$('input[type="checkbox"]').on('change', function(){
var rows = $('input[type="checkbox"]:checked').length,
value = rows < 1 ? 'Verwijder' : 'Delete '+rows+(rows<2 ? ' row':' rows');
$('.btn').attr('value', value);
});