How to apply for work on IE7 , 8
for test, fill 1 into input and then press button , input will change border to red and return false.
But ie7 8 not work all.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form onsubmit="return checkform(this);">
<div>
<p>
<label>
<input type="text" class="price" size="20" name="price[]">
</label>
</p>
</div>
<div>
<p>
<label>
<input type="text" class="price" size="20" name="price[]">
</label>
</p>
</div>
<div>
<p>
<label>
<input type="text" class="price" size="20" name="price[]">
</label>
</p>
</div>
<input type="submit" name="submit" value="OK">
</form>
<script language="JavaScript" type="text/javascript">
function checkform ( form )
{
var list = document.querySelectorAll(".price");
var z;
var input;
var isValid = true;
var value;
// Loop through the list
for (z = 0; z < list.length; ++z) {
console.log("z = " + z);
// Get this input
input = list[z];
// Check its value
if (input.value != "" && parseInt(input.value, 10) < 1.5) {
input.style.border = "1px solid red";
isValid = false;
}
else {
input.style.border = "1px solid #d5d5c5";
}
}
// Return result
return isValid;
}
</script>
querySelectorAll is an HTML5 DOM API, IE7, 8 are not ready for it.
See this page for more info.
Alternatively, since you are using jquery, you can use $(".price") instead.
Related
I need to add a message box and e-mail textbox and display everything in my form in the 'msgresults' tag.
I need to add a Message box and and e-mail text box. Then I need all information to be shown within the MsgResults tag. The radioboxes already are shown this way.
function validateForm(){
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
if (name == "" || name == null){
resultsMsg("We need your name please");
}else{
if(age == "" || name == null || isNaN(age)){
resultsMsg("Please enter a number for your age");
}else{
if(!getSkill()){
resultsMsg("Please select the type of problem you are having.");
}else{
resultsMsg("Type of Problem: " + getSkill());
}//end else
}// end function
}
}
function getSkill(){
var isChecked = false;
var theSelection;
var skills = document.getElementsByName('skillset');
for (var i=0; i < skills.length; i++){
if(skills[i].checked){
isChecked = true;
theSelection = skills[i].value;
break;
}
}
if(isChecked){
return theSelection;
}else{
return false;
} // end else
} // end function
function resultsMsg(s){
var resultsBox = document.getElementById("results");
resultsBox.innerHTML=s;
} // end function
<form name="form1" id="form1" action="" method="post">
<label>Full Name:
<input type="text" id="name" name="name">
</label>
<br> <!-- new line here -->
<label>Your Age:
<input type="text" id="age" name="age">
</label>
<br> <!-- new line here -->
<input type="radio" name="skillset" value="Technical Issues">Technical Issues</br>
<input type="radio" name="skillset" value="Recovery Issues">Recovery Issues</br>
<input type="radio" name="skillset" value="Hardware Issues">Hardware Issues</br>
<input type="radio" name="skillset" value="Software Issues">Software Issues</br>
<input type="radio" name="skillset" value="Software Crashes">Software Crashes</br>
<input type="radio" name="skillset" value="Hardware Malfunctions">Hardware Malfunctions</br>
<input type="radio" name="skillset" value="General Problems">General Problems</br>
<input type="button" value="Submit" onClick="validateForm();"> <input type="reset" value="Clear Form">
</form>
<div id="results"></div>
If I understand your goal correctly, you want to add the given name and age to the result-div, on top of the 'Type of Problem' that is already show. That can be easily achieved by adding the correct variables to the last else-loop in your validateForm function. Something among the following should probably work:
resultsMsg("Name: "+name+ "<br>Age: " +age+ "<br>Type of Problem: " + getSkill());
Hi I want use this script to count char in form with many fields,
but not want duplicate code, I want use only one code for all fields,
how can pass to javascript name fields count and display this count...
As one counter for many fields input type...
thanks
Salvatore
<script>
function countChar(val) {
var len = val.value.length;
if (len >= 66) {
val.value = val.value.substring(0, 66);
} else {
$('#charNum').text(65 - len);
}
};
</script>
<div id="charNum"></div>
<input type="text" name="name_var1" value="" maxlength="66" onkeyup="countChar(this)" />
<div id="charNum"></div>
<input type="text" name="name_var2" value="" maxlength="66" onkeyup="countChar(this)" />
<div id="charNum"></div>
<input type="text" name="name_var3" value="" maxlength="66" onkeyup="countChar(this)" />
the problem is that you are using ids several times. Try to work with classes and generate the selectors from the class name of the element.
<script>
function countChar(val) {
var len = val.value.length;
if (len >= 66) {
val.value = val.value.substring(0, 66);
} else {
$('.' + val.className + '_charNum').text(65 - len);
}
};
</script>
<div class="name_var1_charNum"></div>
<input class="name_var1" type="text" name="name_var1" value="" maxlength="66" onkeyup="countChar(this)" />
<div class="name_var2_charNum"></div>
<input class="name_var2" type="text" name="name_var2" value="" maxlength="66" onkeyup="countChar(this)" />
<div class="name_var3_charNum"></div>
<input class="name_var3" type="text" name="name_var3" value="" maxlength="66" onkeyup="countChar(this)" />
As far as I understood you do need to display characters left value for each field (depending on max-length) and restrict user from adding extra characters (more than allowed limit). Probably that's what you need.
<div class="countable-item">
<div class="char-num"></div>
<input type="text" name="any" class="countable" max-length="66" />
</div>
<div class="countable-item">
<div class="char-num"></div>
<input type="text" name="any2" class="countable" max-length="66" />
</div>
<script>
(function($){
var restrictMaxLength = function () {
var maxLength = $(this).attr('max-length'),
currentValue = $(this).val(),
currentLength = currentValue.length;
if (currentLength >= maxLength) {
return false;
}
},
displayCountCharacters = function () {
var maxLength = $(this).attr('max-length'),
currentValue = $(this).val(),
currentLength = currentValue.length;
$(this).closest('.countable-item')
.find('.char-num')
.text(maxLength - currentLength);
};
$(document)
.on('keypress', '.countable', restrictMaxLength)
.on('keyup', '.countable', displayCountCharacters);
})(jQuery);
</script>
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>
I have a site I'm working on where I have made a javascript calculator and I need all 3 forms in the page to round to 2. I have used toFixed(2) on my first form. The other 2 forms still display all decimal points even though I have used .toFixed(2) on them. Any ideas
<script type="text/Javascript">
// Begin calculations
function resetCalc() {
document.forms[0].elements[1]="";
}
function calcRect() {
if(validNumber(document.getElementById('length'), 'length') == true) {
if(validNumber(document.getElementById('width'), 'width') == true) {
var length = (document.getElementById('length').value)
var width = (document.getElementById('width').value)
var prodRect = ( length * width / 9 ) .toFixed(2)
document.getElementById('ansRect').value = prodRect
}
}
}
function calcCirc() {
if(validNumber(document.getElementById('diameter'), 'diameter') == true) {
var diameter = (document.getElementById('diameter').value)
var prodCirc = (diameter / 2) * (diameter / 2) * 3.14 /9 .toFixed(2)
document.getElementById('ansCirc').value = prodCirc
}
}
function calcTria() {
if(validNumber(document.getElementById('base'), 'base') == true) {
if(validNumber(document.getElementById('height'), 'height') == true) {
var base = (document.getElementById('base').value)
var height = (document.getElementById('height').value)
var prodTria = (base * .5) * height / 9 .toFixed(2)
document.getElementById('ansTria').value = prodTria
}
}
}
// End Calculations
// BEGIN Validate Values entered
//Requires field that contians value being evaluated
function validNumber(varInput, fieldName) {
if (varInput.value == null) {
alert('Please enter a value for the ' + fieldName + ' field');
varInput.focus();
return false;
}
if (IsNumeric(varInput.value) == false) {
alert('Please enter only numbers or decimal points in the ' + fieldName + ' field');
varInput.focus();
return false;
}
return true;
}
// END Validation
// check for valid numeric strings
function IsNumeric(strString) {
var strValidChars = "0123456789.";
var strChar;
var blnResult = true;
if (strString.length == 0) return false;
// test strString consists of valid characters listed above
for (i = 0; i < strString.length && blnResult == true; i++)
{
strChar = strString.charAt(i);
if (strValidChars.indexOf(strChar) == -1)
{
blnResult = false;
}
}
return blnResult;
}
//
</script>
And the html
<form name="sodCalc" id="formEnquire" action="">
<div id="ctl00_body_sodCalc1_validationSummarySodCalc" style="color:Red;display:none;"> </div>
<p><strong>For a rectangular shaped area</strong></p>
<p>
<label>Length</label>
<input name="length" id="length" type="text" tabindex="1" />
<label>Width</label>
<input name="width" id="width" type="text" tabindex="1" />
<label>Result</label>
<input type="text" value="0" name="ansRect" id="ansRect" />
<br class="clear"/>
<input type="button" value="Calculate" onclick="calcRect()" name="btnRect" id="btnRect" />
<input type="reset" value="Reset" onclick="resetCalc()" name="reset" id="reset" />
</p>
</form>
<form name="sodCalc" id="formEnquire" action="">
<div id="ctl00_body_sodCalc1_validationSummarySodCalc" style="color:Red;display:none;"> </div>
<p><strong>For a circle area </strong></p>
<p>
<label>Diameter Of Circle</label>
<input name="diameter" id="diameter" type="text" tabindex="1" />
<label>Result</label>
<input type="text" size="6" value="0" name="ansCirc" id="ansCirc" />
<br class="clear"/>
<input type="button" value="Calculate" onclick="calcCirc()" name="btnCirc" id="btnCirc" />
<input type="reset" value="Reset" onclick="resetCalc()" name="reset" id="reset" />
` </p>
</form>
<form name="sodCalc" id="formEnquire" action="">
<div id="ctl00_body_sodCalc1_validationSummarySodCalc" style="color:Red;display:none;"> </div>
<p><strong>For a triangle area </strong></p>
<p>
<label>Base</label>
<input name="base" id="base" type="text" tabindex="1" />
<label>Height</label>
<input name="height" id="height" type="text" tabindex="1" />
<label>Result</label>
<input type="text" size="6" value="0" name="ansTria" id="ansTria" />
<br class="clear"/>
<input type="button" value="Calculate" onclick="calcTria()" name="btnTria" id="btnTria" />
<input type="reset" value="Reset" onclick="resetCalc()" name="reset" id="reset" />
</p>
</form>
You need to parenthesize the expressions in the second two functions like you did in the first one:
var prodTria = ( (base * .5) * height / 9 ).toFixed(2)
Without the extra parentheses, all that was being converted in that one was the 9.
i have some code that works for a password form where the user is filling out their details and then 2 of the boxes only work or become typable if they enter a number/age greater than that specified. i now want to take it one step further and make it obvious to the user that those boxes are only editable certain times by colouring them in a different colour. for some reason though the new code within the JS is not working.
code is below:
<div class="container">
<div class="jumbotron" id="firstform">
<h1>Sign up page</h1>
<form id="myform">
<label>Username </label> <input type="text" name="uname" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip"><br>
<div class="pwordCheck">
<label>Password </label> <input type="password" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
<label>Confirm Password </label> <input type="password" id="confpword" onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip">
<span id="themessage" class="themessage"></span><br>
</div>
<label>Email </label> <input type="email" id="e-mail"><br>
<label>Age </label> <input type="number" id="age" oninput="ifOfAge(); return false;"><br>
<label>Can you drive? </label> <input type="text" id="drive" disabled><br>
<label>What is your occupation? </label> <input type="text" id="occupation" disabled><br>
<input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;">
</form>
</div>
</div>
css:
input#drive{
background-color: #999;
}
input#occupation{
background-color: #999;
}
js:
function ifOfAge() {
var age = document.getElementById("age");
var drive = document.getElementById("drive");
var occupation = document.getElementById("occupation");
var white = "#fff";
if (age.value >= 21) {
drive.disabled = false;
occupation.disabled = false;
} else if (age.value >= 16) {
drive.disabled = false;
occupation.style.backgroundColor = white;
} else {
drive.disabled = true;
occupation.disabled = true;
drive.style.backgroundColor = white;
occupation.style.backgroundColor = white;
}
}
Color must be enclosed within quotes. Like below. Wherever you have used white surround it with quotes
drive.style.backgroundColor = "white";
you can make change color for disabled input like this.
EDIT
function ifOfAge() {
var age = document.getElementById("age");
var drive = document.getElementById("drive");
var occupation = document.getElementById("occupation");
var white = "#fff";
if (age.value >= 21) {
drive.disabled = false;
occupation.disabled = false;
} else if (age.value >= 16) {
drive.disabled = false;
occupation.style.backgroundColor = white;
} else {
drive.disabled = true;
occupation.disabled = true;
drive.style.backgroundColor = "#999";
occupation.style.backgroundColor = "#999";
}
}
You can make it more nice if you used jQuery and plugin jQuery Validation or even more nice with this one.