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");
Related
If I select Yes, insert into query is taking as 11 in database:
<td align="center">Offers in Hand :</td>
<td>
<select name="Offers_in_Hand" id="Offers_in_Hand_Id" style="width: 250px" Required>
<option selected></option>
<option value="11">Yes</option>
<option value="22">No</option>
</select>
</td>
Change options value to desired, in your case "Yes" & "No", like this:
(jQuery added only to confirm correct value is being captured)
$("#Offers_in_Hand_Id").change(function() {
var value = $("#Offers_in_Hand_Id").val();
$("#test").html(value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td align="center">Offers in Hand :</td>
<td>
<select name="Offers_in_Hand" id="Offers_in_Hand_Id" style="width: 250px" Required>
<option selected></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<span id="test"></span>
I'm trying to trigger the variationCheck function on select change, but is there a way I can select both select options first before the function is triggered?
A little like validating, but still able to trigger the function again and again if the user decides to change the select options after validating. I hope this makes sense.
Any help would be helpful! Thanks.
Screenshot
JS
$("select[name=attribute_covers],select[name=attribute_extras]").change(function(){
var get_product_id = $(this).closest('form').data('product_id').replace('form_','');
variationCheck(get_product_id);
});
function variationCheck(get_product_id) {
for (var i = 0; i < variationArray.length; i++) {
if (variationArray[i].product_id === get_product_id) {
alert(get_product_id);
};
};
};
HTML
<table class="variations" cellspacing="0">
<tbody>
<tr>
<td class="label">
<label for="covers">Covers</label>
</td>
<td class="value">
<select id="covers" class="" name="attribute_covers" data-attribute_name="attribute_covers">
<option value="" selected="selected">Choose an option</option>
<option value="5" class="attached enabled">5</option>
<option value="6" class="attached enabled" selected="selected">6</option>
<option value="7" class="attached enabled">7</option>
<option value="8" class="attached enabled">8</option>
<option value="9" class="attached enabled">9</option>
<option value="10" class="attached enabled">10</option>
</select>
</td>
</tr>
<tr>
<td class="label">
<label for="extras">Extras</label>
</td>
<td class="value">
<select id="extras" class="" name="attribute_extras" data-attribute_name="attribute_extras">
<option value="" selected="selected">Choose an option</option>
<option value="Fruit" class="attached enabled">Fruit</option>
<option value="Cake" class="attached enabled">Cake</option>
</select><a class="reset_variations" href="#" style="visibility: visible;">Clear</a> </td>
</tr>
</tbody>
</table>
One way I can think of is to check both Select element's values and call validation method if both are selected:
$("select[name=attribute_covers],select[name=attribute_extras]").change(function(){
var get_product_id = $(this).closest('form').data('product_id').replace('form_','');
if($("select[name=attribute_covers]").val() != "" && $("select[name=attribute_extras]").val() != ""){
variationCheck(get_product_id);
}
});
function variationCheck(get_product_id) {
for (var i = 0; i < variationArray.length; i++) {
if (variationArray[i].product_id === get_product_id) {
alert(get_product_id);
};
};
};
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>
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
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.