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>
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");
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);
};
};
};
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);
}
}
#foreach($users as $user)
<tr>
<td>
<select id="select_month" name="month" class="form-control">
<option value="01" >Jan</option>
<option value="02" >Feb</option>
<option value="03">Mar</option>
<option value="04" >Apr</option>
<option value="05" >May</option>
<option value="06">Jun</option>
<option value="07" >Jul</option>
<option value="08" >Aug</option>
<option value="09">Sep</option>
<option value="10" >Oct</option>
<option value="11" >Nov</option>
<option value="12">Dec</option>
</select>
</td>
<td>
<select id="select_year" name="year" class="form-control">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
</td>
<td>
<div id="url" class="btn-group mr5">
<button class="btn btn-primary btn-sm" onclick="url('{{ $user->id }}')">Invoice</button>
</div>
</td>
</tr>
#endforeach
The above code displays 10 users. I need to get the month and year of the selected user in order to pass through the url.
<script>
function url(id){
var month = $('#select_month').val();
var year = $('#select_year').val();
var url = "{{ web_url() }}/user/invoice/generate?id="+id+"&month="+month+"&year="+year;
window.location.href = url;
}
The above script returns the selected month and year for the first user and undefined for the rest. Since, i am new to this suggest me an idea. Thanks in advance.
by above code you are creating multiple elements with same id. Try appending a counter to each ID id="select_month"+i (use appropriate PHP syntax as am not aware of PHP) where i would be the loop counter.
And in your function pass the current index
function url(id,i){
var month = $('#select_month'+i).val();
var year = $('#select_year'+i).val();
var url = "{{ web_url() }}/user/invoice/generate?id="+id+"&month="+month+"&year="+year;
window.location.href = url;
}
Fiddle