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>
Related
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
I have a HTML inputting page that can disable a input field by checking a check box named undefined.
When I check undefined and go to next page and come back to the inputting page have to checked the check box and disable the input field.
Now when I come back to input page the checkbox is checked but input field is not disabled.
Below is my javascript function code and the inputting page code segment. Please help me on this.
javascript function:
function disable_input_field(value){
var input_field = document.getElementById("person_" + value);
if ($("#undefined_" + value).is(":checked")) {
input_field.disabled = true;
input_field.style.backgroundColor = "#e6e6e6";
document.getElementById(value).value = 'undifined';
}else{
input_field.disabled = false;
input_field.style.backgroundColor = "#ffffff";
document.getElementById(value).value = '';
}
}
Inputting page code segment :
<tr>
<td nowrap class="auto-style34" colspan="3" style="height: 40px;">data</td>
<td nowrap class="auto-style39" colspan="3">
<input type="text" style="background-color: white;color: black;border-style:solid;height: 25;ime-mode: active;" id="person_data" name="person_data" size="50" value='<?php echo person_data ?>'>
</td>
<td nowrap class="auto-style39" colspan = "3">
<?php if($check_data != ''){ print_r("if");?>
<input type="checkbox" checked name="undefined_data" id="undefined_data" onclick="disable_input_field('data')" >undefined
<?php }else{ print_r("else");?>
<input type="checkbox" name="undefined_data" id="undefined_data" onclick="disable_input_field('data')" >undefined
<?php }?>
<input type="hidden" name="data" id="data">
</td>
When coming back to the inputting page $check_data becomes not null.
$(document).ready(function(){
if($("#undefined_" + value).is(":checked")){
input_field.disabled = true;
input_field.style.backgroundColor = "#e6e6e6";
document.getElementById(value).value = 'undifined';
}
});
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
I have a simple form users can fill out and also add a new form to add multiple entries.
Everything works fine except when I enter data in the first set of inputs and click create new memberships it will take the data from the form and put it in the text boxes.
How can I stop that?
http://jsfiddle.net/811yohpn/2/
I have tried a couple different ways.
$('#education').find('input:text').val('');
$('#education: input').val('');
However that will clear all entries.
Call find on the newDiv, instead of all inputs within #education.
Updated fiddle
newDiv.find('input:text').val('');
var ed = 1;
function new_education() {
ed++;
var newDiv = $('#education div:first').clone();
newDiv.attr('id', ed);
var delLink = '<a class="btn btn-danger" style="text-align:right;margin-right:65px" href="javascript:deled(' + ed + ')" > Delete Education ' + ed + ' </a>';
newDiv.find('tr:first th').text('Education ' + ed);
newDiv.append(delLink);
newDiv.find('input:text').val(''); // <----------- added this
$('#education').append(newDiv);
}
function deled(eleId) {
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('education');
parentEle.removeChild(ele);
//ed--;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<legend>Education</legend>
<div id="education">
<div id="1">
<table border=3>
<tr>
<th colspan="4" style="background-color:#b0c4de;">Education 1</th>
</tr>
<tr>
<td>
<label>School Name</label>
<input type="text" name="schoolname[]" maxlength="30" size="30"/>
</td>
<td>
<label>Degree Type</label>
<input type="text" name="degreetye[]" maxlength="30" size="30"/>
</td>
<td>
<label>Degree Field</label>
<input type="text" name="degreefield[]" maxlength="30" size="30"/>
</td>
</tr>
</table>
</div>
</div>
<br/><a class="js-addNew btn btn-info" href="javascript:new_education()"> Add New Education </a>
You need to clear the inputs under the cloned element
newDiv.find('input').val('')
Demo: Fiddle
Your selectors are selecting all input elements within the #education container, that is not what you want. The newDiv variable refers to the newly created element so you can use that to find the input elements within in and then clear it
I have this code in my page. with two textboxes and one textarea.
<fieldset>
<legend><b>Search Criteria</b></legend>
<table>
<tr>
<td>
Find Text:
<input type="text" style="width:150px" id="txtFind"/>
<input type="button" id="btnfind" value=" Find "/>
</td>
</tr>
<tr>
<td>
Replace Text:
<input type="text" style="width:150px" id="Text1"/>
<input type="button" value="Replace Text" id="btnReplace"/>
</td>
</tr>
</table>
</fieldset>
<br />
<fieldset>
<legend><b>Result</b></legend>
<table>
<tr>
<td>
<%:Html.TextArea("Hello ASP.NET here")%>
</td>
</tr>
</table>
</fieldset>
in my first textbox if I enter "here" then I click the Find button it should find the text
if I enter "MVC" on second text box click Replace Text button it should replace the text "here" to "MVC" ("Hello ASP.NET MVC").,
Please can any one help me out? How to do this with javascript or jquery?
Thanks
Asuming your textarea has id="textarea", you should do this:
$("#btnfind").click(function(){
var find = $("#txtFind").val();
var replace = $("Text1").val();
var text = $("#textarea").val();
while(text.indexOf(find) >= 0){
text = text.replace(find, replace);
}
$("#textarea").val(text);
});
(Note that we're not using Regular expressions to replace because the text to find is dynamic so we'd have to escape the 'find' text).
Hope this helps. Cheers
this should get you started: http://jsfiddle.net/DD7t5/
using jQuery and a highlight jQuery plugin
var $result = $('#result'),
$txtFind = $('#txtFind'),
$txtReplace = $('#txtReplace');
$('#btnFind').click(function() {
$result.removeHighlight();
var findValue = $txtFind.val();
if (findValue.length > 0) {
$result.highlight(findValue) // find and highlight
}
});
$('#btnReplace').click(function() {
$result.text($result.text().replace(eval('/' + $txtFind.val() + '/gi'),
$txtReplace.val())); // replace
});