So far i have a dropdown which each has a corresponding number which works just fine. Each number also has a corresponding trait also which will be placed in the 4th column. So what i'm trying to ask is can the dropdown have two values attached to it (a number and a trait) or should I break it up into two parts (1: dropwdown displays a number & 2: number displays a trait)? and how to do that please and thanks you.
JS
$('#warmth').change(function () {
$('#warmthVal').val(this.value);
});
HTML
<table>
<tr>
<td><b>Factors</b></td>
<td><b>Sten Score</b></td>
<td><b>1-10</b></td>
<td><b>Personality Traits</b></td>
</tr>
<tr>
<td>Warmth (A)</td>
<td>
<select name="warmth" id="warmth">
<option value="">...</option>
<option value="1">0-4</option> //trait1
<option value="2">5-6</option> //trait2
<option value="3">7-9</option> //trait3
<option value="4">10-11</option> //trait4
<option value="5">12-14</option> //trait5
<option value="6">15-16</option> //trait6
<option value="7">17-18</option> //trait7
<option value="8">19-20</option> //trait8
<option value="9">21-22</option> //trait9
</select>
</td>
<td>
<input type="text" id="warmthVal" name="sten" disabled size="1" />
</td>
<td>
<input type="text" id="warmthTrait" name="warmthTrait" disabled size="1" />
</td>
</tr>
</table>
You can bind additional values to your DOM elements using data attributes. Here is how you do that.
JS
$('#warmth').change(function () {
$('#warmthVal').val(this.value);
$('#warmthTrait').val($(this).data("trait"));
});
HTML
<table>
<tr>
<td><b>Factors</b></td>
<td><b>Sten Score</b></td>
<td><b>1-10</b></td>
<td><b>Personality Traits</b></td>
</tr>
<tr>
<td>Warmth (A)</td>
<td>
<select name="warmth" id="warmth">
<option value="">...</option>
<option data-trait="trait1" value="1">0-4</option> //trait1
<option data-trait="trait2" value="2">5-6</option> //trait2
<option data-trait="trait3" value="3">7-9</option> //trait3
<option data-trait="trait4" value="4">10-11</option> //trait4
<option data-trait="trait5" value="5">12-14</option> //trait5
...
</select>
</td>
<td>
<input type="text" id="warmthVal" name="sten" disabled size="1" />
</td>
<td>
<input type="text" id="warmthTrait" name="warmthTrait" disabled size="1" />
</td>
</tr>
</table>
Hope it helps.
Related
I'm trying to show a set of select option base on what is selected on another select option. I have some issue to understand the logic with the js script.
Example:
Any advice how to hide the other options which are not used
if TV show only value device, tsignal, blackscreen, other
If Radio show only the value: device, rsignal, other
$('#new').find('option').not('[value="device"]').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form>
<table>
<tbody>
<tr>
<td>Issue:</td>
<td>
<select required id="test" name="test">
<option value="" disabled selected>Choose an option</option>
<option value="tv">tv</option>
<option value="radio">radio</option>
</select>
</td>
</tr>
<tr>
<td height="50px" colspan="3"></td>
</tr>
<tr>
<td>What is the problem?</td>
<td>
<select id="new" name="new">
<option value="" disabled selected>Select an option</option>
<option value="device">device is defect</option>
<option value="rsignal">radio has no signal</option>
<option value="tsignal">radio has no signal</option>
<option value="blackscreen">tv blackscreen</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" class="submit" value="submit"></td>
</tr>
</tbody>
</table>
</form>
I guess that you meant to use .change so when #test dropdown changed you check what its value and based on that show / hide options, right?
$('#test').change(function() {
const options = $('#new').find('option').show();
if ($(this).val() === 'tv') {
options.not('[value="device"]').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form>
<table>
<tbody>
<tr>
<td>Issue:</td>
<td>
<select required id="test" name="test">
<option value="" disabled selected>Choose an option</option>
<option value="tv">tv</option>
<option value="radio">radio</option>
</select>
</td>
</tr>
<tr>
<td height="50px" colspan="3"></td>
</tr>
<tr>
<td>What is the problem?</td>
<td>
<select id="new" name="new">
<option value="" disabled selected>Select an option</option>
<option value="device">device is defect</option>
<option value="rsignal">radio has no signal</option>
<option value="tsignal">radio has no signal</option>
<option value="blackscreen">tv blackscreen</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" class="submit" value="submit"></td>
</tr>
</tbody>
</table>
</form>
Notice Hide option is not cross browser
In a table, I have two columns and many rows. One column have drop down and other have input field of type number. When I change the value of drop down I want to assign that selected value to the input field which is present in next td. I hope I explained my problem okay.
Here is what I have tried,
$(document).ready(function() {
$('select.nameSelect').change(function() {
var id = $(this).children("option:selected").val();
$(this).closest('.tr').find('.StudentId').val(id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
</table>
Firstly, your HTML is invalid due to having multiple elements with the same id (id="StudentName").
But the reason your code isn't working is because you're doing closest('.tr') when it should be closest('tr') because it's an element, not a class.
Also, there is no need to find the selected value... just use this.value
$(document).ready(function() {
$('select.nameSelect').change(function() {
$(this).closest('tr').find('.StudentId').val(this.value);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
</table>
We are using Parsley JS for client side validation and I have following scenario which I need to validate.
The HTML part looks like this:
<form id="demo-form">
<table>
<tr>
<td>
Do you want to enter values:
<input type="radio" name="choice" value="yes"> Yes
<input type="radio" name="choice" value="no"> No
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Select Year</td>
<td>
<select name="year" title="Select Year">
<option value="Year">Year</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<select name="year" title="Select Year">
<option value="Year">Year</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<select name="year" title="Select Year">
<option value="Year">Year</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
</tr>
<tr>
<td>Enter Amount</td>
<td>
<input type="text" name="amount" size="3"/>
</td>
<td>
<input type="text" name="amount" size="3"/>
</td>
<td>
<input type="text" name="amount" size="3"/>
</td>
</tr>
</table>
</td>
</tr>
Validation requirements are:
User has to choose "Yes" or "No" (Choice filed is required).
If user chooses "Yes" then at least one drop down year need to be
selected.
For any drop down whose year is selected needs to have some value.
(Amoount filed not empty)
If user chooses "No" then Year fields can be kept on default value and amount can be left blank.
I would like to know if this type of validation can be achieved easily and efficiently in Parsley? I have created working copy for testing at the following URL Working example - CodePen Link
I would really appreciate if somebody with better experience on Parsley JS, can comment on this.
i already duplicate my html elements by this javascript code but i cannot copy the events of the code.Will you gyups please prove me the possible solution.
<script type = "text/javascript" language = "javascript">
function func_addmore(){
$(document).ready(function() {
$("div").click(function () {
$(this).clone().insertAfter(this);
});
});
}
</script>
<body id="show" onload="func_load()">
<form method="POST" action="get_value.php" >
<table class="table table-condensed">
<tr>
<td width="1%"><span> Level of Education:</span></td>
<td >
<select id="title" name="title" >
<option value="none" selected >----Select ----</option>
<option id="1">Masters</option>
<option id="2">Bachelors</option>
<option id="3">HSC</option>
<option id="4">SSC</option>
</select>
</td>
</tr>
<tr>
<td ><span>Exam/Degee Title:</span></td>
<td ><input name="degreetitle" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<tr>
<td><span>Concentration/Major:</span></td>
<td><input name="major" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<td><span>Institutions:</span></td>
<td>
<select id="institutions" name="institutions" onchange="func_ins()">
<option value="none" selected >----Select ----</option>
<option id="1">A</option>
<option id="2">Others</option>
</select>
</td>
</tr>
<tr id ="trins">
<td><span>Others</span></td>
<td><input type="text" id="others_ins" /></td>
</tr>
<tr>
<td><span>Result:</span></td>
<td>
<select id="result" name="result" onchange="func_res()">
<option value="none" selected >----Select ----</option>
<option id="1">Grade</option>
<option id="2" >Division</option>
</select>
</td>
</tr>
<tr id ="trgrade">
<td><span>Grade</span>
<td><input type="text" id="others_grade" size="5" /></td>
</tr>
<tr id ="trscale">
<td><span>Scale:</span>
<td><input type="text" id="others_grade" size="5" /></td>
</tr>
<tr id="trdiv" onload="func_hid()" >
<td><span>Division:</span></td>
<td>
<select id="division" name="division">
<option value="none" selected >----Select ----</option>
<option id="1">1st Division</option>
<option id="2">2nd Division</option>
</select>
</td>
</tr>
<tr>
<td width="1%"><span> Year of Passing:</span></td>
<td >
<select id="title" name="title" >
<option value="none" selected >----Select ----</option>
<option id="1">2016</option>
<option id="2">2015</option>
<option id="3">2014</option>
<option id="4">2013</option>
<option id="5">2012</option>
<option id="6">2011</option>
<option id="7">2010</option>
<option id="1">2009</option>
<option id="2">2008</option>
<option id="3">2007</option>
<option id="4">2006</option>
<option id="5">2005</option>
<option id="6">2004</option>
<option id="7">2003</option>
<option id="1">2002</option>
<option id="2">2001</option>
<option id="3">2000</option>
<option id="4">1999</option>
<option id="5">1998</option>
<option id="6">1997</option>
<option id="7">1996</option>
<option id="1">1995</option>
<option id="2">1994</option>
<option id="3">1993</option>
<option id="4">1992</option>
<option id="5">1991</option>
<option id="6">1990</option>
<option id="7">1989</option>
<option id="2">1988</option>
<option id="3">1987</option>
<option id="4">1986</option>
<option id="5">1985</option>
<option id="6">1984</option>
<option id="7">1983</option>
<option id="5">1982</option>
<option id="6">1981</option>
<option id="7">1980</option>
</select>
</td>
</tr>
<tr>
<td ><span>Duration:</span></td>
<td ><input name="duration" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<td ><span>Achievement:</span></td>
<td ><input name="achievement" type="text" id="name" size="19" class=""/></td>
</tr>
<tr><td> <input type="submit" name="submit" value="submit" />
</td></tr>
<tr><td> <input type="button" name="addmore" value="Add more" onclick="func_addmore()" />
</td></tr>
</table>
</div>
</form>
</body>
Is there any way to do that? Thanks in advance.I hope i will find out my answer through you guys.Thank you.
The jQuery .clone() method offers the option to also clone events. Please note that by default this option is not used. In order to clone events you need to use:
$(this).clone(true).insertAfter(this);
More detail at jQuery.clone()
I want to note that the .clone() method in jQuery only clones DOM elements. In order to clone JavaScript objects, you would do:
// Shallow copy
var newObject = jQuery.extend({}, oldObject);
// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);
More information can be found in the jQuery documentation.
I also want to note that the deep copy is actually much smarter than what is shown above – it's able to avoid many traps (trying to deep extend a DOM element, for example). It's used frequently in jQuery core and in plugins to great effect.
<tr>
<td>Year</td>
<td>Make</td>
<td>Model</td>
<td>Doors</td>
<td>4 Wheel Drive</td>
</tr>
<tr>
<td><input type="text" class="small_input_text required only_number" name="auto_year_'+no_fields+'" id="auto_year_'+no_fields+'" /></td>
<td><input type="text" class="small_input_text required" name="auto_make_'+no_fields+'" id="auto_make_'+no_fields+'" /></td>
<td><input type="text" class="small_input_text required" name="auto_model_'+no_fields+'" id="auto_model_'+no_fields+'" /></td>
<td>
<select name="auto_doors_'+no_fields+'" id="auto_doors_'+no_fields+'">
<option value="2 door">2 door</option>
<option value="4 door">4 door</option>
</select>
</td>
<td>
<select name="auto_liability_'+no_fields+'" id="auto_liability_'+no_fields+'">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</td>
<td>
<a class="remove_new" onclick="$(this).parent().parent().remove();");">x</a>
</td>
</tr>
<tr>
<td colspan="7">
<ul class="regular_form">
<li>
<label class="large_label">Current Liability Limit:</label>
<input type="text" class="medium_input_text" name="l_exp_date_'+no_fields+'" id="l_exp_date_'+no_fields+'"/>
</li>
<li>
<label class="large_label">Bodily Inj. Liab.:</label>
<select name="a_body_'+no_fields+'" id="a_body_'+no_fields+'">
<option value="50/100">50k / 100k</option>
<option value="100/300">100k / 300k</option>
<option value="250/500">250k / 500k</option>
</select>
</li>
<li>
<label class="large_label">Property Damage:</label>
<select name="a_property">
<option value="10">10,000</option>
<option value="25">25,000</option>
<option value="50">50,000</option>
<option value="100">100,000</option>
<option value="100">250,000</option>
</select>
</li>
<li>
<label class="large_label">
Uninsured Motorist:</label><select name="a_unins_'+no_fields+'" id="a_unins_'+no_fields+'"><option
value="25/50/25">25/50/25</option>
<option value="50/100/50">50/100/50</option>
<option value="100/300/100">100/300/100</option>
</select></li><li>
<label class="large_label">
Collision:</label><select name="a_col_'+no_fields+'" id="a_col_'+no_fields+'"><option
value="250">250 Deductible</option>
<option value="500">500 Deductible</option>
<option value="1000">1,000 Deductible</option>
</select></li><li>
<label class="large_label">
Comprehensize:</label><select name="a_comp_'+no_fields+'" id="a_comp_'+no_fields+'"><option
value="0">0 Deductible</option>
<option value="100">100 Deductible</option>
<option value="250">250 Deductible</option>
<option value="500">500 Deductible</option>
<option value="1000">1000 Deductible</option>
</select></li><li>
<label class="large_label">
Rental Car:</label><select name="a_rent_'+no_fields+'" id="a_rent_'+no_fields+'"><option
value="$20/day">$20/day</option>
<option value="$30/day">$30/day</option>
</select></li><li>
<label class="large_label">
Towing:</label><select name="a_towing"><option value="$100">$50</option>
<option value="$100">$100</option>
</select></li></ul>
<a class="remove_new" onclick="$(this).parent().parent().remove();">x</a>
</td>
</tr>
Assuming you had a button, link or something inside a <td> of the row you want removed, you could do something like the code below.
The magic is: $(this).closest('tr').remove() -- closest will travel up the DOM finding the tr element. If you wanted a quick fix for your code, try onclick="$(this).closest('tr').remove();"
HTML
<table>
<tbody>
<tr>
<td>Row 1</td>
<td><input type="button" class="remove_row" value="Remove Row"/></td>
</tr>
<tr>
<td>Row 2</td>
<td><input type="button" class="remove_row" value="Remove Row"/></td>
</tr>
</tbody>
</table>
jQuery
$('.remove_row').live('click', function() {
$(this).closest('tr').remove();
});
Fiddle example: http://jsfiddle.net/garreh/ernnP/
Use of .live is assuming in the future you want to have a functionality of adding a row.
The only immediate error that I can see in that code is this:
onclick="$(this).parent().parent().remove();");"
...you have an extra );" at the end. It should be:
onclick="$(this).parent().parent().remove();"
It's on the first both <a> elements.
You have some syntax errors in your code, let's look at just the removal link
<a class="remove_new" onclick="$(this).parent().parent().remove();");">x</a>
This should probably be
<a class="remove_new" onclick="$(this).parent().parent().remove();">x</a>
It's probably better to do something along the lines of
<a class="remove_new" onclick="$(this).closest('tr').remove();">x</a>
That way you don't have to depend on the stability of the DOM and it should work, I tried testing it in JsFiddle but something in your code is messing with JsFiddle and it won't import jQuery correctly.
In the future you will probably get an answer more quickly if you nicely format your code and if you can provide a simplified case.
http://jsfiddle.net/orolo/bnZwg/
$('.remove_new').click(function() {
$(this).parent().parent().remove();
});