Drop down with validation wont work in array of data
I have drop down select field where I can select whether the item is brand new or repo, If I select the repo my hidden account no field (textbox) will show (temporary hide), if I revert back to brand new it will hide again the account no field, the condition is when I select the repo the account no field (textbox) will show but there's a validation that the text-field should not be empty when user submit the form and account no is blank. What I have done so far.. is good for 1 row only, meaning when I go to 2nd row above the dropdown wont work anymore.
Here's my script.
-
<tr>
<td align='center'>BARAKO 2</td>
<td align='center'>RED</td>
<td align='center'>100</td>
<td align='center'>100</td>
<td align='center'>
<select id='new' class='new' name='brand_new[]'>
<option>Choose</option>
<option value='brand_new'>Brand New</option>
<option value='repo'>Repo</option>
</select>
</td>
<td><div id='repo' class='search_item' style='display:none'>
<input type='text' name='account_no' required>
</div>
</td>
<input type='hidden' name='interbranch_id[]' value='9'>
</tr>
<tr>
<td align='center'>BARAKO 2</td>
<td align='center'>RED</td>
<td align='center'>200</td>
<td align='center'>200</td>
<td align='center'>
<select id='new' class='new' name='brand_new[]'>
<option>Choose</option>
<option value='brand_new'>Brand New</option>
<option value='repo'>Repo</option>
</select>
</td>
<td><div id='repo' class='search_item' style='display:none'>
<input type='text' name='account_no' required>
</div>
</td>
<input type='hidden' name='interbranch_id[]' value='10'>
</tr>
- <script type="text/javascript">
$(document).ready(function() {
// Search by dates function
var search = $('#new')
search.change(function() {
$('.search_item').hide()
$('#' + $(this).val()).show()
});
});
</script>