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.

HTML Selectable table with edit/delete/view options

I have table, where you can select table rows, and it passes the information to modal window. But there is problem, I want the popup window to show error if there is no row selected
Button to edit row
<a class="icon icon-pencil js-popup js-tooltip" href="#edit" title="Edit selected row"></a>
JavaScript Code
$(document).on('click', '#table_contactgroups tbody tr', function(e) {
$(this).addClass('selected').siblings().removeClass('selected');
var name = $(this).find('td:first').html();
var id = $(this).attr('id');
$('#edit input[name="name"]').val(name)
$('#edit input[name="id"]').val(id)
$("#name").text(name);
$('#delete input[name="id"]').val(id)
});
Modal
<div id="edit">
<h2 class="text-center ls-large">Edit contact group</h2>
<form class="js-ajax-form" data-ajax-form="edit=a.logged-in;editFrom=
<?php echo URL_BASE; ?>template/header.php"
name="contacts-form" method="post"
action="<?php echo URL_BASE; ?>contactgroups/contactgroup_manager.php?a=edit">
<fieldset>
<!-- <input type="text" name="name" placeholder="Name">-->
<div class="input-wrap">
<input type="text" name="name" maxlength="45" value="" placeholder="Name">
</div>
<input type="hidden" name="id" value="">
</fieldset>
<div class="controls multiple">
<button class="btn btn-default btn-small" type="submit" name="Edit" value="Edit">Submit</button>
<a class="btn btn-unimportant btn-small js-popup-close" href="#">Cancel</a>
</div>
</form>
</div>

There are two ways you could go with this.
Disable the edit button when no rows are selected.
Display an error when the edit button is pressed with no rows selected.
Arguably the first one is more user-friendly since it stops them making an unnecessary click.
In either case, you need to ensure a row is selected. So if you disable your edit button at page load like this using the disabled attribute:
<button type="button" id="EditButton" disabled>Edit</button>
Then in your existing function which runs when the user clicks on a row, you can enable it, since you now have a selected row:
$(document).on('click', '#table_contactgroups tbody tr', function(e) {
//...
$("#EditButton").prop('disabled', false);
});
That way, if there are no rows, the button never gets enabled.
N.B. I notice your Edit "button" is actually a hyperlink. If you want to continue using that, this answer may be helpful in determining how to enable/disable it : Disable link using css. Otherwise you might be better to replace it with a button, or hide it instead. It's more difficult to make hyperlinks unclickable.
If you want to go down route 2, and display an error message when no row is selected, you'll have to handle the click event of the hyperlink. First, give it an id.
<a id="EditLink" class="icon icon-pencil js-popup js-tooltip" href="#edit" title="Edit selected row"></a>
Then handle the click, and check for selected rows. Since you're using the ".selected" class to denote a selected row, this is fairly easy to test for.
$("#EditLink").click(function(event) {
if ($(".selected").length == 0)
{
event.preventDefault(); //stops the normal click behaviour from occurring
alert("Please select a row to edit");
}
});

How to reset form fields the elegant way with javascript or jquery?

How do I reset the form fields more elegant compared to the code below? The code is working. But if I have lots of form fields it does not look so nice. Is there a more compact way?
<script>
function setSearchCriteria(){
var searchcriteria = document.getElementById("TherapistSearch-SearchCriteria");
searchcriteria.value = "";
}
function setCity(){
var city = document.getElementById("TherapistSearch-City");
city.value = "";
}
function setLastName(){
var lastname = document.getElementById("TherapistSearch-LastName");
lastname.value = "";
}
function setFirstName(){
var firstname = document.getElementById("TherapistSearch-FirstName");
firstname.value = "";
}
}
</script>
<input type="button" class="btn btn-default" value="Reset form"
onclick="javascript:clearForms();javascript:setSearchCriteria();setCity();setLastName();setFirstName();" title="Reset form"/>

Give a css class to your input fields.
<input type="text" id="firstName" class="resettable" />
<input type="text" id="firstName" class="resettable" />
<select id="states" class="selectResettable">
<option value="0">Select an option </option>
<option value="1">Michigan</option>
<option value="2">Ohio</option>
<select>
<input type="button" id="resetBtn" />
And use this css class(es) as jQuery selector(s) to get all of this inputs and set the value to empty/default value. I also removed the onclick from button HTML markup as we are going to do it in the unobtrusive javascript way.
Add this javascript where we are registering the code for the click event on our button.
$(function(){
$("#resetBtn").click(function(e){
alert("Reset button clicked");
//Set the input text fields to empty string
$("input.resettable").val("");
//Reset the dropdowns.
$(".selectResettable").val("0")
//If you want to do something else, Do it here.
});
});

Simply use HTML the way it's meant to be used, and take advantage of the reset button:
<input type="reset" class="btn btn-default" value="Reset form" title="Reset form"/>
This requires no JavaScript, no additional functionality, and is a native component of HTML forms. Using type="button" gives the element the appearance of a button, but strips the default functionality; using type="reset" gives the appearance of a button and gives the default functionality of resetting the parent <form> element to its default page-load state.
References:
<input> element type attribute-values.

<input type="reset" id="resetBtn" class="resettable" />
use reset type of button or call reset method on form as below
<input type="button"
class="btn btn-default"
value="Reset form"
onclick="document.getElementById('myForm').reset();"
title="Reset form"/>

How can I make it necessary for the user to click a button for the form to be validated?

I have a group of buttons, and ONE of them needs to be clicked in order to proceed to the next form:
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" data-bind="click: sportYes">Yes</button>
<button type="button" class="btn" data-bind="click: sportBasic">Basic</button>
<button type="button" class="btn" data-bind="click: sportNo">No</button>
</div>
I am using jquery validate, and I want to write a validate method but I can't use my typical approach, such as giving a text field a value of required, e.g.
$("#FormThatNeedsToBeValidated").validate({
rules: {
textinput1: {
required: true
},
textinput2: {
required: true
}}});
Even if I knew the syntax, I don't think this would help, since not ALL buttons are required.
Is there a way to leverage the active attribute that's rendered when one of my three buttons is clicked?

A <button> is not eligible for validation using this plugin.
This plugin will only work on the following eight kinds of data input elements (each must have a unique name attribute), which also must be contained within a form element:
<form>
<!-- Textbox Input - Also including the various HTML5 input types -->
<input type="text" name="something" />
<!-- Password Input -->
<input type="password" name="pw" />
<!-- Radio Button -->
<input type="radio" name="foo" />
<!-- Checkbox -->
<input type="checkbox" name="bar" />
<!-- File Upload -->
<input type="file" name="upload" />
<!-- Hidden Input - 'ignore: []' must be defined in the options -->
<input type="hidden" name="hide" />
<!-- Select Dropdown -->
<select name="foobar"> ... </select>
<!-- Text Area Box -->
<textarea name="barfoo"></textarea>
</form>
Also see the "reference" page in the docs: http://jqueryvalidation.org/reference/
To achieve the desired effect, you can test & submit the form upon clicking a particular button. Use the .valid() method to test/check and submit() to submit the form.
HTML:
<button type="button" class="btn" id="sportYes">Yes</button>
<button type="button" class="btn" id="sportBasic">Basic</button>
<button type="button" class="btn" id="sportNo">No</button>
jQuery:
$(document).ready(function() {
$("#FormThatNeedsToBeValidated").validate({ // <- initialize plugin on form
// rules & options
});
$('#sportYes').on('click', function() {
// stuff to do when this button is clicked
if ($("#FormThatNeedsToBeValidated").valid()) { // <- test validity
// stuff to do on valid form
$("#FormThatNeedsToBeValidated").submit(); // <- submit the valid form
}
});
$('#sportBasic').on('click', function() {
// stuff to do when this button is clicked
});
$('#sportNo').on('click', function() {
// stuff to do when this button is clicked
});
});
DEMO: http://jsfiddle.net/PgCr2/

How to submit selected checkbox items?

I have a list of items that need to be selected and take an action based on user's request.
User selects the items and click on one of the btns to do something on the items.
My code is as following but I am not sure how to complete it. I believe, need to put them in a form to be submitted or pass the but not sure how to have a form with two submit btns, (if I need to have ).
<body>
<p><b>Shopping cart</b></p>
<table>
<tbody>
<c:forEach items="${mycart.items}" var="item">
<tr>
<td>
<input type="checkbox" name="Items"
value="${item.ID}"/>
</td>
<td>
Name : ${item.name}
</td>
</tr>
</c:forEach>
</tbody>
</table>
checkout
Delete

you can easily have two <input type="submit" name="something" /> in one <form>
if you want to differentiate the actions, just use different name for each submit button
EDIT:
<form ...>
...
...
<input id="b1" type="submit" name="edit" value="Edit"/>
<input id="b2" type="submit" name="delete" value="Delete"/>
</form>
If the form above is submitted by clicking #b1, then your request will contain a parameter named "edit". If the submit is triggered by #b2, then it will contain "delete".

I think following script might let you obtain what items are checked.
With jQuery, you need implement your checkout() like this
function checkout() {
$('input[name="Items"]:checkbox').each(function() {
if ($(this).attr("checked")) {
alert($(this).val() + 'is checked');
} else {
alert($(this).val() + 'is not checked');
}
}
);
}