We Keep Coding

Click function is not working after changing the class

I'm creating a basic image upload script, when i click on case-img1, it basically trigger file input that is hidden, after selecting the file, it changes next div(case-img2) class(img-upload-enable) to allow choosing next file, But when i click on the div after changing the class it doesnt work
<table id="choose-photos-tb">
<tr>
<td><div id="case-img1" class="img-upload-enable">+</div></td>
<td><div id="case-img2" class="img-upload-disable">+</div></td>
<td><div id="case-img3" class="img-upload-disable">+</div></td>
<td><div id="case-img4" class="img-upload-disable">+</div></td>
<div id="case-image-inputs">
<input type="file" name="case_img1" id="case_img1" accept="image/*">
<input type="file" name="case_img2" id="case_img2" accept="image/*">
<input type="file" name="case_img3" id="case_img3" accept="image/*">
<input type="file" name="case_img4" id="case_img4" accept="image/*">
</div>
</tr>
</table>
Here is the Jquery Code
$(document).ready(function () {
$(document.body).on('click', '.img-upload-enable', function(){
var id = $(this).attr("id");
if (id == "case-img1"){
$('#case_img1').trigger('click');
$("#case_img1").change(function() {
$('#case-img2').attr("class", "img-upload-enable");
});
}
});
});

The problem in your logic is because after the first cycle the condition: id == "case-img1" is never true.
You can fix this and improve the DRYness of the logic by using common classes. You can then relate each file trigger to the file input by their indexes.
Also note that your HTML is invalid; the div cannot be a child of the tr. It needs to be within its own cell.
With all that said, try this:
$(document).ready(function() {
var $triggers = $('.case-img-trigger');
var $inputs = $('.case_img');
$(document).on('click', '.img-upload-enable', function() {
var index = $triggers.index(this);
var $target = $inputs.eq(index).trigger('click');
});
$inputs.on('change', function() {
var index = $inputs.index(this);
$triggers.eq(index + 1).toggleClass('img-upload-disable img-upload-enable');
});
});
.case-img-trigger {
display: inline-block;
}
.img-upload-enable {
border: 1px solid #C00;
padding: 0 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="choose-photos-tb">
<tr>
<td>
<div class="case-img-trigger img-upload-enable">+</div>
<div class="case-img-trigger img-upload-disable">+</div>
<div class="case-img-trigger img-upload-disable">+</div>
<div class="case-img-trigger img-upload-disable">+</div>
</td>
</tr>
<tr>
<td>
<div id="case-image-inputs">
<input type="file" name="case_img1" class="case_img" accept="image/*" />
<input type="file" name="case_img2" class="case_img" accept="image/*" />
<input type="file" name="case_img3" class="case_img" accept="image/*" />
<input type="file" name="case_img4" class="case_img" accept="image/*" />
</div>
</td>
</tr>
</table>

You could make use of tying together both the right file select field, and the next button to enable using data-* attributes and use these to trigger the click, and change the classes.
$(document.body).on('click', '.img-upload-enable', function(){
var id = $(this).data("upload");
$(id).trigger("click");
});
$(document.body).on("change","input[type=file]",function(){
var id = $(this).data("next");
$(".img-upload-enable").removeClass("img-upload-enable").addClass("img-upload-disable")
$(id).removeClass("img-upload-disable").addClass("img-upload-enable");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="choose-photos-tb">
<tr>
<td><div id="case-img1" class="img-upload-enable" data-upload="#case_img1">+</div></td>
<td><div id="case-img2" class="img-upload-disable" data-upload="#case_img2">+</div></td>
<td><div id="case-img3" class="img-upload-disable" data-upload="#case_img3">+</div></td>
<td><div id="case-img4" class="img-upload-disable" data-upload="#case_img4">+</div></td>
<div id="case-image-inputs">
<input type="file" name="case_img1" id="case_img1" accept="image/*" data-next="#case-img2">
<input type="file" name="case_img2" id="case_img2" accept="image/*" data-next="#case-img3">
<input type="file" name="case_img3" id="case_img3" accept="image/*" data-next="#case-img4">
<input type="file" name="case_img4" id="case_img4" accept="image/*">
</div>
</tr>
</table>

How to use "other" option with checkbox and text input

I´m trying to make a text input appear when I click on the "outra", that means "other" option on the checkbox...
I want it to appear just when i click that and then it will register that thing on the database.
Does anyone know how to help me?
Code with the functions:
<label class="checkbox-inline" for="checkboxes-4">
<input type="checkbox" name="checkboxes" id="checkboxes-4" value="5">
Outro
</label>
<input type="text" maxlength="9" class="input-field4" id="input" name="teste">
</td>
</tr>
<script>
$(document).ready(function(){
$('#input').hide();
$(document).on('change', 'input[type="checkbox"]', function(e){
console.log(e)
if (e.target.id == "checkboxes-4" && e.target.checked) {
$('#input').show();
} else {
$('#input').hide();
}
});
});
</script>
<tr>
<th>Doenças</th>
<label class="checkbox-inline" for="checkboxes-7">
<input type="checkbox" name="checkboxes" id="checkboxes-7" value="8">
Outra
</label>
<input type="text" maxlength="9" class="input-field4" id="input1" name="teste1">
</td>
</tr>
<tr>
<th>Contacto em caso de emergência</td>
<td><input type="text" name="contacto_emergencia" value="<?php echo $contacto_emergencia;?>"/></td>
</tr>
</table>
<br>
<p align=right>
<button type="submit" value="Alterar">Alterar</button>
<button type="cancel" onclick="window.location='http://donutsrool.pt/ficha_aluno.php';return false;">Cancelar</button>
</p>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#input1').hide();
$(document).on('change', 'input[type="checkbox"]', function(e){
console.log(e)
if (e.target.id == "checkboxes-7" && e.target.checked) {
$('#input1').show();
} else {
$('#input1').hide();
}
});
});
</script>

Are you using a framework or anything? You would want to add a function that checks if the checkbox is checked. Judging from your tags, I'll offer a JQuery suggestion.
The JQuery to accomplish that might look like:
$('#checkboxes-4').is(":checked")
And then you would conditionally show your text input. So maybe:
if ($('#checkboxes-4').is(":checked")) {
$('#id_of_textbox').hide();
} else {
$('#id_of_textbox').show();
}

for loop not working in JavaScript while Second Attempt

I got stuck in a very strange problem need help.
Actually i am trying to assign some value to dynamically generated input fields. So i tried the following code snippet. I mean to say in first step i only need to assign value for first 10 IDs and then again if assigning some other values to rest of IDs then it fails
JavaScript
<script type="text/javascript">
function callAssignMark() {
var rightMarkVal = $("#rightMarkVal").val();
var wrongMarkVal = $("#wrongMarkVal").val();
var initial= $("#from").val();
var last= $("#to").val();
console.log('fromWhere--'+initial);
console.log('to---'+last);
alert('Before Loop');
for (var i = initial; i <= last; i++) {
$('#rightMark_' + i ).val(rightMarkVal);
$('#wrongMark_' + i ).val(wrongMarkVal);
$('#selectData_' + i).prop('checked', 'checked');
}
$("#from").val('');
$("#to").val('');
}
</script>
The above JavaScript code working fine in first attempt means when I assign some value to initial and last variable then the loop iterates and works as expected and assign desired values to dynamically generated input fields, But now the problem is when I assign new value to initial and last variable then the loop not able to iterate any more.
And one more thing I want tell you all that all the dynamic IDs of input fields are generated correctly and I'm also getting the values which is going to be assigned to the input fields on second attempt and my HTML looks like following.
HTML
<div>
<div>
<ul>
<li>
<label>From</label>
<input name="" id="from" type="text" placeholder="from" value="" />
<label>To</label>
<input name="" id="to" type="text" placeholder="to" value="" />
<input name="rightMarkVal" id="rightMarkVal" type="text" placeholder="positive Value" value="" />
<input name="wrongMarkVal" id="wrongMarkVal" type="text" placeholder="Negative value" value="" />
<input type="button" class="btn btn-success" value="Assign Marks" onclick="callAssignMark()">
</li>
</ul>
</div>
<c:set var="counter" value="0" scope="page" />
<div>
<table>
<th>S.No</th>
<th>
<input type="checkbox" id="selectAllCheckBox">
</th>
<th>Right Marks</th>
<th>Wrong Marks</th>
<tbody>
<c:forEach var="list" items="${List}" varStatus="loop">
<tr>
<td>
<c:out value="${counter = counter+1 }" />
</td>
<td>
<form:checkbox path="qId" id="selectData_${counter}" value="${list.id}">
</form:checkbox>
</td>
<td>
<form:input path="rightMark" id="rightMark_${counter}" value="" />
</td>
<td>
<form:input path="wrongMark" id="wrongMark_${counter}" value="" />
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
I am unable to find out where is the problem so please help me.
Any help will be appreciated. Thanks

Display HTML on the basis of dropdown menu selected

I have a dropdown menu and on the basis of the item selected I want to display a small part of HTML page.
<select id='menuHandler'>
<option value='abc'> abc</option>
<option value='xyz'>xyz</option>
</select>
IF the selected value is "abc" then a popup button is displayed with the following code:
<button id='runForm' onClick=""> Run form </button>
<div id ="runFormPopup" style=" display:none;">
<table CELLPADDING="10" CELLSPACING="5" class='border'>
<tr>
<td colspan='3'>Run form Generation</td>
</tr>
<tr>
<td width="200" class='border'>
<span>Input Data</span><br>
<input type="checkbox" name="vehicle" >Process log(s)<br>
Summary data<br>
<input type="checkbox" name="vehicle" >Thickness data<br>
<input type="checkbox" name="vehicle" >Particle data
</td>
<td class='border'>
<span>Steps(s)</span>
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
</td>
</tr>
<tr>
<td> Run form filename </td>
<td><input type="text" ></td>
<td><button class="editbtn">Generate</button></td>
</tr>
</table>
</div>
else if the value selected is "xyz" this should be displayed.
<form action="${ctx}/home/step50/generateReport" method="GET" id="form_generate">
<input style="margin-top: 20px;" type="submit" id="btnGenerate" class="small button active" value="Generate"/>
</form>
how can I do it.

Listen to the change event of the #menuHandler select element, and add the conditional logic there.
Example Here
$('#menuHandler').on('change', function () {
if (this.value === "abc") {
$('#runFormPopup, #runForm').show();
$('#form_generate').hide();
} else {
$('#runFormPopup, #runForm').hide();
$('#form_generate').show();
}
});
..or a shorter version:
Example Here
$('#menuHandler').on('change', function () {
var condition = this.value === "abc";
$('#runFormPopup, #runForm').toggle(condition);
$('#form_generate').toggle(!condition);
});

Try something like this.
$('#menuHandler').change(function(){
var selectedValue = $(this).val();
if(selectedValue === 'abc') {
$('#runFormPopup').show();
$('#form_generate').hide();
}
else {
$('#runFormPopup').hide();
$('#form_generate').show();
}
});

From a high-level perspective:
Create a listener on the button and listen for a click
Dynamically get the value
Either create the content for which you are looking, or insert content into a dynamically-created <div> (overlay, pop-up, etc.)
Following these steps, you should be OK.

hide and show input text based on drop down selection however

hide and show input text based on drop down selection however the "input text" doesn't show anymore when i submit the form and I didn't complete the form validaton.
i am using jquery, and i can show and hide, works perfectly, but this part is bugging me alot.
my customers will not complete all the form fields, so when they submit the form, i would like them to SEE the input text based on their drop down selection, RATHER, the input text is missing.
$(document).ready(function() {
$('#shipping').change(function() {
if ( $("#shipping").val () == "LA")
{
$('#mydiv').show();
}
else
$("#mydiv").hide();
});
});
<select name="shipping" id="shipping">
<option value="LA">LA</option>
<option value="NYC">NYC</option>
</select>
<tr id="mydiv" style="display:none">
<td><input type="text" name="testing"></td>
</tr>
<tr>
<td><input type="text" name="testing2"></td>
</tr>
<tr>
<td><input type="text" name="testing3"></td>
</tr>
<input type="submit" value="Submit" />

what you want to validate.
if textbox is hidden , it should be part of validation or not
if that is part of validation use
$('#id').prop("required", "true");
else
$('#id').removeAttr("required");

Instead of inline styles for this try using a class for hiding it initially like,
<tr id="mydiv" class="hidden">
<td><input type="text" name="testing"></td>
</tr>
CSS: .hidden{display:none;}
and then do,
$(document).ready(function() {
$('#shipping').change(function() {
if ( $("#shipping").val () == "LA")
{
$('#mydiv').show();
}
else
$("#mydiv").hide();
});
});
(OR)
Try to remove 'hidden' class when u want to show the #mydiv
$(document).ready(function() {
$('#shipping').change(function() {
if ( $("#shipping").val () == "LA")
{
$('#mydiv').removeClass('hidden');
}
else
$("#mydiv").addClass('hidden');
});
});
It will work.!!

Look at the jsFiddle here. It works.
I don't see the <table> tag in your html, which is a problem.
<select name="shipping" id="shipping">
<option value="select">Select</option>
<option value="LA">LA</option>
<option value="NYC">NYC</option>
</select>
<table>
<tr id="mydiv" style="display:none">
<td>
<input type="text" name="testing" value="show/hide"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="testing2"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="testing3"/>
</td>
</tr>
</table>
<input type="submit" value="Submit" />
Javascript:
$('#shipping').change(function () {
if ($("#shipping").val() == "LA") {
$('#mydiv').show();
} else $("#mydiv").hide();
});

If you are looking to have the div show when the page reloads with that information you will need to check for the selected information when the page is loading.
Don't make the default display none. Hide it when you load the page.
$(document).ready(function() {
$("#mydiv").hide();
var shipLocation = $("select#shipping").val();
if ( shipLocation == "LA")
{
$('#mydiv').show();
}
then add your shipping change method.