I'm attempting to grab the characters after an index to use in selecting another input with the same last character(s). Currently I have the following error message : thisObj1.indexOf is not a function for thisObj and thisObj1.
I've tried to use a for loop and i with selector, however that resulted in all elements similar being affected.
<input type="text" value="5" id="nosday"><br><br>
<input type="hidden" value="3" id="countrows"><br>
////////////////////////FIRST FORM/////////////////////////////
<br>
<form id="formaddi1" class="formadd1">
<label for="standardi1">Standard</label>
<input type="radio" name="packn1" id ="standardi1" class="pack1 standardc1 qr1" value="1050" checked><br><br>
<label for="equippedi1">Equipped</label>
<input type="radio" name="packn1" id ="equippedi1" class="pack1 equippedc1 qr1" value="0" ><br><br>
<label for="gpsi1">GPS</label>
<input type="checkbox" name="gpsn1" id ="gpsi1" value="20" class ="gpsc1 qr1"><br><br>
<label for="boosteri1">booster</label>
<input type="checkbox" name="boostern1" id ="boosteri1" value="20" class =" boosterc1 qr1"><br><br>
<label for="onetenti1">One tent</label>
<input type="radio" name="tentn1" id ="onetenti1" class="stent1 onetentc1 qr1" value="1350" disabled><br><br>
<label for="twotenti1">Two tents :</label>
<input type="radio" name="tentn1" id ="twotenti1" class="stent1 twotentc1 qr1" value="1450" disabled><br><br>
Daily :<span id="dailytotali1"> </span><br><br>
Total :<span id="lengthtotali1"> </span>
<br><br>
<br><input tyep="text" id="dailytoti1" name="pricefn11" value="">
<br><input tyep="text" id="lengthtoti1" name="pricefn21" value="">
<br><br><br>
</form>
////////////////////////SECOND FORM/////////////////////////////
<BR>
<form id="formaddi2" class="formadd2">
<label for="standardi2">Standard</label>
<input type="radio" name="packn2" id ="standardi2" class="quip2 standardc2 qr2" value="125" checked><br><br>
<label for="equippedi2">Equipped</label>
<input type="radio" name="packn2" id ="equippedi2" class="quip2 equippedc2 qr2" value="0" ><br><br>
<label for="gpsi2">GPS</label>
<input type="checkbox" name="gpsn2" id ="gpsi2" value="20" class ="gpsc2 qr2"><br><br>
<label for="boosteri2">booster</label>
<input type="checkbox" name="boostern2" id ="boosteri2" value="20" class ="boosterc2 qr2"><br><br>
<label for="onetenti2">One tent</label>
<input type="radio" name="tentn2" id ="onetenti2" class="stent2 onetentc2 qr2" value="1350" disabled><br><br>
<label for="twotenti2">Two tents :</label>
<input type="radio" name="tentn2" id ="twotenti2" class="stent2 twotentc2 qr2" value="1450" disabled><br><br>
Daily :<span id="dailytotali2"> </span><br><br>
Total :<span id="lengthtotali2"> </span><br><br>
<br><input tyep="text" id="dailytoti2" name="pricefn12" value="">
<br><input tyep="text" id="lengthtoti2" name="pricefn22" value="">
<br><br><br>
</form>
////////////////////////THIRD FORM/////////////////////////////
<form id="formaddi3" class="formadd3">
<br>
<label for="standardi3">Standard</label>
<input type="radio" name="packn3" id ="standardi3" class="quip3 standardc3 qr3" value="1050" checked><br><br>
<label for="equippedi3">Equipped</label>
<input type="radio" name="packn3" id ="equippedi3" class="quip3 equippedc3 qr3" value="0" ><br><br>
<label for="gpsi3">GPS</label>
<input type="checkbox" name="gpsn3" id ="gpsi3" value="20" class ="gpsc3 qr3"><br><br>
<label for="boosteri3">booster</label>
<input type="checkbox" name="boostern3" id ="boosteri3" value="20" class ="boosterc3 qr3"><br><br>
<label for="onetenti3">One tent</label>
<input type="radio" name="tentn3" id ="onetenti3" class="stent3 onetentc3 qr3" value="1350" disabled><br><br>
<label for="twotenti3">Two tents :</label>
<input type="radio" name="tentn3" id ="twotenti3" class="stent3 twotentc3 qr3" value="1450" disabled><br><br>
Daily :<span id="dailytotali3"> </span><br><br>
Total :<span id="lengthtotali3"> </span><br><br>
<br><input tyep="text" id="dailytoti3" name="pricefn13" value="">
<br><input tyep="text" id="lengthtoti3" name="pricefn23" value="">
</form>
function Calc() {
//get the values of the selected options
var counter = $("#countrows").val();
let totals = [];
for (i = 1; i <= counter; i++) {
totals[i] = 0;
$.each($('.qr' + i + ':checked'), function() {
totals[i] += parseInt($(this).val());
});
console.log(totals[i]);
$('#dailytotali' + i).text('R' + totals[i] + '/day');
$('#lengthtotali' + i).text('R' + totals[i] * parseFloat($("#nosday").val()) + '/day');
$('#dailytoti' + i).val(totals[i]);
$('#lengthtoti' + i).val(totals[i] * parseFloat($("#nosday").val()));
}
}
Calc();
$("[class*=qr]").on("change", function(e) {
e.preventDefault();
Calc();
});
function Equip(thisOb1)
{
var lastChar = thisOb1.substr(thisOb1.indexOf("c") + 1);
$('input.onetentc'+ lastChar).prop("disabled", false);
$('input.twotentc'+ lastChar).prop("disabled", false);
$('input.onetentc'+ lastChar).prop("checked", true);
$('input.standardc'+ lastChar).prop("checked", false);
}
function Standard(thisOb)
{
var lastChar1 = thisOb.substr(thisOb.indexOf("i") + 1)
$('input.onetentc'+ lastChar1).prop("checked", false);
$('input.twotentc'+ lastChar1).prop("checked", false);
$('input.onetentc'+ lastChar1).prop("disabled", true);
$('input.twotentc'+ lastChar1).prop("disabled", true);
}
$("[id*=standardi]").click(function() {
var thisid = $(this).attr('id');
Standard(thisid);
});
$("[id*=equippedi]").click(function() {
var thisid1 = $(this).attr('id');
Equip(thisid1);
});
Example CLICK --> Standard, Disable & uncheck --> onetent & twotent.
I have an example here : https://jsfiddle.net/shiataz12/oj51vfpm/166/
I'm attempting to transfer the class or id name to the function and then select the characters after an index to use to select another input in the same form. Any advice or suggestions welcome.
After a few more hours of research I came up with a solution to my problem by pulling info from over 20 different stack overflow questions in order to come up with an easy solution. If any of my information is incorrect I apologize, please feel free to comment on what I've gotten wrong. If you have any other suggestions, I welcome them.
Passed $(this); from click function to function Standard () and function Equip(). created var for $(this) to use in variable assignment of lastChar which provides the character after an Index. String() is used to convert the object $(this) to a string and assigned to a new variable thisstr. lastChar variable assigned to the character after an index through the use of lastIndexOf which finds the last index matching index in a string and provides any characters after it.
var lastChar = thisstr1.substr(thisstr1.lastIndexOf('i') + 1);
Is used to find characters after ('i') where i is the last character in the string.
var thisstr = String(that);
Is the line that converts var that = $(this).attr('id'); from an object to a string as `$(this) is used to reference a DOM element and not a specific string in the following example :
$("#id").click(functon()
{
var vas = $(this).val();
var do = (".class").text(vas);
});
$(this) is the DOM element, i.e. an input, div, span etc in it's entirety.
val() is the definition to find the value of that element.
This is handy in using short hand coding and making easy reference to the element in question and can be used in loops, functions, from one function to the next. etc.
To avoid checking or unchecking; checkboxes I decided to go for radio buttons disguised as checkboxes, only because I required them for aesthetics. console.log(); is not really required for me but I left it in there to check all is working well.
function Calc() {
//get the values of the selected options
var counter = $("#countrows").val();
let totals = [];
for (i = 1; i <= counter; i++) {
totals[i] = 0;
$.each($('.qr' + i + ':checked'), function() {
totals[i] += parseInt($(this).val());
});
console.log(totals[i]);
$('#dailytotali' + i).text('R' + totals[i] + '/day');
$('#lengthtotali' + i).text('R' + totals[i] * parseFloat($("#nosday").val()) + '/day');
$('#dailytoti' + i).val(totals[i]);
$('#lengthtoti' + i).val(totals[i] * parseFloat($("#nosday").val()));
}
}
Calc();
$("[class*=qr]").on("change", function(e) {
e.preventDefault();
Calc();
});
function Equip(thisid) {
var that = $(thisid).attr('id');
var thisstr1 = String(that);
var lastChar = thisstr1.substr(thisstr1.lastIndexOf('i') + 1);
console.log(that);
console.log(thisstr1);
console.log(lastChar);
$('input.onetentc' + lastChar).prop("disabled", false);
$('input.twotentc' + lastChar).prop("disabled", false);
$('input.onetentc' + lastChar).prop("checked", true);
$('input.standardc' + lastChar).prop("checked", false);
}
function Standard(thisid) {
var that1 = $(thisid).attr('id');
var thisstr = String(that1);
var lastChar1 = thisstr.substr(thisstr.indexOf('i') + 1)
console.log(that1);
console.log(thisstr);
console.log(lastChar1);
$('input.onetentc' + lastChar1).prop("checked", false);
$('input.twotentc' + lastChar1).prop("checked", false);
$('input.onetentc' + lastChar1).prop("disabled", true);
$('input.twotentc' + lastChar1).prop("disabled", true);
}
$("[id*=standardi]").click(function() {
Standard($(this));
});
$("[id*=equippedi]").click(function() {
Equip($(this));
});
input[type="radio"] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
-ms-appearance: checkbox;
/* not currently supported */
-o-appearance: checkbox;
/* not currently supported */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="5" id="nosday"><br><br>
<input type="hidden" value="3" id="countrows"><br> ////////////////////////FIRST FORM/////////////////////////////
<br>
<form id="formaddi1" class="formadd1">
<label for="standardi1">Standard</label>
<input type="radio" name="packn1" id="standardi1" class="pack1 standardc1 qr1" value="1050" checked><br><br>
<label for="equippedi1">Equipped</label>
<input type="radio" name="packn1" id="equippedi1" class="pack1 equippedc1 qr1" value="0"><br><br>
<label for="gpsi1">GPS</label>
<input type="checkbox" name="gpsn1" id="gpsi1" value="20" class="gpsc1 qr1"><br><br>
<label for="boosteri1">booster</label>
<input type="checkbox" name="boostern1" id="boosteri1" value="20" class=" boosterc1 qr1"><br><br>
<label for="onetenti1">One tent</label>
<input type="radio" name="tentn1" id="onetenti1" class="stent1 onetentc1 qr1" value="1350" disabled><br><br>
<label for="twotenti1">Two tents :</label>
<input type="radio" name="tentn1" id="twotenti1" class="stent1 twotentc1 qr1" value="1450" disabled><br><br> Daily :<span id="dailytotali1"> </span><br><br> Total :<span id="lengthtotali1"> </span>
<br><br>
<br><input tyep="text" id="dailytoti1" name="pricefn11" value="">
<br><input tyep="text" id="lengthtoti1" name="pricefn21" value="">
<br><br><br>
</form>
////////////////////////SECOND FORM/////////////////////////////
<BR>
<form id="formaddi2" class="formadd2">
<label for="standardi2">Standard</label>
<input type="radio" name="packn2" id="standardi2" class="quip2 standardc2 qr2" value="125" checked><br><br>
<label for="equippedi2">Equipped</label>
<input type="radio" name="packn2" id="equippedi2" class="quip2 equippedc2 qr2" value="0"><br><br>
<label for="gpsi2">GPS</label>
<input type="checkbox" name="gpsn2" id="gpsi2" value="20" class="gpsc2 qr2"><br><br>
<label for="boosteri2">booster</label>
<input type="checkbox" name="boostern2" id="boosteri2" value="20" class="boosterc2 qr2"><br><br>
<label for="onetenti2">One tent</label>
<input type="radio" name="tentn2" id="onetenti2" class="stent2 onetentc2 qr2" value="1350" disabled><br><br>
<label for="twotenti2">Two tents :</label>
<input type="radio" name="tentn2" id="twotenti2" class="stent2 twotentc2 qr2" value="1450" disabled><br><br> Daily :<span id="dailytotali2"> </span><br><br> Total :<span id="lengthtotali2"> </span><br><br>
<br><input tyep="text" id="dailytoti2" name="pricefn12" value="">
<br><input tyep="text" id="lengthtoti2" name="pricefn22" value="">
<br><br><br>
</form>
////////////////////////THIRD FORM/////////////////////////////
<form id="formaddi3" class="formadd3">
<br>
<label for="standardi3">Standard</label>
<input type="radio" name="packn3" id="standardi3" class="quip3 standardc3 qr3" value="1050" checked><br><br>
<label for="equippedi3">Equipped</label>
<input type="radio" name="packn3" id="equippedi3" class="quip3 equippedc3 qr3" value="0"><br><br>
<label for="gpsi3">GPS</label>
<input type="checkbox" name="gpsn3" id="gpsi3" value="20" class="gpsc3 qr3"><br><br>
<label for="boosteri3">booster</label>
<input type="checkbox" name="boostern3" id="boosteri3" value="20" class="boosterc3 qr3"><br><br>
<label for="onetenti3">One tent</label>
<input type="radio" name="tentn3" id="onetenti3" class="stent3 onetentc3 qr3" value="1350" disabled><br><br>
<label for="twotenti3">Two tents :</label>
<input type="radio" name="tentn3" id="twotenti3" class="stent3 twotentc3 qr3" value="1450" disabled><br><br> Daily :<span id="dailytotali3"> </span><br><br> Total :<span id="lengthtotali3"> </span><br><br>
<br><input tyep="text" id="dailytoti3" name="pricefn13" value="">
<br><input tyep="text" id="lengthtoti3" name="pricefn23" value="">
</form>
