We Keep Coding

How to get click of button to go to function in js code

I have a sale page, which runs sale.js whenever any input value is changed. sale.js does certain important calculations on a sale, inclduing total (final) amount, change, etc.
This form also has a button that is used to add a gift certificate. When the gift certificate is added, the button it changes from a + sign to a - sign, so that
it is then used to remove the gift certificate.
The following is a typical input field which, when changed, causes the code to run sale.js:
<td class="text-right cash-received-one" id="cash-received-two">Amount Tendered</td>
<td class="text-center cash-received-one">
<div class="floating input-group" >
<input onClick="this.setSelectionRange(0, this.value.length);" type="text" class="js-task-badge5 form-control form-control-lg is_numeric"
id="cash-received" name="cash-received">
</div>
</td>
</td>
The following is the definition of sale.js:
<!-- Page JS Code -->
<?php $cb->get_js('_es6/pages/sale.js'); ?>
In sale.js, the function that does the calculations is badgesUpdate(). This is only run when any of the fields (like above) are changed.
this is from a js file:
tasks.on('change', '.js-task-badge5', e => {
e.preventDefault();
this.badgesUpdate();
});
The following is the definition of the gift certificate field and the button:
<input type="text" class="form-control form-control-lg" style="float:left%" id="gift-certificate-code" name="gift-certificate-code" >
<span style="cursor: pointer;" class="input-group-append" onclick="redeemGift();">
<span class="input-group-text js-task-badge10">
<i class="fa fa-plus"></i>
</span>
</span>
In the redeemGift() function, the button is changed to a negative so that the gift certificate can be removed and other actions are taken.
I want to make sure that whenever the button is pressed, the code goes to sale.js and runs badgesUpdate().
I could take the code from BadgesUpdate() and put it into redeemGift() but that would be duplication of code and is best avoided.
Also note that when the gift certificate add or delete button is pressed, the following field is changed:
<input type="text" class="form-control form-control-lg js-task-badge4 is_numeric" id="amount-to-redeem"
onChange="getDiscount_redeem(this.value)" style="float:left; width:70%" onKeyUp="">
Changes to this field (made directly on the field) do lead to entry into sale.js and badgesUpdate(), but not if they're indirect changes. Could this field somehow be leveraged to achieve the goal?

You can try:
Instead of having two click handlers, have only one function with if else statement. Let the state of the BUTTON element determine which branch of the if-else statement gets executed:
function toggleError(button) { if ( button.className === 'visible' ) { // HIDE ERROR button.className = ''; } else { // SHOW ERROR button.className = 'visible'; } }

Change form input field value with jquery within a bootstrap modal

I have a form within a bootstrap modal. I would like the input fields to display the past values that the user entered the first time they filled out the form, which I am retrieving from a cloudant database. I would like these input fields to be editable so that the user can resubmit the form with any changes they may have. However, I am stuck when trying to display the past information in the input fields. I can't find any reason why these value of the input fields are not being changed.
The javascript that adds my buttons to my boostrap list-group:
var loadIotPanel = function(iotsJSON)
{
for(var iot in iotsJSON)
{
var button = $('<button/>').text(iotsJSON[iot].appID).addClass('list-group-item iot').attr({name:iotsJSON[iot].appID, "aria-label": "Quick View IoT", "data-toggle": "modal", "data-target": "#quick-view-iot-modal", type: "button"});
$('#iot-list').append(button);
}
};
The html where my button will be placed within my list-group:
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 col-sm-12 dash-col">
<button name="edit-iots" aria-label="Edit IoTs" data-toggle="modal" data-target="#edit-iots-modal" type="button" class="icon"><span class="glyphicon glyphicon-edit gray"></span></button>
<p class="fancy-font dash-item-title">Your IoTs</p>
<button name="add-iot" aria-label="Add IoT" data-toggle="modal" data-target="#connect-iot-modal" type="button" class="icon"><span class="glyphicon glyphicon-plus gray"></span></button>
<div class="list-group iot" id="iot-list"><!-- buttons will be placed here --></div>
</div>...
The modal that pops up when clicking a button:
<div class="modal fade" id="quick-view-iot-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="quick-view-iot-h4"></h4>
</div>
<div class="modal-body">
<form id="edit-iot-form" method="post">
IoT Name: <br>
<input type="text" name="iot-name" class="iot-value" required><br>
Organization ID: <br>
<input type="text" name="org-id" class="iot-value" readonly required><br>
Authentication Method: <br>
<input type="text" name="auth-method" class="iot-value" value="apikey" readonly><br>
API Key: <br>
<input type="text" name="api-key" class="iot-value" readonly required><br>
Authentication Token: <br>
<input type="text" name="auth-token" class="iot-value" readonly required><br>
</form>
<button name="more" type="button" class="fancy-font page-button">More</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
The javascript that adds the content to modal. It is within a main method that is called when document is ready:
$('.iot').click(
function()
{
var iotName = event.target.name;
getIots(loadIotQuickView, iotName);
$('h4#quick-view-iot-h4.modal-title').text(event.target.name);
});
The getIots() function: (it includes parameter variable=null because I also use it in another part of code where the varaible parameter is not used. This method sends an ajax post to a servlet, which then responds with an array of iot objects)
var getIots = function(callback, variable=null)
{
var iotsJSON = null;
$.post("DashboardServlet", {loadIotPanel: "true"}, function(response)
{
iotsJSON = response;
callback(response, variable);
});
The loadIotQuickView() function: (This is where I believe I am getting problems)
var loadIotQuickView = function(iotsJSON, iotName)
{
var currentIoT = null;
for(var iot in iotsJSON)
{
if(iotsJSON[iot].appID = iotName)
currentIoT = iotsJSON[iot];
}
if(currentIoT == null)
return;
$('.iot-value[name="iot-name"]').attr("value",currentIoT.appId);
};
I've tried numerous jquery selectors but none of the input field values within the form will change. I've stepped through the code and all of my variables have the correct values that its just the last line that's not executing how I want. I am unsure if there is an issue with my jquery selector or if it is something else. Thanks in advance!
UPDATE:
I've tried the following selectors:
$('.iot-value[name="iot-name"]')
$('input[name="iot-name"]')
$('.iot-value')
$('#connect-iot-modal').find('input[name="iot-name"]')
I've also tried adding an id of "edit-iot-name" to my input field:
$('#edit-iot-name')
$('#connect-iot-modal #edit-iot-name')
But none of these have worked, which leads me to believe that it must not be an issue with my selector.
UPDATE:
I've also tried using .val(currentIoT.appID) with all of the previous selectors. Still not working.

I'm not sure why, but adding the id of the modal that my form is in, which is #quick-view-iot-modal, to my selector worked. However for some reason it only works when I use .val() and not when I use .attr(). So the final result is:
$('#quick-view-iot-modal #edit-iot-name').val(currentIoT.appID);
I'm not sure why it is required to add the id of the modal, and I'm not sure why it doesn't work like this:
$('#quick-view-iot-modal #edit-iot-name').attr("value",currentIoT.appID);
But it works! If anyone knows why it only works with this combination, please let me know!

try:
$('.iot-value[name="iot-name"]').val(currentIoT.appId);
Your selector is pretty weird as well. why not just refer to the input by name?
$('input[name="iot-name"]').val(currentIoT.appId);

In your code here:
$('.iot-value[name="iot-name"]')
"iot-name" is a string literal, and it will not evaluate to the value of your iot-name variable.
I'm guessing that you are looking to use the variable's value in your selector, which would look like this:
$('.iot-value[name="' + iot-name + '"]')

I have been struggling with this problem for 3 hours. The realisation that you must reference the object through the modal div is the winner.
I was trying to do 2 things:
populate the href in an <a> button on my modal
set the value of another field using an onChange()
so I end up with:
$("#modal-form #linkbtn").attr("href", url);
$('#modal-form #inputfield").val(newVal);
Thanks so much for this hint.

LISTEN!
i've got a good solution for all of you guys!
$("#exampleModal").modal("show");
$(function () {
$("#exampleModal #ticket_id").val("your_value_variable");
});
try this way after you load your modal show it then use DOM ready event then set your value to it input text and amazingly it works! this is the easiest and simplest way from me

Unable to check a checkbox via javascript

I have a form on a page, with a checkbox input field. I also have a table on the page with a column that has true/false values. Each row in the table also has a checkbox with id="selectedReviewTypeYear". There is also a button with id="getDataToEdit".
When the getDataToEdit button is clicked, the javascript checks to see if any id="selectedReviewTypeYear" boxes are checked. If a box is checked, a div is opened up with form fields prepopulated based on the row selected. If no boxes are checked, the div remains hidden.
My problem is that the checkboxes aren't getting checked when the table data is "true." Here is the javascript:
$('#getDataToEdit').on('click', function (){
$('#reviewTypeTable').find('tr').each(function (){
var row = $(this);
if (row.find('input[id="selectedReviewTypeYearID"]').is(':checked')){
var idx = table.row(this).index();
var vReviewName = document.getElementById("editReviewTypeYear-name");
var vAllowMultiple = document.getElementById("allowMultiple");
var vAllowMultipleSpan = document.getElementById("allowMultipleSpan");
vReviewName.innerHTML = table.cell(idx, 2).data();
if (table.cell(idx, 3).data() == "true"){
$("#allowMultiple").prop("checked", true);
vAllowMultipleSpan.innerHTML = table.cell(idx, 3).data();
}
else {
$("#allowMultiple").prop("checked", false);
vAllowMultipleSpan.innerHTML = table.cell(idx, 3).data();
}
showHide.style.visibility = 'visible';
}
})
});
For testing purposes, I added a span element to the form called allowMultipleSpan. This was simply so I could see if the javascript is able to read the data in the table field, which it is. When I select a row, then click the button, the div opens up with the vReviewName.innerHTML populated correctly as well as the allowMultipleSpan populated correctly. However, the checkbox is not getting checked if the data is "true".
I am running JQuery 2.1.1. So far, I have tried using the following variations of the script, all with the same result:
From the JQuery (1.6+) spec:
$("#allowMultiple").prop("checked", true);
From the jQuery (1.5-) spec:
$("#allowMultiple").attr("checked", true);
From the Javascript spec:
document.getElementById("allowMultiple").checked = true;
Here is the HTML for my form:
<div class="widget-header"><h3>Edit: <span id="editReviewTypeYear-name" style="color: blue"></span></h3></div>
<div class="widget-content">
<form id="editReviewTypeYear-form" class="form-horizontal" url="submitReviewTypeYear.htm">
<div class="form-group">
<label class="col-sm-2 control-label">Allow Multiple: </label>
<div class="col-sm-10">
<input type="checkbox" id="allowMultiple" name="allowMultiple" />
<span id="allowMultipleSpan" style="color: blue"></span>
</div>
</div>
<div class="form-actions">
<button id="submitReviewTypeYear" type="submit">Save</button>
<button class="btn btn-small btn-warning reg-cancel" id="submitReviewTypeYear-cancel" type="button" name="Cancel" value="cancel">Cancel</button>
</div>
</form>
</div>

Have you tried if (table.cell(idx, 3).data() == true)?
You were always getting the false condition because you were comparing a boolean with "true" as a string.

Checkboxes not submitting after being changed with jquery

I have a form with a bunch of checkboxes and input fields. I'm using jquery(1.10.1) to manipulate a number of things about the form based on user input from another form on the page. This was all working a few weeks ago but suddenly I've found that none of the checkboxes are submitting after they are changed by jquery.
The checkboxes are of the form:
<input type="checkbox" id="prod_70" name="prod[70]" class="product style_1 color_1 lens_3 status_1 " value="1" checked />
My Jquery code looks the other form to decide which boxes the user is interested in and then creates a selector based on that and the classes assigned to the checkboxes checking the boxes requested by the user:
$(curSel).prop('checked',true);
I was using:
$(curSel).attr('checked','checked').prop('checked',true);
But simplified since that shouldn't be necessary. I also tried adding a .change() for good measure but that didn't solve the problem so I took it back out.
When I submit the form none of the checked checkboxes show up and $_POST['prod'] (PHP on the backend) isn't there. $_REQUEST['prod'] is also not there. The other fields on the form are submitting. And if I submit the form without letting jquery update anything then the checkboxes do submit and $_POST['prod'] is as expected.
I've used the console in chrome and firebug in firefox to inspect the checkboxes while interacting with the page and 'checked' is being added and removed and the checkboxes are displaying correctly even when they're not submitting.
I've checked the HTML on the page to make sure everything is valid and there aren't any missing close tags or nested tags and the only other JS on the page are for FB's like button and twitters follow button.
I'm at a loss as to what could be causing this and my searches aren't turning up anything similar anymore.
EDITING TO ADD MORE:
After more debugging it appears that the problem isn't with changing the checkboxes. It's happening when the <li> that the checkboxes are in is hidden with .hide() and then reshown with .show(). After doing that the checkboxes in the <li> are never submitting even though other form elements inside the <li> are. Here's a full <li>:
<li class="prod style_1 color_1 lens_7 status_1 bulk-list-item" id="prod_55">
<div class="bulk-prod-name">
<input type="checkbox" id="prod_55" name="prod[55]" class="product style_1 color_1 lens_7 status_1 " value="1" />
<label for="prod_55">
<span class="style-name">Player</span>
<span class="color-name">Matte Black</span> |
<span class="lens-name">Rose Hi-Def LTD 17/35</span>
<span class="part-number">PLMBHD03</span>
<div style="margin-top:10px;">
<span class="bulk-prod-status">Status: <b>In Stock</b></span>
</div>
</label>
</div>
<div class="bulk-prod-image">
<div style="position:absolute; top:0;"><img style="width:100%;" src="/art/products/11/1/frame/thumb/1.png"></div>
<div style="position:absolute; top:0;"><img style="width:100%;" src="/art/products/11/1/lens/thumb/7.png"></div>
<div style="clear:both;"></div>
</div>
<div class="bulk-prod-price">
MSRP: $ <input type="text" id="prod_msrp_55" name="prod_msrp[55]" class="msrp inputbox" value="179.00" prod_id="55">
<input type="hidden" id="prod_msrp_orig_55" class="orig_price" value="179.00" orig_id="prod_msrp_55">
Dealer Price: $ <input type="text" id="prod_dprice_55" name="prod_dprice[55]" class="dprice inputbox" value="90.00" prod_id="55">
<input type="hidden" id="prod_dprice_orig_55" class="orig_price" value="90.00" orig_id="prod_dprice_55">
</div>
<div class="bulk-prod-edit">
Edit this product.
<div style="display:none" id="files_55">
<table width=100%>
<tr>
<td width=50% valign=top><small>Fullsize:<br>
<span style="color:#009900"> /art/products/11/1/frame/full/1.png</span><br>
<span style="color:#009900"> /art/products/11/1/lens/full/7.png</span><br>
</small>
</td>
<td width=50% valign=top><small>Thumbnais:<br>
<span style="color:#009900"> /art/products/11/1/frame/thumb/1.png</span><br>
<span style="color:#009900"> /art/products/11/1/lens/thumb/7.png</span><br>
</small>
</td>
</tr>
</table>
</div>
</div>
</li>
And here's the full jQuery that's hiding/showing/checking/unchecking things:
$(document).on('change', '.prod_selector', function(e) {
// console.log('Selection changed:');
e.preventDefault();
$('.prod').hide();
$('.product').prop('checked', false);
var lens = $('#lens_selector').val();
var color = $('#color_selector').val();
var style = $('#style_selector').val();
var pstatus = $('#status_selector').val();
var curSel = '';
if (lens>0) {
curSel += '.lens_' + lens;
}
if (color>0) {
curSel += '.color_' + color;
}
if (style>0) {
curSel += '.style_' + style;
}
if (pstatus>0) {
curSel += '.status_' + pstatus;
}
if ((lens==0) && (color==0) && (style==0) && (pstatus==0)) {
curSel = '.prod';
$('.product').prop('checked',true);
}
// console.log('curSel: ' + curSel);
$(curSel).show()
$(curSel).prop('checked',true);
$('#prod_count').text($('.prod:visible').length);
});
After messing with things I've determined that if I don't .hide() anything then it all work as expected (other than not hiding things that need to be hidden) but if any <li>'s are hidden then even once their shown again checkboxes inside of them don't get included in the form submission even though other input fields do.

I see a semi-colon missing:
$(curSel).show()
$(curSel).prop('checked',true);
The missing semicolon can stop the second statement from setting any checkbox as checked.

Problem solved. Turns out I was asking the wrong question. After more testing I finally determined that it wasn't jquery causing the problem after all.
The problem was more items were added to the database that this page manages which added more fields to the form and we were hitting the max_input_vars limit in the php config. Which I realized could be causing the issue after finding this: Limit of POST arguments in html or php
I raised the max_input_vars for this site and now the form is working again.

jQuery .val('xxx') not setting value, but .attr('value', 'xxx') is?

I have a table which is populated with javascript, fetching data via ajax. I have a <tr> template which I clone and set the values within to the data retrieved via the ajax request. I'm using Twitter bootstrap's popovers, so that users can click on a cell, which pops the popover with an input/select etc prompting the user to change the cell value. The problem occurs when I am setting the value of those inputs. When I am building each row, I set the value of the input in the popover template with .val('xxx'), but when I log it/click the cell and view the popover, nothing is changed; conversely, if I set it with .attr('value', 'xxx'), it works just fine.. why would .val('xxx') not work?
Here's what the meat of it looks like..
Row template:
....
<td>
<div class="last-name popover-toggle">
<span class="vlabel">----</span>
<div class="popout">
<input type="text" name="last_name" value=""/>
<div class="popout-button-container">
<button type="button" class="btn btn-primary btn-small cancel-field">Cancel</button>
<button data-url="{{ url('edit_lead.json') }}" type="button" class="btn btn-primary btn-small save-field">Save</button>
</div>
</div>
</div>
</td>
....
Setting input value:
...
if (data['last_name']) {
$nRow.find('.last-name input[name=last_name]').val(data['last_name']);//.attr('value', data['last_name']);
$nRow.find('.last-name .vlabel').text(data['last_name']);
}
registerPopover($nRow.find('.last-name'), 'Last Name');
....
Register popover:
function registerPopover(el, title) {
var options = {
animation: false,
content: el.find('.popout').html(),
html: true,
trigger: 'manual'
};
if (typeof(title) != 'undefined') {
options['title'] = title;
}
el.popover(options);
}

Not sure what is your actual problem, question is not very obvious to me but there is a difference between attr and val. The attr method sets/change the attribute of an input/element in the source and you may see it using browser's inspection tool, on the other hand, val method sets/update the rendered property which is in the memory but it doesn't effect the original source/HTML in the browser's source code. For example, if you do something like this
HTML:
<input type = "text" name="txt" id = "txt" value = "Hello!" />
JS:
$('#txt').val('World!').clone().insertAfter($('#txt'));
And check the source code, then you'll see there is two input elements and both have value attribute Hello! but on the screen both have world!. Check this detailed answer.