I have about 120 inputs
<input type="text" />
I'm going to fill some of them with some text, while the others will be empty.
Is there any way to use a submit button that will make all empty inputs change in background color?.
Any help will be appreciated.
It can easily be done using jQuery if you prefer. Here's the solutions using both javaScript and jQuery.
HTML :
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="button" id="submitButton" value="Submit" />
//for javaScript
<!-- <input type="button" id="submitButton" value="Submit" onclick="validateField();" /> -->
javaScript :
function validateField(){
var textFields = document.getElementsByTagName("input");
for(var i=0; i < textFields.length; i++){
if(textFields[i].type == "text" && textFields[i].value == "")
{
textFields[i].style.backgroundColor = "red";
}
else {
textFields[i].style.backgroundColor = "white";
}
}
}
jQuery :
$("#submitButton").click(function(){
$("input").each(function(){
if($(this).attr("type") == "text" && $(this).val() == "")
{
$(this).css("background-color", "red");
}
else {
$(this).css("background-color", "white");
}
});
});
javaScript Demo
jQuery Demo
This should work:
function verifyInputs() {
var inputs = document.querySelectorAll('input');
for (var i=0; i<inputs.length; i++) {
if (inputs[i].type == 'text' && inputs[i].value == "") {
inputs[i].style.backgroundColor = 'red'
}
}
}
// This should be triggered on dom load / window load or in case when you want to check and mark the inputs with color
verifyInputs();
Click here for JSFIDLE demo
Related
I wrote the below code for changing the text of div that called active yes, based on value of each input with type hidden.
i want to change the text of this div if input with id enable to "Enable List" and if input with classname delete has value changes the div text to "Deleted list" and if both of them was null show "list".
my code does not work correctly.
what is my problem?
here is my snippet :
$(document).ready(function() {
tmpval = $('#enable').val();
if (tmpval == '') {
$('.activeyes').text('list');
} else {
$('.activeyes').text('Enable List');
}
tmpval2 = $('#delete').val();
if (tmpval2 == '') {
$('.activeyes').text('List');
} else {
$('.activeyes').text('Deleted List');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" value="aa" id="enable" />
<input type="text" value="" id="delete" />
<h1 class="activeyes"> List</h1>
You are overwriting effect of the first check by the second check; you need to check the 2 inputs value together. Still, it is unclear what will happen if both are non-empty.
$(document).ready(function() {
tmpval = $('#enable').val();
tmpval2 = $('#delete').val();
if (tmpval == '' && tmpval2 == '') {
$('.activeyes').text('list');
} else if( tmpval!='' ){
$('.activeyes').text('Enable List');
} else if( tmpval2!='' ){
$('.activeyes').text('Deleted List');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" value="aa" id="enable" />
<input type="text" value="" id="delete" />
<h1 class="activeyes"> List</h1>
what is my problem?
You need to check the value of input when it changes its value, so capture the change event.
$(document).ready(function() {
$('#enable, #delete').change(function() {
var $this = $(this);
var id = $this.attr("id");
var value = $this.val();
if (value.length == 0)
{
$('.activeyes').text('list');
}
else
{
id == "enable" ? $('.activeyes').text('Enable List') : $('.activeyes').text('Deleted List');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" value="aa" id="enable" />
<input type="text" value="" id="delete" />
<h1 class="activeyes"> List</h1>
I have pieced together a script that adds the values in text boxes and displays the sums in a span. I have tried a ton of things, but I can not get it to display the sums in a input textbox. Here is a fiddle that I have been working in ..
http://jsfiddle.net/elevationprint/MaK2k/17/
Basically I want to change the spans to input text boxes. If anyone can take a look and let me know what I am missing, I would appreciate it!
The code is this
HTML
Red<br>
12x12<input class="qty12" value="" /><br/>
12x24<input class="qty24" value="" /><br>
<br>
Blue<br>
12x12<input class="qty12" value="" /><br/>
12x24<input class="qty24" value="" /><br>
<br><br>
Total = <span class="qty12lable"></span> x $.95<br>
Total = <span class="qty24lable"></span> x $1.40<br>
SCRIPT
$('.qty12').keyup(function(){
var qty12Sum=0;
$('.qty12').each(function(){
if (this.value != "")
qty12Sum+=parseInt(this.value);
});
// alert('foo');
$(".qty12lable").text(qty12Sum);
//console.log(amountSum); });
$('.qty24').keyup(function(){
var qty24Sum=0;
$('.qty24').each(function(){
if (this.value != "")
qty24Sum+=parseInt(this.value);
});
// alert('foo');
$(".qty24lable").text(qty24Sum);
//console.log(amountSum); });
You can target the input fields like so:
Total = <input class="qty12lable" value=""> x $.95<br>
Total = <input class="qty24lable" value=""> x $1.40<br>
$("input.qty12lable").val(qty12Sum);
$("input.qty24lable").val(qty24Sum);
To set the text (value) of a textbox you have to use .val() not .text(). Like this:
$('.qty12').keyup(function() {
var qty12Sum = 0;
$('.qty12').each(function() {
if (this.value != "")
qty12Sum += parseInt(this.value);
});
$(".qty12lable").val(qty12Sum);
});
$('.qty24').keyup(function() {
var qty24Sum = 0;
$('.qty24').each(function() {
if (this.value != "")
qty24Sum += parseInt(this.value);
});
$(".qty24lable").val(qty24Sum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Red
<br>12x12
<input class="qty12" value="" />
<br/>12x24
<input class="qty24" value="" />
<br>
<br>Blue
<br>12x12
<input class="qty12" value="" />
<br/>12x24
<input class="qty24" value="" />
<br>
<br>
<br>Total = <input class="qty12lable"/> x $.95
<br>Total = <input class="qty24lable"/> x $1.40
<br>
This snippet has some logic about how you can attach event listeners on input fields and how you can get their values. It's not perfect and has quite a few bugs from production level perspective but this will give a hint about how you can listen and manipulate DOM using Jquery. Which is what Jquery is all about.
$( "input" )
.change(function () {
var prevVal = ($('#total').html() !== '') ? $('#total').html() : 0;
if(parseInt($(this).val()) === NaN) {
return;
}
$('#total').html(parseInt($(this).val()) + parseInt(prevVal));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="1"></input><br>
<input type="text" id="2"></input><br>
<hr>
Total = <span id="total" class="qty12lable"></span> <br>
Users will only be able to click the submit button if users select a video file and the textbox is not empty. i can disable the submit button but i cant re-enable it
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="file"><span></span></label>
<input type="file" name="videofile" id="videofile" />
<br/>
Please enter video title:
<br/>
<input type"text" name="videoTitle" />
<br />
<input type="button" disabled id="Submit" value="Submit" onclick="submit()"/>
</form>
<script>
document.getElementById('submit').disabled = true;
var n=document.getElementById('videoTitle').value;
function submit();
if($('#videofile')[0].files.length != 0) && (n.length > 1)
{
document.getElementById('submit').disabled = false;
}
</script>
Your code had a lot of mistakes. This is your corrected code:
function check() {
if (document.querySelector('#videofile').files.length != 0 && (document.getElementById("videoTitle").value.length > 1)) {
document.getElementById('Submit').disabled = false;
} else {
document.getElementById('Submit').disabled = true;
}
}
Here is the JSFiddle demo
Missing ID added (u added only name attribute, and forgot the ID while still trying to use them)
Changed 'submit' in code to 'Submit'
Remove JQuery $ syntax
Validation on keypress rather than on submit click (which doesn't makes sense since u cant click the button while its disabled)
Else code added to re-disable the button if conditions are not valid
onclick event over submit button does not make sense here. You must listen change event of the file input and keyup event of the text input and apply conditions accordingly. You have not assigned id attribute as well(videoTitle)
Also note that click handler will not be invoked if the button is disabled
Try this:
var submitBtn = document.getElementById('Submit');
function enableDisable() {
var elem = document.getElementById('videofile');
var n = document.getElementById('videoTitle').value;
if (elem.files.length && n) {
submitBtn.disabled = false;
} else {
submitBtn.disabled = true;
}
}
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="file"><span></span></label>
<input type="file" name="videofile" id="videofile" onchange='enableDisable()' />
<br/> Please enter video title:
<br/>
<input type="text" name="videoTitle" id='videoTitle' onkeyup='enableDisable()' />
<br />
<input type="button" disabled id="Submit" value="Submit" />
</form>
Can you try to make your submit function do something?
function submit() {
if($('#videofile')[0].files.length != 0) && (n.length > 1) {
document.getElementById('submit').disabled = false;
}
};
you should use change event for text and videofile elements. So that whenever you modify something, change event is triggered and ur condition is checked inside it. Submit button is enable according to it.
Se the below code for reference!
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="file"><span></span></label>
<input type="file" name="videofile" id="videofile" />
<br/>
Please enter video title:
<br/>
<input type"text" name="videoTitle" id="videoText"/>
<br />
<input type="button" disabled id="Submit" value="Submit" onclick="submit()"/>
</form>
<script>
document.getElementById('submit').disabled = true;
var n=document.getElementById('videoTitle').value;
function submit();
$('#videofile').change(function() {
if($('#videofile')[0].files.length != 0) && (n.length > 1) {
document.getElementById('submit').disabled = false;
} else {
document.getElementById('submit').disabled = true;
}
});
$('#videoText').change(function() {
if($('#videofile')[0].files.length != 0) && (n.length > 1) {
document.getElementById('submit').disabled = false;
} else {
document.getElementById('submit').disabled = true;
}
});
</script>
I feel this is a bit simpler way to achieve this
<script>
document.getElementById("submit").style.pointerEvents = "none"; //Disable
var n=document.getElementById('videoTitle').value;
function submit();
if($('#videofile')[0].files.length != 0) && (n.length > 1)
{
document.getElementById("submit").style.pointerEvents = "all"; //Enable
}
</script>
Just replace your script with this one & try..
Hope this works for you..
My form is loaded with different input fields like radio button , text field ,numeric field which are generated dynamically while iterating through a list.
<c:forEach var="Item" items="${listBean.nameList}" varStatus="status">
<input type="number"name="nameList<c:outvalue='[${status.index}]'/>.initialWeight" onchange="checkOnChange(this,'<c:out value='${Item.personId}'/>','<c:out value='${Item.minWeight}'/>','<c:out value='${Item.maxWeight}'/>','<c:out value='[${status.index}]'/>')">
<br><br>
<input type="number" name="nameList<c:out value='[${status.index}]'/>.finalWeight" onchange="checkOnChange(this,'<c:out value='${Item.personId}'/>','<c:out value='${Item.minWeight}'/>','<c:out value='${Item.maxWeight}'/>','<c:out value='[${status.index}]'/>')">
<br><br>
<input type="text" class="formtext" name="nameList<c:out value='[${status.index}]'/>.Reason" id ="reason<c:out value='[${status.index}]'/>" value="" maxlength="255" >
<br><br>
<input type="submit" value="submit" id="submit" />
</c:forEach>
The numeric fields will be validated against minimum and maximum values.if any of the numeric fields fails in the validation , submit button needs to be disabled .
JSFIDDLE
Any ways to achieve this using jquery or javascript?
Thanks for your valuable time and suggestions
Give IDs to your inputs and then use jQuery's .change() function.
Example:
HTML
<input id="test" type="number"/>
<input id="test2" type="number"/>
<input id="submit" type="submit" value="Submit"/>
JS
var testVal = $('#test'),
testVal2 = $('#test2'),
submit = $('#submit'),
minVal = 22,
maxVal = 33;
testVal.change(function() {
if((testVal.val() > maxVal || testVal.val() < minVal) ||
(testVal2.val() > maxVal || testVal.val() < minVal)) {
submit.prop('disabled', true);
} else {
submit.prop('disabled', false);
}
});
jsfiddle
So, you could do something like below.
var flag = true;
if (nameVal > maxVal) {
alert(id + ' Enter the reason before proceeding');
//var reason = nameList[index].Reason;
document.getElementbyId("reason" + index).focus();
flag = false;
}
if (itemVal < minVal) {
alert(id + ' Enter the reason before proceeding');
//var reason = nameList[index].Reason;
document.getElementbyId("reason" + index).focus();
flag = false;
}
document.getElementById("submit").disabled = !flag;
return flag;
I have been at this for two days and hope you can help.
I have a form with eight text input fields and three checkboxes. Here is the HTML for said form:
<form name="sampleText" id="sample-text">
<input type="text" readonly="readonly" this-elem="h1" class="textStyleSamples" id="h1Sample" value="Level-1 Header Sample" />
<input type="text" readonly="readonly" this-elem="h2" class="textStyleSamples" id="h2Sample" value="Level-2 Header Sample" />
<input type="text" readonly="readonly" this-elem="h3" class="textStyleSamples" id="h3Sample" value="Level-3 Header Sample" />
<input type="text" readonly="readonly" this-elem="h4" class="textStyleSamples" id="h4Sample" value="Level-4 Header Sample" />
<input type="text" readonly="readonly" this-elem="pageText" class="textStyleSamples" id="pageTextSample" value="Page Text Sample" />
<br />
<input type="text" readonly="readonly" this-elem="aLink" class="textStyleSamples linkSamples" id="aLinkSample" value="Normal Link Sample" />
<br />
<input type="text" readonly="readonly" this-elem="aVisited" class="textStyleSamples linkSamples" id="aVisitedSample" value="Visited Link Sample" />
<br />
<input type="text" readonly="readonly" this-elem="aHover" class="textStyleSamples linkSamples" id="aHoverSample" value="Hovered Link Sample" />
<br />
<input class="ubem" id="underline" type="checkbox" /><u>Underline</u>
<input class="ubem" id="bold" type="checkbox" /><b>Bold</b>
<input class="ubem" id="italic" type="checkbox" /><em>Italic</em>
</form>
I am trying to change the CSS of the input fields depending on whether or not the checkboxes are clicked. After that, I want to get the the new CSS for text-decoration, font-weight, and font-style and put these values into an array, where each of the 8 inputs has its own array.
Underline, bold, and italic are supposed to just be true or false.
I was able to get the text to change just fine after checking or unchecking the boxes, but when I tried to retrieve the new styles, I used console.log() and wasn't getting the correct values. Here is the jQuery I tried. I think I need an entirely new approach.
The way I had it set up initially was to enable the user to click on the checkbox, say, for underline, and then click on each input to change it to having underlined text. This did work, and I'd like to try to keep it this way, if possible. It was just the retrieval of newly-changed styles I was having issues with. I know there's a more elegant way of doing this, so any help I can get is much appreciated.
var thisElem = $(".textStyleSamples").attr("this-elem");
var sample = "Sample";
$(".ubem").change(function() {
$(".textStyleSamples").each(function() {
$("#" + thisElem + sample).on("click", function() {
if ($("#underline").prop("checked")) {
$(this).css("text-decoration", "underline");
} else {
$(this).css("text-decoration", "none");
}
if ($("#bold").prop("checked")) {
$(this).css("font-weight", "bold");
} else {
$(this).css("font-weight", "normal");
}
if ($("#italic").prop("checked")) {
$(this).css("font-style", "italic");
} else {
$(this).css("font-style", "normal");
}
});
});
});
var textElem = ["h1", "h2", "h3", "h4", "pageText", "aLink", "aVisited", "aHover"];
var isUnderlined = false;
var isBold = false;
var isItalic = false;
var styleArray = new Array(8);
$("#get_styles").on("click", function() {
for (var i = 0; i < 8; i++) {
var cssPropUnderline = $("#" + textElem[i] + sample).css('text-decoration');
if (cssPropUnderline.indexOf('underline') != -1) {
isUnderlined = true;
}
var cssPropBold = $("#" + textElem[i] + sample).css('font-weight');
if (cssPropBold.indexOf('bold') != -1) {
isBold = true;
}
var cssPropItalic = $("#" + textElem[i] + sample).css('font-style');
if(cssPropItalic.indexOf('italic') != -1) {
isItalic = true;
}
styleArray[i] = [textElem[i] + sample, isUnderlined, isBold, isItalic];
}
});