Develop Reference

How to change <td> value only in a specific row with jQuery?

If I have a table with 2 columns, a textfield and a checkbox... Each column has a class, and multiple rows in it. I don't know how to work this out:
If the textfield's number larger than 10, that row's checkbox automatically change from unchecked to checked.
Any ideas?

ok .. you can get the value of the input .. and in every keystroke check if the entered number is greater than 10 then loop through all the checkboxes and check them like that
$(".textfield").on("input", function () {
if (+$(this).val() > 10) {
$(".checkboxes").prop("checked", true)
} else {
$(".checkboxes").prop("checked", false)
}
})
you can try this and tell me if something went wrong
note : I added (+) before the $(this).val() to make sure the value is converted from string to number
edit: if you want to make an input for every row so this will not work!
you can make a specific class for every row and put the same class as a data attr in every input .. and then you can directly access to the input specific row checkboxes like that
$(".textfields").on("input", function () {
if (+$(this).val() > 10) {
$(`.${$(this).attr("data-id")} > td >
checkboxes`).prop("checked", true)
} else {
$(`.${$(this).attr("data-id")} > td >
checkboxes`).prop("checked", false)
}
})
I hope this works .. I know It's a little bit confusing .. by understanding the main idea you solve it with multible solutions
If you can't understand this let me know

$('.input').on('blur', function() {
if(parseInt($(this).val()) > 10){
$(this).parent().closest('tr').find('.checkbox').attr("checked","checked");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
</table>
You need use blur of jQuery, it means when the user looses the focus from input/textfield then implement the functionality of checkbox to be checked, this is for single input and checkbox, if you want to achieve it for multiple row with column then see the above snippet.
$('#input_field').on('blur', function() {
if(parseInt($(this).val()) > 10){
$('#checkbox').attr("checked","checked");
}
});

Default OnChange Event JavaScript function to check input field is Number or Letter for all the input number fields

I have around 30 input fields which take a number as input. Is there any way to write a single default OnChange event JavaScript function for all the number input fields instead of writing 30 JavaScript functions to check whether the entered input is a number or text? and If the input is NaN I need to add the red colored border to that input field. Thank you. Sorry for not adding the code for the first time.
HTML Code
<tr>
<td>
Fund1:<input type="text" class="" name="FundAmount1" id="Fund1" onchange="ValidateIsNaN()" />
</td>
<td>
Fund2:<input type="text" class="" name="FundAmount2" id="Fund2" />
</td>
<td>
Fund3:<input type="text" class="" name="FundAmount3" id="Fund3"/>
</td>
<td>
Fund4:<input type="text" class="" name="FundAmount4" id="Fund4"/>
</td>
<td>
Fund5:<input type="text" class="" name="FundAmount5" id="Fund5" />
</td>
.
.
.
Total:<input type="text" class="" name="Total" id="TotalId" />
</tr>
JavaScript Code
<script type="text/javascript">
function ValidateIsNaN(){
var inputValue = document.getElementByName('Fund1').value;
if (isNaN(inputValue ))
{
$("Fund1").addClass("redColorBorderCSS");
alert("Enter number only")
return false;
}
}
</script>

You can certainly test for numbers in a lot of different ways.
Use the <input type="number"> HTML element
In your onChange event you can var result = parseInt(value, 10) or var result = parseFloat(value, 10) and test with isNaN(result)
You can write a regular expression to validate the input value /^[0-9]+$/ or /^[0-9]+(\.[0-9]+)?$/

HTML checkbox validation breaks when there are multiple checkboxes in the form

In the form below, how to ignore the disabled checkbox. The expected behavior in the form is that if the user does not check the Model check box and click on the submit button, form should be submitted. If the Model checkbox is checked, user must enter data. This behavior works as long as there is no other checkbox on the page. If there is another checkbox, and the submit button is clicked without checking the Model checkbox, alert is thrown. How can I ignore the other checkboxes in the form to achieve the desired behavior? Thanks!
$(document).ready(function () {
$('#checkModelBtn').click(function() {
var isCheckboxChecked = $("input[type=checkbox]:checked").length;
var isTextEntered = $("input.childModel").val().length;
if ( isTextEntered || !isCheckboxChecked ) {
//alert("validation passed!");
} else {
alert("Please enter the Model Number");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td>
<p><h2>MODEL:</h2></p>
<input type="checkbox"> Model #
<input type="text" size="12" class="childModel"><BR>
</td>
<td>
THIS CHECKBOX BREAKS THE FUNCTIONALITY<p>
<input type="checkbox" checked disabled> Some text here</td>
</tr>
</table>
<hr>
<input type="submit" name="submit" value="submit" id="checkModelBtn"/>

The checkbox needs to have a unique selector.
$(document).ready(function () {
$('#checkModelBtn').click(function() {
var isCheckboxChecked = $("input[name='model_number']:checked").length;
var isTextEntered = $("input.childModel").val().length;
if ( isTextEntered || !isCheckboxChecked ) {
//alert("validation passed!");
} else {
alert("Please enter the Model Number");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td>
<p><h2>MODEL:</h2></p>
<input type="checkbox" name="model_number"> Model #
<input type="text" size="12" class="childModel"><BR>
</td>
<td>
THIS CHECKBOX BREAKS THE FUNCTIONALITY<p>
<input type="checkbox" checked disabled> Some text here</td>
</tr>
</table>
<hr>
<input type="submit" name="submit" value="submit" id="checkModelBtn"/>

To ignore the checkbox you don't want to validate you need a way to ignore it in your validation, and you can do that by using the input field. Change the selector for your checkbox from $("input[type=checkbox]:checked") to $(".childModel").prev("input[type=checkbox]:checked")
Example:
$(document).ready(function() {
$('#checkModelBtn').click(function() {
var isCheckboxChecked = $(".childModel").prev("input[type=checkbox]:checked").length;
var isTextEntered = $("input.childModel").val().length;
if (isTextEntered || !isCheckboxChecked) {
//alert("validation passed!");
} else {
alert("Please enter the Model Number");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td>
<p>
<h2>MODEL:</h2>
</p>
<input type="checkbox"> Model #
<input type="text" size="12" class="childModel">
<BR>
</td>
<td>
THIS CHECKBOX BREAKS THE FUNCTIONALITY
<p>
<input type="checkbox" checked disabled> Some text here</td>
</tr>
</table>
<hr>
<input type="submit" name="submit" value="submit" id="checkModelBtn" />

How to restrict button unless text boxes have text

I am wanting to prevent my submit buttons from being selected untill the user has entered text into my text box feilds.. I have looked into Jquery but am not sure how to apply it to my situations.
if you look at the code below I have a table, this is a section where I can add values to a table in my BD I have 3 other different tables similar but not the same each with their own submit buttons i want to restrict also but off their own text boxes not the others from the different tables...
how could I achive this?
heres one of the tables I have created.
<table width="600">
<tr>
<td width="15%">
<b>name:</b>
<div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
<input type="text" name="5050gdproductname" />
<span>Enter Text </br>i.e. <i>Super Small</i></span>
</div>
</td>
<td width="15%">
<b>width:</b>
<div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
<input type="text" name="5050gdproductwidth" />
<span>Enter a Number </br>i.e. <i>1000</i></span>
</div>
</td>
<td width="15%">
<b>height:</b>
<div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
<input type="text" name="5050gdproductheight" />
<span>Enter a Number </br>i.e. <i>1000</i></span>
</div>
</td>
<td width="15%">
<b>normal fill:</b>
<div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
<input type="text" name="5050gdnormalfill" />
<span>Enter a Number </br>i.e. <i>1000</i></span>
</div>
</td>
<td width="15%">
<b>our fill:</b>
<div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
<input type="text" name="5050gdourfill" />
<span>Enter a Number </br>i.e. <i>1000</i></span>
</div>
</td>
<td width="15%">
<b>old price:</b>
<div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
<input type="text" name="5050gdoldprice" />
<span>Enter Dollar Amount </br>i.e. <i>150.99</i></br>no dollar sign requiered</span>
</div>
</td>
<td width="15%">
<b>new price:</b>
<div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
<input type="text" name="5050gdnewprice" />
<span>Enter Dollar Amount </br>i.e. <i>150.99</i></br>no dollar sign requiered</span>
</div>
</td>
<td>
</br><input type="submit" name="submit5050gd" value="Submit 5050gd" id="5050gdmyButton" />
</td>
</tr>
</table>
any help would be appreciated

Here is the fiddle link for your assistance:
http://jsfiddle.net/4JyLk/
handle in Button click event
If all text boxes are given values, proceed with submission else don't.
Use the link provided for live demo.
Note: You can edit this code, to disable/enable.

$('input[type=text]')​.keyup(function(){
if(($('input[name=5050gdproductname]').val()=="")||($('input[name=5050gdproductwidth]').val()=="")||($('input[name=5050gdproductheight]').val()=="")||($('input[name=5050gdnormalfill]').val()=="")||($('input[name=5050gdourfill]').val()=="")||($('input[name=5050gdoldprice]').val()=="")||($('input[name=5050gdnewprice]').val()==""))
{
$('input[name=submit5050gd]').attr('disabled', 'disabled');
}else{
$('input[name=submit5050gd]').removeAttr('disabled');
}
});​​​​
<input type="submit" name="submit5050gd" value="Submit 5050gd" id="5050gdmyButton" disabled="disabled"/>
jsFiddle

Try the following code
//On document load
$(function(){
//Set button disabled
$("input[type=submit]").attr("disabled", "disabled");
//Append a change event listener to you inputs
$('input').change(function(){
//Validate your form here, example:
var validated = true;
if($('#5050gdnormalfill').val().length === 0) validated = false;
//do validation for all field as above, add id field for every element
//If form is validated enable form
if(validated) $("input[type=submit]").removeAttr("disabled");
});
})

Lots of answers, all confusing to me. Far better to validate the form when it's sumbitted and don't do things like disable the submit button. If you want all the text inputs to have text, then:
function validate(form) {
var el, elements = form.elements;
for (var i=0, iLen=elements.length; i<iLen; i++) {
el = elements[i];
if (el.tagName.toLowerCase == 'input' && el.type == 'text') {
if (el.value == '') {
// Deal with error, e.g. show message
// Stop form submitting
return false;
}
}
}
}
And in the form:
<form ... onsubmit="return validate(this);" ...>
You can also put a listener for change or keyup events on every text input, then run the above code and disable the submit button, so instead of return false you'd do:
form.submit5050gd.disabled = true;
to disable the button or:
form.submit5050gd.disabled = false;
to enable it. But that's a bit tiresom and users tend to not understand disabled controls. Much better to just let them know they have to put something in each input and validate when they submit the form.

Do this.
<input type="submit" name="submit5050gd" value="Submit 5050gd" id="5050gdmyButton" disabled='disabled" />
On the last text box use the blur event of javascript to validate your condition.
Try this.
var isBlank = false;
$('input[type="text"]').blur(function(){
$("#YourTableID").find('input[type="text"]').each(function(){
if($(this).val() != ''){
isBlank = true;
return false;
}
});
if(!isBlank){
$('input[type="submit"]').removeAttr('disabled');
}
});

Validate form with Javascript

I am trying to get a validation process to work using Javascript, my form has four radio buttons and one submit button, and I wanted to make it so if the user clicks submit and no radio buttons are selected then it pops up an alert and doesn't submit the form. Here's what my form looks like:
<form method="post" name="inform">
If you checked off <span style="text-decoration:underline">any</span> problems, how <span style="text-decoration:underline">difficult</span> have these problems made it for you to do your work take care of things at home or get along with other people?
<table id="lastquestion">
<tr>
<td>Not difficult at all</td>
<td>Somewhat difficult</td>
<td>Very difficult</td>
<td>Extremely Difficult</td>
</tr><tr>
<td style="text-align:center"><input type="radio" value="not difficult at all" name="finalquestion" /></td>
<td style="text-align:center"><input type="radio" value="somewhat difficult" name="finalquestion" /></td>
<td style="text-align:center"><input type="radio" value="very difficult" name="finalquestion" /></td>
<td style="text-align:center"><input type="radio" value="extremely difficult" name="finalquestion" /></td>
</tr>
</table>
<input type="hidden" value="<?php echo $totalScore; ?>" name="totalScore" />
<input type="submit" value="Submit Final Answer" name="submit" onclick="return validate(inform)" />
</form>
And here's what the script looks like:
function validate(formCheck)
{
if(formCheck.finalquestion == "")
{
alert("Please Choose an option");
return false;
}
else
{
return true;
}
}
But for some reason my button is submitting no matter what, Any advice here would help, thank you!
UPDATE: I have tried selecting a radio and then alerting in the validate function and formCheck.finalquestion prints: [object NodeList], so I don't think the value of which button is selected is going through properly.

You are relying on naming behaviour that works only in IE: Only that browser provides a global Javascript variable xyz (or, to be more exact, window.xyz) for each element with that name.
To specify the form, use submit button's form attribute. It is always a reference to the form object:
return validate(this.form);
To get the element of a radio button, you need to specify the value attribute. Use
if(formCheck.elements.finalquestion.value == "")