Below is my HTML code to handle, on click of id, it has to call javascript function viewLineActionURL and then to controller. Both of the alerts are coming, but still it is not calling the controller modifyLine method.
<script>
var viewLineActionURL;
$(document).ready(function() {
viewLineActionURL = function(obj) {
alert('view*' + obj + '*');
$("#formname").attr("action",obj); // To Controller
alert('false..');
};
});
</script>
<table class="tg" id="pResultsjoin">
<thead align="left">
<tr>
<th class="tg"><input type="checkbox" id="all" disabled="disabled" onclick="toggle(this);" /></th>
<th class="tg">Person Id#</th>
<th class="tg">Age</th>
</tr>
</thead>
<tbody align="left">
<tr th:each="map : ${list}">
<td class="tg bg"><input type="checkbox" class="checkboxclass" name="check" th:value="${map['PID']}" /></td>
<td class="tg bg em" th:id="${map['PID']}" th:name="${map['PID']}" th:text="${map['PID']}" th:onclick="'javascript:viewLineActionURL(\'' + #{/LineController/modifyLine} + '\')'" ></td>
<td class="tg bg" th:text="${map['AGE']}"></td>
</tr>
</tbody>
</table>
But I have this below similar code working:
Button:
<input type="submit" value="Modify" class="btn btn-primary" id="modifyLine" th:onclick="'javascript:modifyLineActionURL(\'' + #{/LineController/modifyLine} + '\')'" />
Javascript:
modifyLineActionURL = function(obj) {
if ($('.checkboxclass:checked').length == 1) {
$("#formname").attr("action",obj);
} else if ($('.checkboxclass:checked').length > 1) {
alert('Please select only one quotation line');
} else {
alert('Please select a quotation line');
}
};
Can anyone help on this issue
Related
Now im doing some Calculate Checkbox Value Using JQuery and PHP code. The mechanism is, when User checked the checkbox, it will sum the price. I implemented a formula for JQuery but the result it not correct. here is my code
JQUERY
<script>
$(function() {
$('.dealprice').on('input', function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
</script>
for more detail. i made a sample on this site https://repl.it/#ferdinandgush/Sum-Calculate-checkbox just click "run" button and you can able to test it. i need to display correct calculate following that table format
Please help.
You just have to define getItemPrice inside the loop, otherwise you are calculating it only once for the item that was clicked, instead of doing it for every item.
$(function() {
$('.dealprice').on('input', function(){
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][0]"></td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][1]"></td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][2]"></td>
</tr>
<tr>
<td class="tg-amwm" colspan="2">Total</td>
<td class="tg-0lax"><span id="totalDeal">0</span></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You have to put the getItemPrice inside of the function of where you get its checked. Please check the following code:
$(function() {
$('.dealprice').on('input', function(){
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
Also check this repl https://repl.it/repls/LavenderAgonizingRoot
When I click on my button "Select" it should show me the HTML popup, and for some reason is not happening.
Could it be some id problem or hard code?
The main idea is to click and bring some kind of list reading from a random array list.
Below: my .js with the call back id and display.
Any ideas?
<!-- This hosts all HTML templates that will be used inside the JavaScript code -->
<table class ="cls-{id} active-{active}" style="display: none;" width="100%" id="rowTemplate">
<tr class ="bb cls-{id} active-{active}">
<td class="active-{active}" id="{id}-question" width="70%">{question}</td>
<td class="cls-{id} active-{active}" width="30%">
<button class="buttons" step="0.01" data-clear-btn="false" style="background: #006b54; color:white !important ;" id="{id}-inspectionResult"></button>
</td>
</tr>
</table>
<div id="projectPopUp" class="popup-window" style="display:none">
<div class="popuptitle" id="details-name"></div>
<table width="100%" id="detailsgrid">
<tr>
<td style="text-align:left">Start Time</td>
<td> <select id="details-startTime" data-role="none"></select></td>
</tr>
<tr>
<td style="text-align:left">End Time</td>
<td> <select id="details-endTime" data-role="none"></select></td>
</tr>
</table>
<div>
<button class="smallButton" onClick="closeProjectPopup()">Cancel</button>
<button class="smallButton" onClick="submitProjectPopup()">Submit</button>
</div>
</div>
<table style="display: none;" id="sectionRowTemplate">
<tr width="100%" class="bb cls-{id}-row2 sectionheader">
<td class="cls-{id}" colspan="3">{question}</td>
</tr>
</table>
Javascript code:
var buildQuestionnaire = function(){
parseInitialDataHolder();
for (var i = 0; i < ARRAY_OF_QUESTIONS.length; i++){
var id = i;
var data = {
id: id,
question: ARRAY_OF_QUESTIONS[i].question,
inspectionResult: '',
active: true
};
var initialdata = initialdataholder[id];
if(initialdata) {
data = initialdata;
}
dataholder.push(data);
if (typeof ARRAY_OF_QUESTIONS[i].header == 'undefined') {
$('#questionsTable tbody').append(Utils.processTemplate("#rowTemplate tbody", data));
$("#" + id + "-inspectionResult").text(data.inspectionResult || 'Select');
$("#" + id + "-inspectionResult").click(resultHandler.bind(data));
updateActiveStatus(data);
commentvisibilitymanager(data);
}
else {
$('#questionsTable tbody').append(Utils.processTemplate("#sectionRowTemplate tbody", data));
}
}
}
//to show the popup
$('#projectPopUp').show();
//to close the popup
$('#projectPopUp').hide();
$(document).ready(function() {
buildQuestionnaire();
});
i want to verify my form value on submit, but it move directly to the action without executing the function onsubmit, can anyone please help me.
here is my html page:
...
<script src="{% static 'js/formulaire.js' %}" type="text/javascript"></script>
<script type="text/javascript">
function isValide(){
var resultat = true
if (!isAlpha(document.getElementById('titre').value) || document.getElementById('titre').value == "" {
resultat = false:
document.getElementById('titre').className="inp-form-error";
document.getElementById('err1').style.display="block";
document.getElementById('err2').style.display="block";
}
else {
document.getElementById('titre').className="inp-form";
document.getElementById('err1').style.display="none";
document.getElementById('err2').style.display="none";
}
if (!isFloat(document.getElementById('seuil').value) || document.getElementById('seuil').value == "" {
resultat = false:
document.getElementById('seuil').className="inp-form-error";
document.getElementById('err3').style.display="block";
document.getElementById('err4').style.display="block";
}
else {
document.getElementById('seuil').className="inp-form";
document.getElementById('err3').style.display="none";
document.getElementById('err4').style.display="none";
}
return resultat;
}
</script>
...
<form id="notif-form" name="form1" action="{% url 'mgmt_notif:verif_notif' %}" method="POST" onsubmit="return isValide();">
{% csrf_token %}
<table border="0" cellpadding="0" cellspacing="0" id="id-form" >
<tr>
<th valign="top">Titre :</th>
<td><input type="text" name="nom_notif" id="titre" class="inp-form" /></td>
<td>
<div id="err1" class="error-left"></div>
<div id="err2" class="error-inner">Verifier ce champs.</div>
</td>
</tr>
<tr>
<th valign="top">Seuil :</th>
<td><input type="text" name="rate" id="seuil" class="inp-form" /></td>
<td>
<div id="err3" class="error-left"></div>
<div id="err4" class="error-inner">Verifier ce champs</div>
</td>
</tr>
<tr>
<th valign="top">Description :</th>
<td colspan=2><textarea name="desc_notif" class="form-textarea"></textarea></td>
</tr>
<th> </th>
<td valign="top">
<input type="submit" value="Enregistrer" class="form-submit" />
<input type="reset" value="Annuler" class="form-reset" />
</td>
<td></td>
</tr>
</table>
</form>
and the formulaire.js file:
function isTel(valeurChamp){
var pattern = /^0[\d]{9}$/;
return pattern.test(valeurChamp);
}
function isAlpha(valeurChamp){
var pattern = /^[a-zéç| èùâëïöüâêûî\-\s]+$/i;
return pattern.test(valeurChamp);
}
function isMail(valeurChamp){
var pattern = /^[-+.\w]{1,64}#[-.\w]{1,64}\.[-.\w]{2,6}$/;
return pattern.test(valeurChamp);
}
function isFloat(valeurChamp){
var pattern = /^{0,1}d*.{0,1}d+$/;
return pattern.test(valeurChamp);
}
function isPassword(p1,p2) {
if (p1.value == '' || p2.value == '') {
return false;
}
else if (p1.value != p2.value) {
return false;
}
else if (p1.value != p2.value) {
return true;
}
else {
return false;
}
}
and thank
I'm cloning a row and I want to check in the database if the code exists. This all works fine on the first row but not on the cloned rows. I have an idea that I have to make the id of the field unique, I have tried to add the the code that checks if the code exist to the add button event but it doesn't work. Can someone please tell me how to merge the two script so it works on the cloned rows.
Code:
HTML
<table>
<tr id="show_codes">
<td colspan="2" class="text-fields" align="center" valign="middle">
<div class="codeForm">
<table class="codeForm" align="left" width="500px" cellpadding="0" style="padding-left: 20px;" cellspacing="0">
<tr>
<td height="15px">Codes that exist is 0011, 1234</td>
</tr>
<tr class="code_row">
<td class="details-border1" height="40px" valign="middle" bgcolor="#f3f3f3" align="center">
<input id="code" value="" class="text ui-widget-content ui-corner-all" type="text" name="code[]" />
<div id="status"></div>
</td>
<td class="details-border2" bgcolor="#f3f3f3" align="center">
<input value="" class="text ui-widget-content ui-corner-all" type="text" name="value[]" />
</td>
<td class="borders-right-bottom" bgcolor="#f3f3f3" align="center">
<input type="button" class="btnDeleteCode" value="Delete" />
</td>
</tr>
</table>
</div>
<table width="500px" align="left">
<tr>
<td align="right"><span style="cursor: pointer; color: #007FC6; font-weight: bold;" id="btnAddCode" value="add more">Add another code</span>
</td>
</tr>
</table>
</td>
</tr>
JQUERY
var dom = {};
dom.query = jQuery.noConflict(true);
dom.query(document).ready(function () {
var clonedRow = dom.query('.code_row').clone().html();
var appendRow = '<tr class = "code_row">' + clonedRow + '</tr>';
var counter = 0;
dom.query('#btnAddCode').click(function () {
dom.query('.codeForm tr:last').after(appendRow);
counter++;
$('.codeForm tr:last input[type="text"]').attr('id', 'code[' + counter + ']');
$('.codeForm tr:last').find('input').val('');
});
dom.query('.btnDeleteCode').live('click', function () {
var rowLength = dom.query('.code_row').length;
if (rowLength > 1) {
deleteRow(this);
} else {
dom.query('.codeForm tr:last').after(appendRow);
deleteRow(this);
}
});
function deleteRow(currentNode) {
dom.query(currentNode).parent().parent().remove();
}
});
pic1 = new Image(16, 16);
pic1.src = "loader.gif";
pic2 = new Image(16, 16);
pic2.src = "tick.gif";
dom.query(document).ready(function () {
dom.query("#code").change(function () {
var usr = dom.query("#code").val();
if (usr.length >= 4) {
dom.query("#status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
alert(usr);
dom.query.ajax({
type: "POST",
url: "setup_practice_preference_check_code.php",
data: "username=" + usr,
success: function (msg) {
dom.query("#status").ajaxComplete(function (event, request, settings) {
if (msg == 'OK') {
dom.query("#code").removeClass('object_error'); // if necessary
dom.query("#code").addClass("object_ok");
dom.query(this).html(' <img src="tick.gif" align="absmiddle">');
} else {
alert('msg');
dom.query("#code").removeClass('object_ok'); // if necessary
dom.query("#code").addClass("object_error");
dom.query(this).html(msg);
}
});
}
});
} else {
dom.query("#status").html('<font color="red">The username should have at least <strong>4</strong> characters.</font>');
dom.query("#code").removeClass('object_ok'); // if necessary
dom.query("#code").addClass("object_error");
}
});
});
Fiddle
Thanks
Ok, I am running a javascript that is testing a bunch of to see if they are changed, and if they are changed, I need to see if a check box is checked. I am not using a form to do this, however, for certain reasons. Here is the code for the display of the table:
<table class="db-view-sku-table">
<thead>
<tr>
<th>Merge <br />Callouts</th>
<th>Current Page</th>
<th>Current Callout</th>
<th>New Page</th>
<th>New Callout</th>
<th>MFG SKU</th>
<th>Client SKU</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr class="odd changed_value">
<td class="hidden db-sku-nid">192297</td>
<td class="hidden db-co-nid">212300</td>
<td class="merge"><input type="checkbox" name = "mergeme" class="checked" /></td>
<td class="db-current-page">6</td>
<td class="db-current-co">A</td>
<td class="db-move-page"><input type="text" class="page-select" size="4" value="" /></td>
<td class="db-move-co"><input type="text" class="co-select" size="4" value="A" /></td>
<td class="db-sku">AAG794200</td>
<td class="db-client-sku editable-text">AAG-794200</td>
<td class="db-description">AT-A-GLANCE Sorbet Wkl/Mthly Plnr</td>
</tr>
<tr class="even changed_value">
<td class="hidden db-sku-nid">97160</td>
<td class="hidden db-co-nid">212301</td>
<td class="merge"><input type="checkbox" name = "mergeme" class="checked" /></td>
<td class="db-current-page">6</td>
<td class="db-current-co">A</td>
<td class="db-move-page"><input type="text" class="page-select" size="4" value="" /></td>
<td class="db-move-co"><input type="text" class="co-select" size="4" value="A" /></td>
<td class="db-sku">AAG76PN0105</td>
<td class="db-client-sku editable-text">AAG-76PN0105</td>
<td class="db-description">QUICKNOTES WKLY/MNTH, SPECIAL EDITION</td>
Code when save button is pushed:
function setupMassSave() {
$('.save-button').click(function() {
var merge = getMergeList();
var skus = getSkuList();
var pages = getPageList();
var callouts = getCalloutList();
var currco = getCurrCalloutList();
$.ajax({
url: '/skumove/save_all/' + merge + '/' + skus + '/' + pages + '/' + callouts + '/' + currco,
cache: false,
success: refreshView
});
});
}
function getSkuList() {
var slist = [];
$('.changed_value').each(function(index) {
if(!$(this).children('.merge').children('.checked').checked){
slist.push($(this).children('.db-sku-nid').text());
}
});
return slist;
}
function getMergeList() {
var mlist = [];
$('.changed_value').each(function(index) {
if($(this).children('.merge').children('.checked').checked) {
mlist.push($(this).children('.db-sku-nid').text());
}
});
return mlist;
}
The only ones I'm having a problem with are those two functions. They other 3 functions work fine and return the values I need. I know the problem is somewhere within the ('.merge').clicked area.
Thanks for your help.
.checked is a (Boolean) vanilla JavaScript property, which you're trying to apply to a jQuery object. That's why it's not working.
Replace
$(this).children('.merge').children('.checked').checked
with either
$(this).children('.merge').children('.checked')[0].checked
or
$(this).children('.merge').children('.checked').is(':checked')
or
$(this).children('.merge').children('.checked:checked').length
use the pseudo selector :checked instead of the class selector .checked
if($(this).children('.merge').children(':checked').length) {
mlist.push($(this).children('.db-sku-nid').text());
}