I have multiple boxes. On selection of anybox I have to display its value in textbox.
Suppose I select box 1. I have to display value in textbox, and when I unselect the value must disappear. If I select multiple boxes, values must be displayed in text box separated by comma.
How can it be done?
My code is:
<input type="text" id="selectedvalue" disabled="true" class="text" name="selectedvalue" />
<tr>
<td>
<div class="box A1" id="A1"></div>
</td>
<td>
<div class="box A2"></div>
</td>
<td>
<div class="box A3"></div>
</td>
<td>
<div class="box A4 "></div>
</td>
</tr>
This can be easily done using JQuery,
Here is the JavaScript code for that
var clickedBoxes=[];
$(".box").on("click", function() {
var clikedElem = $(this);
var text='';
if(clikedElem.hasClass('clicked')){
clikedElem.removeClass('clicked');
clickedBoxes.splice(clickedBoxes.indexOf(clikedElem.text()),1);
}
else{
clikedElem.addClass('clicked');
clickedBoxes.push(clikedElem.text());
}
$('#selectedvalue').val(clickedBoxes);
});
Here is a complete JsFiddle example
Related
I'm trying to come up with a JS that detects number of empty fields in my form. I have 3 fields. If JS counted 2 or more empty fields, JS will change the css color to red. If JS counted 1 empty field, JS will change the css color to green. This works fine when i enter data into the input field. However, when i load the page with data already inside the two fields, the color still remain red. How can make the JS check if there already values in the input box and switch color accordingly based on number of empty fields when the page is loaded?
Below is when the page is loaded but showing red even though there are only 1 empty field.
I have checked all forums but no answer to my problem
'''HTML'''
<table>
<tr></tr><td> Field 1: <input class="user_field" type="text" name="1[user_fname]" value="1" autofocus/></td></tr>
<tr><td>Field 2: <input class="user_field" type="text" name="1[user_lname]" value="2"/></td></tr>
<tr><td>Field 3: <input class="user_field phone" type="text" name="1[user_mobile]"/></td></tr>
<tr><td> </td></tr>
</table>
<div id="result"></div>
<div class="containerbox">
<div id="centerbox1" style="background-color: #FF6C60;">
<div class="value">
<p><span style="color: #fff ;font-weight:bold; font-size:36px">test</span></p>
</div>
</div>
</div>
</div>
'''JS'''
$(document).ready(function(){
$('.user_field').blur(function() {
var text = "field(s) empty";
var count = $('.user_field').not(function() {
return this.value;
}).length;
$('#result').html(count + " " + text);
//*alert(count);
var udata = count;
if (udata > 2){
document.getElementById("centerbox1").style.backgroundColor = '#FF6C60';
}
else
if (udata <= 2)
{
document.getElementById("centerbox1").style.backgroundColor = '#99C262';
}
});
});
I expected the background color to be green as there are 2 data in the fields when the page is loaded but the page shows color red.
Move the function out of the blur event handler, and call it from the ready() handler:
$(document).ready(function() {
// Function of its own
function checkFields() {
var text = "field(s) empty";
var count = $('.user_field').not(function() {
return this.value;
}).length;
$('#result').html(count + " " + text);
//*alert(count);
var udata = count;
$('#centerbox1').css('background-color', udata > 2 ? '#FF6C60' : '#99C262');
}
// Set up event handler
$('.user_field').blur(checkFields);
// Call function
checkFields();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr></tr>
<td> Field 1: <input class="user_field" type="text" name="1[user_fname]" value="1" autofocus/></td>
</tr>
<tr>
<td>Field 2: <input class="user_field" type="text" name="1[user_lname]" value="2" /></td>
</tr>
<tr>
<td>Field 3: <input class="user_field phone" type="text" name="1[user_mobile]" /></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<div id="result"></div>
<div class="containerbox">
<div id="centerbox1" style="background-color: #FF6C60;">
<div class="value">
<p><span style="color: #fff ;font-weight:bold; font-size:36px">test</span></p>
</div>
</div>
</div>
</div>
I'm writing a form and I have to let the user add as many rows as required.
As you can see, my inputs are treated as arrays to later save the data to the DB. (That will be another new thing to me)
$(document).ready(function() {
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<tr> <td><input type="text" id="NombreProyecto" name="NombreProyecto[]"></td> <td><input type="text" id="Descripcion" name="Descripcion[]"></td> <td><input type="text" id="AplicacionesProyecto" name="AplicacionesProyecto[]"></td> <td style="width: auto"> <div class="range-field "> <input type="range" name="NivelTRL[]" min="1" value="1" max="9" /> </div> </td> </tr>'; //New input field html
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function() {
//Check maximum number of input fields
if (x < maxField) {
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="step-content">
<div class="container">
<div id="table" class="table-editable ">
<table class="table field_wrapper">
<tr>
<th>Nombre</th>
<th>Descripción</th>
<th>Aplicaciones</th>
<th>Nivel TRL</th>
<th><i class="material-icons">add</i>
</th>
</tr>
<tr class="">
<td><input type="text" id="NombreProyecto" name="NombreProyecto[]"></td>
<td><input type="text" id="Descripcion" name="Descripcion[]"></td>
<td><input type="text" id="AplicacionesProyecto" name="AplicacionesProyecto[]"></td>
<td>
<div class="range-field">
<input type="range" name="NivelTRL[]" min="1" value="1" max="9" />
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Everything looks perfect but when the user adds a new row and interacts with the range input, this won't feedback the user about the value he/she is picking.
Just the original one will have the tooltip.
After some testing, it even affects the 'tooltipped' class used to, well, show tooltips over any element.
This is the codepen, It's all ready to show you the problem
How to reproduce it:
In the codepen provided, you will see the blue cross, when you click on it a new row will be added.
Play around with the first range input, it will show you the value on the tooltip.
In the later added range input, it wont.
Thank you for reading, have a nice day.
You should reinit your range elements.
Simply add this code
M.Range.init($('input[type=range]'));
after this
$(wrapper).append(fieldHTML); //Add field html
First, it's not a tooltip on that range input... It's the Materialize nouiSlider effect. So you have to initialyse this on the new element.
M.Range.init(element);
By the way, I did not found this specific is the documentation about range... But I got inspired by this other initialisation example.
CodePen updated
How would i hide input elements and replace there value to the table rows , the inputs are dynamically created with push see below code :
view
ID LIKE TO REPLACE THE INPUTS WITH THE VALUE OF INPUTS IN THE TABLE ROWS
<tr class="odd gradeX" ng-repeat="choice in vm.choices">
<td>Add</td>
<td>save</td>
<td>
<div class="form-group">
<div class="input-group">
<input type="text" placeholder="Item Name" class="form-control" ng-model="choice.item_name"/>
</div>
</div>
</td>
<td>
<div class="form-group">
<div class="input-group">
<select data-ng-options='t.value as t.label for t in vm.invoice_item_type' ng-model="choice.item_type" >
</select>
</div>
</div>
</td>
contoller
vm.choices = [];
vm.addNewChoice = function() {
var newItemNo = parseInt(vm.choices.length+1);
vm.choices.push({});
};
vm.saveChoice = function() {
var lastItem = vm.choices.length-1;
------ What to do here ------
};
Ok, the easiest way to do this would be probably something like this:
Add additional field to every choice object saying if it's saved or not
Add two <td>s for every choice, one with plain text and one with input and show/hide them depending on extra parameter' value.
Something like this:
<tr class="odd gradeX" ng-repeat="choice in vm.choices">
<td>Add</td>
<td>save</td>
<td ng-hide="choice.saved">
<div class="form-group">
<div class="input-group">
<input type="text" placeholder="Item Name" class="form-control" ng-model="choice.item_name"/>
</div>
</div>
</td>
<td ng-show="choice.saved">
<div class="form-group">
<div class="input-group">
<input type="text" placeholder="Item Name" class="form-control" ng-model="choice.item_name"/>
</div>
</div>
</td>
<!-- rest of your row goes here -->
</tr>
And in controller:
vm.choices = [];
vm.addNewChoice = function() {
var newItemNo = parseInt(vm.choices.length+1);
vm.choices.push({}); // we don't need to set `saved` property explicitly since undefined will be resolved to false
};
vm.saveChoice = function(choice) {
var lastItem = vm.choices.length-1;
choice.saved=true;
// probably some extra logic related to saving
};
Note that I've added parameter to saveChoice method - you need to know which choice to save.
Also, I think that button for adding new choice should be moved outside of the table - adding new item is not related to any existing item.
For example in the code below , I would like get the text Salutation of a the label tag with class description in the code below , tried to select the class but it's not working .. how can I select the text of the label uniquely according to the id of the label ?
<tr id="salutation_id" class="edit_tr" border="0">
<td class="edit_td">
<div id="salutation_id" class="unique_ids database_key">
<span id="first_salutation_id">
<h1 class="ui-widget-header">
<label id="label_salutation_id" class="description">Salutation</label>
</h1>
</span>
<input id="first_input_salutation_id" class="editbox" type="text" value="Salutation" style="display: none;">
<div class="ui-widget-content">
<ol class="ui-droppable ui-sortable" style="">
<li class="placeholder">Add "Salutation" here</li>
</ol>
</div>
</div>
</td>
</tr>
If you want to get it with ID, this is the way: $('#label_salutation_id').text().
You mention "with class description", then you can use this: $('label.description').text(); if you just have one <label> element with that class.
Demo here
Even better:
var label = document.getElementById('label_salutation_id'),
text = label.textContent || label.innerText;
If you meant to select more than this one salutation, you can use:
jQuery('label.description')
to select all label elements with the class description.
I have to get next textbox id on change event of the first textbox using jquery.
How can i get that. I have used next() for that but its not working as i wanted.
Here is my code,
<table>
<tbody>
<tr>
<td>
<p>PF Value</p><br>
</td>
<td>
<span id="ctl00_ctl00_bcr_bcr_TextBox1" class="txtfill" style="display: inline-block;">
<input name="ctl00$ctl00$bcr$bcr$TextBox1$textbox1" class="txtSec80CCD" value="0" id="ctl00_ctl00_bcr_bcr_TextBox1_textbox1" onblur="calcDedSecCCD(this)" style="width: 70px;" type="text">
<span id="ctl00_ctl00_bcr_bcr_TextBox1_valCustom" style="color: Red; display: none;">*</span>
<div id="ctl00_ctl00_bcr_bcr_TextBox1_ErrorDiv" class="ValidatorErrorDiv" style="display:none">
<span id="ctl00_ctl00_bcr_bcr_TextBox1_Label1">You must enter a <br>number</span>
</div>
</span>
</td>
<td>
<span id="ctl00_ctl00_bcr_bcr_TextBox2" class="txtfill" style="display: inline-block;">
<input name="ctl00$ctl00$bcr$bcr$TextBox2$textbox1" class="txtSec80CCD" value="0" id="ctl00_ctl00_bcr_bcr_TextBox2_textbox1" style="width: 70px;" type="text">
<span id="ctl00_ctl00_bcr_bcr_TextBox2_valCustom" style="color: Red; display: none;">*</span>
<div id="ctl00_ctl00_bcr_bcr_TextBox2_ErrorDiv" class="ValidatorErrorDiv" style="display:none">
<span id="ctl00_ctl00_bcr_bcr_TextBox2_Label1">You must enter a <br>number</span>
</div>
</span>
</td>
</tr>
<tr>
<td>
<p>Life Insurance Premium</p><br>
</td>
<td>
<span id="ctl00_ctl00_bcr_bcr_TextBox3" class="txtfill" style="display: inline-block;">
<input name="ctl00$ctl00$bcr$bcr$TextBox3$textbox1" class="txtSec80CCD" value="0" id="ctl00_ctl00_bcr_bcr_TextBox3_textbox1" onblur="calcDedSecCCD(this)" style="width: 70px;" type="text">
<span id="ctl00_ctl00_bcr_bcr_TextBox3_valCustom" style="color: Red; display: none;">*</span>
<div id="ctl00_ctl00_bcr_bcr_TextBox3_ErrorDiv" class="ValidatorErrorDiv" style="display:none">
<span id="ctl00_ctl00_bcr_bcr_TextBox3_Label1">You must enter a <br>number</span>
</div>
</span>
</td>
<td>
<span id="ctl00_ctl00_bcr_bcr_TextBox4" class="txtfill" style="display: inline-block;">
<input name="ctl00$ctl00$bcr$bcr$TextBox4$textbox1" class="txtSec80CCD" value="0" id="ctl00_ctl00_bcr_bcr_TextBox4_textbox1" style="width: 70px;" type="text">
<span id="ctl00_ctl00_bcr_bcr_TextBox4_valCustom" style="color: Red; display: none;">*</span>
<div id="ctl00_ctl00_bcr_bcr_TextBox4_ErrorDiv" class="ValidatorErrorDiv" style="display:none">
<span id="ctl00_ctl00_bcr_bcr_TextBox4_Label1">You must enter a <br>number</span>
</div>
</span>
</td>
</tr>
......
......
......
</tbody>
</table>
I have written my script like this,
function calcDedSecCCD(id) {
var eid = $(id).attr('id');
//var elementVal = $('#' + eid).val();
//var nxtEid = $(eid).next(':input .txtSec80CCD').attr('id');
var nextele = $(this + ':input .txtSec80CCD').next();
//alert(nextele);
var nextId = $(nextele).attr('id');
alert("First Element: "+eid);
alert("First Element: " + nextId);
}
I want textbox id : ctl00$ctl00$bcr$bcr$TextBox2$textbox1 on change event of textbox1.
How can i get the id of text input using class.
Or any other way to get id of next textbox on change of first one.
You've written your markup so that it is too hard to read. In time you will you come to appreciate short ID's, names etc. as there is no need to use 40 characters in every selector, it just makes it hard to write javascript and css, and even harder to read and understand the code later.
You've also managed to create an elaborate system of nested elements that are almost certainly unnecessary, and hard to traverse with javascript, keeping it more simple is usually a good idea.
First of, you should probably not pass "id" as a variable to your function, as "id" actually does something in javascript (it gets the elements id, see below script).
If it's only within each "td" you are looking for the next input element, the below will work, but it will not work for the last input in a "td" to find the next input that is within the next "tr" etc.
function calcDedSecCCD(elm) {
var eid = elm.id;
var nextId = $(elm).parents('td').next().find('input')[0].id;
alert("First Element: "+eid);
alert("Next Element: "+nextId);
}
Here's a FIDDLE
You might use the jquery index function
var $spans = $("td>span.txtfill");
// Your next function
function get_next_span(elem){
var $span = $(elem).closest('td>span.txtfill'),
index = $spans.index($span);
return $spans.eq(index+1);
}
So if you had a text field you would use the helper function like this:
var $current = $("#ctl00_ctl00_bcr_bcr_TextBox2_textbox1"),
$next = get_next_span($current).find('input[type=text]');
Or in a change event:
$("input[type=text]").change(function(){
get_next_span(this).find('input[type=text]').show();
});