I have the following table:
<table id="tableID">
<tr id="rowID">
<td class="qCol">
<select name="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="qCo2">
<!-- img here -->
<input type="text" name="text1" id="text1" />
</td>
<td class="qCo3">
<select name="select2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="qCo4">
<!-- radio buttons here -->
<input type='radio' name='name' value='1'>
<input type='radio' name='name' value='2'>
<input type='radio' name='name' value='3'>
</td>
<td class="qCo5">
<select name="select3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="qCo6">
<!-- hidden validation image here -->
</td>
<tr>
</table>
and I have the following jQuery
$("#rowID input[type=text]").blur(function () {
if ($(this).children("input:radio").is(':checked')) {
alert("yes");
} else {
alert("no");
}
});
however regardless of whether one of the radio buttons is selected I'm still getting the alert "no". Now I know I can see the name of the radio button group but in certain situations I won't be able to due to GUIDs - what's the best method or way to work through the dom starting at the onblur event of the textbox on the same row to determin if one of the radio buttons is checked.
Your problem is because $(this) is referring to the textbox and not the rowID.
To fix do this:
$("#rowID input[type=text]").blur(function () {
var checkedRadios = $('#rowID').find('input:radio:checked');
if (checkedRadios.length > 0) {
alert("yes");
} else {
alert("no");
}
});
You're using a text box selector and binding to their blur events, and within that event handler, $(this) refers to the text box itself. Since you don't have any children of the text box, it never finds any radio buttons.
$("#rowID input[type=text]").blur(function () { //ect...
$(this) insude the function will refere to your text inputs.
you need to select type=radio.
Related
I got html as follows:
<tr>
<td><input type="text" ......></input></td>
<td><select>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
</select>
</td>
<td><input type="text" disabled="disabled" ......></input></td>
<td><select disabled="disabled">
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
</select>
</td>
</tr>
I would like to find all td's that has textboxes and dropdowns which are not disabled. I'm tryin to do this:
var res = $.extend({}, $("#myTable").find("td> input:not(:disabled)"), $("#myTable").find("td>
select:not(:disabled)"));
Is there a better way to do this?
jQuery has a :input pseudo-selector, which encompasses all the different types of user input elements. You can use that instead of having to write separate selectors for input and select.
And you can use :enabled instead of :not(:disabled).
var res = $("mytable td > :input:enabled");
I'm using JQuery to hide addition inputs based on if a check box is loaded. they're are six of them, so I used a function that will work for all of them (even though their ID's are unique.)
It works fine when they are first selected but when I select one of the Shown options (after click) the page reloads with additional data. During this reload the php checks for a "checked" box and adds the html to declare it checked. However the .js doesn't see this and still hides the child data, unless I uncheck the box and recheck it.
I tried a document load to look for it, and to move the check part of the function outside the check event.
<script>
$(function() {
$('.hidden').hide();
$('.trigger').change(function() {
var hiddenId = $(this).attr("data-trigger");
if ($(this).is(':checked')) {
$("#" + hiddenId).show();
} else {
$("#" + hiddenId).hide();
}
});
});
</script>
<html>
<div class="boxed show1">
<h3>Strategy Choices</h3>
<input type="checkbox" name="repeatFromLastGame" value="1" checked="checked" data-trigger="hidden_fields_one" class="trigger"> Repeat Numbers from last Game?<br>
<div id="hidden_fields_one" class="hidden" style="display: none;">
<label for="numberRepeats">Number of Repeats from last game to use?</label><br>
<select name="numberRepeats">
<option value="0">0</option>
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div><br>
<label for="chit1">Repeat 1</label><br>
<select name="chit1">
<option value="8">8</option>
<option value="38" selected="selected">38</option>
<option value="43">43</option>
<option value="52">52</option>
<option value="55">55</option>
</select>
</div>
</html>
I am wanting this to see if the check box is checked first then hide it if not.
$(function() {
// listen for trigger changes
$('.trigger').change(function() {
updateView();
});
// on page load checks the trigger value and updates the view
updateView();
});
function updateView(){
var hiddenId = $('.trigger').attr("data-trigger");
if ($('.trigger').is(':checked')) {
$("#" + hiddenId).show();
} else {
$("#" + hiddenId).hide();
}
}
.hidden{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="boxed show1">
<h3>Strategy Choices</h3>
<input type="checkbox" name="repeatFromLastGame" value="1" checked="checked" data-trigger="hidden_fields_one" class="trigger"> Repeat Numbers from last Game?<br>
<div id="hidden_fields_one" class="hidden" style="display: none;">
<label for="numberRepeats">Number of Repeats from last game to use?</label><br>
<select name="numberRepeats">
<option value="0">0</option>
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div><br>
<label for="chit1">Repeat 1</label><br>
<select name="chit1">
<option value="8">8</option>
<option value="38" selected="selected">38</option>
<option value="43">43</option>
<option value="52">52</option>
<option value="55">55</option>
</select>
</div>
</html>
I have a score card form with metrics on it. The metrics question is dynamically populated and pulled from a database. I am using Laravel, My code:
$agent_options = array('' => 'Choose One') + DB::table('agents')->lists('name','id');
$metrics = Metric::where('campaign_id','=',1)->orderBy('id', 'asc')->get();
return view('scorecard.create')->with(array('agent_options'=>$agent_options, 'metrics'=>$metrics));
Then in my view
#foreach($metrics as $key => $value)
<tr>
<td class="col-md-2">{{$value->criteria}}</td>
<td class="col-md-4">{!!$value->description!!}</td>
<td class="col-md-4">{!!$value->question!!}</td>
<td class="col-md-2">
<select class="form-control" name="tl_assessment[]">
<option value="">Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</td>
<td class="col-md-3">{{$value->potential_points}}</td>
<td class="col-md-3"><input type="text" class="form-control" name="score[]"></td>
</tr>
#endforeach
As you can see I am creating also tl_assessment dropdowns that is for me to record if the metrics has been met by answering Yes, No, N/A. Then you can see the potential_points.
My requirement is if Yes and N/A is selected then value of the score is the same in the potential_points.
I am pretty new to jquery and I could do this if those fields are static. But I am confuse where to start.
Give the td where you have the potential a class called potential. Give the input with the name score[] a class of score.
It should end up looking like the following...
<tr>
<td class="col-md-2">Test</td>
<td class="col-md-4">Test</td>
<td class="col-md-4">Test</td>
<td class="col-md-2">
<select class="form-control ts_assessment" data-key="test" name="tl_assessment[]">
<option value="">Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</td>
<td class="col-md-3 potential">35</td>
<td class="col-md-3"><input type="text" class="form-control score" name="score[]"></td>
</tr>
Then you should just need to add the following script.
<script>
$(document).ready(function() {
$('.ts_assessment').change(function() {
var val = $(this).val();
var parent = $(this).parents('tr');
if (val == 'Yes' || val == 'N/A') {
var potential = parent.find('.potential').text();
parent.find('.score').val(potential);
} else {
parent.find('.score').val('');
}
});
});
</script>
Situation I have a form where the user selects from a few options in a select box.
When the user select the option 'other' i want to select box to transform into an input box.
This is my code.
Head
<script>
function chargeother(select) {
if (select=="other") {
document.getElementById('chargeother').innerHTML= '<input type="text" name="type">';
}
}
</script>
Body
First Select Box
<td id="inputtype">
<select type="text" name="type" onchange="chargeother(this.value)">
<option value="Labour and Material">Labour and Material</option>
<option value="Quoted">Quoted</option>
<option value="Labour Only">Labour Only</option>
<option value="Material Only">Material Only</option>
<option value="other">Other</option>
</select>
</td>
Second Select Box
<td id="inputhazard">
<select type="text" name="hazard" onchange="chargeother(this.value)">
<option value="No Significant Hazard">No Significant Hazard</option>
<option value="GC43 Attached">GC43 Attached</option>
<option value="other">Other</option>
</select>
</td>
I need this function twice on my page is it possible to add an 'id' into the onchange function call
You needed to specify a <table> and <tr> tag for <td> in the HTML, and use innerHTML on the element and make sure you comment out the double quotes for the attribute values
//CODE
<!DOCTYPE html>
<html>
<head>
<script>
function chargeother(ele){
switch(ele.parentNode.id){
case "inputtype":
if(ele.value === "other"){
document.getElementById("inputtype").innerHTML = "<input type=\"text\" name=\"type\">";
}
break;
case "inputhazard":
if(ele.value === "other"){
document.getElementById("inputhazard").innerHTML = "<input type=\"text\" name=\"type\">";
}
break;
}
}
</script>
</head>
<body>
<table>
<tr>
<td id="inputtype">
<select type="text" name="type" onchange="chargeother(this)">
<option value="Labour and Material">Labour and Material</option>
<option value="Quoted">Quoted</option>
<option value="Labour Only">Labour Only</option>
<option value="Material Only">Material Only</option>
<option value="other">Other</option>
</select>
</td>
<td id="inputhazard">
<select type="text" name="hazard" onchange="chargeother(this)">
<option value="No Significant Hazard">No Significant Hazard</option>
<option value="GC43 Attached">GC43 Attached</option>
<option value="other">Other</option>
</select>
</td>
</tr>
</table>
</body>
</html>
Try this example without target id:
var chargeother = function(el) { // note, its html element
if ('other' !== el.value) return;
el.parentNode.innerHTML = "<input type='text' name='" + el.name + "'/>";
};
<table>
<tr>
<td id="inputtype">
<select type="text" name="type" onchange="chargeother(this)"><!-- not just value -->
<option value="Labour and Material">Labour and Material</option>
<option value="Quoted">Quoted</option>
<option value="Labour Only">Labour Only</option>
<option value="Material Only">Material Only</option>
<option value="other">Other</option>
</select>
</td>
<td id="inputhazard">
<select type="text" name="hazard" onchange="chargeother(this)"><!-- not just value -->
<option value="No Significant Hazard">No Significant Hazard</option>
<option value="GC43 Attached">GC43 Attached</option>
<option value="other">Other</option>
</select>
</td>
</tr>
</table>
You can achieve it like this:
function chargeother ( select ) {
if (select == "other")
{
var elem = document.getElementById(" selectId ");
elem.parentElement.removeChild (elem);
var inputElem= document.createElement ('input');
inputElem. type='text';
document.getElementById (" chargeother").appendChild(inputElem);
}
}
Here's my HTML:
<table>
<tr>
<th>Names</th>
<th>Product Names</th>
</tr>
<tr class="data-wrapper">
<td>
<select class="form-control required chosen-select-width name" name="source_language[][0]" aria-required="true">
<option value="name1">Name 1</option>
<option value="name2">Name 2</option>
<option value="name3">Name 3</option>
<option value="name4">Name 4</option>
<option value="name5">Name 5</option>
</select>
</td>
<td><input type="text" name="product-names"></td>
</tr>
</table>
<button type="button" class="btn add-new-data"> Add </button>
Here I have used the jQuery chosen plugin for the drop down. I am cloning the row. However, after cloning the chosen select is not working. Here is my code on jsFiddle.
How can I make chosen work for the cloned elements?
You should clone first and apply chosen later so the cloned element is "chosen free".
jQuery(function($){
var clone = $("table tr.data-wrapper:first").clone(true);
$('select.name').chosen({width: "100%"});
$('body').on('click', '.add-new-data', function() {
var ParentRow = $("table tr.data-wrapper").last();
clone.clone(true).insertAfter(ParentRow);
$('tr.data-wrapper:last select').chosen();
});
});
DEMO