How I can put the required fields in my Js code
I set required = true in xml view but it does blocker all the form
how to add required for the js code jQuery
this my code jQuery :
// table course
jQuery(document).ready(function() {
var id = 0;
var cr = 0;
jQuery("#addcourserow").click(function() {
id++;
var row = jQuery('.courserow tr').clone(true);
var c = 1;
row.find("input").each(function(){
if (c === 1) {
$(this).attr('name','course_name_'+id);
}
else if (c === 2) {
$(this).attr('name','course_duration_'+id);
}
else if (c === 3) {
$(this).attr('name','course_date_'+id);
}
c++;
});
row.appendTo('#CourseTable');
return false;
});
$('.remove').on("click", function() {
$(this).parents("tr").remove();
});
});
and this my XML
<!-- Course -->
<table id="CourseTable">
<thead>
<th>name</th>
<th>duration</th>
<th>date</th>
</thead>
<tr id="tr_course">
<td><input type="text" name="course_name_1" id="course_name"/></td>
<td><input type="text" name="course_duration_1" id="course_duration"/></td>
<td><input type="date" name="course_date_1" id="course_date" /></td>
<td><button class="remove">Remove</button></td>
</tr>
</table>
<input type="button" id="addcourserow" value="add row" />
<table class="courserow" style="display:none">
<tr>
<td><input type="text" id="course_name" /></td>
<td><input type="text" id="course_duration"/></td>
<td><input type="date" id="course_date"/></td>
<td><button class="remove">Remove</button></td>
</tr>
</table>
</div>
I added here in codepen
Please consider the following code.
$(function() {
var id = 0;
var cr = 0;
var names = [
"course_name",
"course_duration",
"course_date"
];
$("#addcourserow").click(function() {
var row = $('#course-row-template tr').clone(true);
id++;
var c = 0;
row.find("input").each(function() {
var inpId = $(this).attr("id") + "_" + id;
$(this).attr({
id: inpId,
name: names[c++] + "_" + id
}).prop("required", true);
console.log($(this));
});
row.appendTo('#CourseTable');
return false;
});
$('.remove').on("click", function() {
$(this).parents("tr").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<table id="CourseTable">
<thead>
<th>name</th>
<th>duration</th>
<th>date</th>
</thead>
<tr id="tr_course">
<td><input type="text" id="course_name_0" /></td>
<td><input type="text" id="course_duration_0" /></td>
<td><input type="date" id="course_date_0" /></td>
<td><button class="remove">Remove</button></td>
</tr>
</table>
<input type="button" id="addcourserow" value="Add New Row" />
<table id="course-row-template" style="display:none">
<tr>
<td><input type="text" id="course_name" /></td>
<td><input type="text" id="course_duration" /></td>
<td><input type="date" id="course_date" /></td>
<td><button class="remove">Remove</button></td>
</tr>
</table>
This will ensure that each <input> has a unique ID and name. It also adds the required property to each of them.
Hope that helps.
i find answer
jQuery(document).ready(function() {
var id = 0;
jQuery("#addcourserow").click(function() {
id++;
var row = jQuery('.courserow tr').clone(true);
var c = 1;
row.find("input").each(function(){
if (c === 1) {
$(this).attr('name','course_name_'+id).prop("required", true);
}
else if (c === 2) {
$(this).attr('name','course_duration_'+id).prop("required", true);
}
else if (c === 3) {
$(this).attr('name','course_date_'+id).prop("required", true);
}
c++;
});
row.appendTo('#CourseTable');
return false;
});
$('.remove').on("click", function() {
$(this).parents("tr").remove();
});
});
and i add required in my Xml
<table id="CourseTable">
<thead>
<th>name</th>
<th>duration</th>
<th>date</th>
</thead>
<tr id="tr_course">
<td><input type="text" name="course_name_1" id="course_name" required="required"/></td>
<td><input type="text" name="course_duration_1" id="course_duration" required="required"/></td>
<td><input type="date" name="course_date_1" id="course_date" required="required"/></td>
<td><button class="remove">Remove</button></td>
</tr>
</table>
Related
I want to disable submit button if there is any empty field in class element.
$(document).ready(function (){
fees = [];
$('#button').attr('disabled',true);
});
function submitButton() {
// var fees = $('.fee').val();
var total = $('#total').val();
$(".fee").each(function(index, value){
fees.push($(this).val().trim());
});
if(fees.includes('') && total = '') {
$('#button').attr('disabled',true);
} else {
$('#button').attr('disabled',false);
} // /else
}//fuction
JS fiddle link
Just check if there is content inside the inputs, if you activate the button by removing the disabled class
$('input').on('keyup', function(){
var enable = true
$('input').each(function(index, element){
if ($(element).val() == "" || $(element).val() == null){
enable = false;
}
});
if (enable){
$('button').removeAttr('disabled');
}else{
$('button').attr('disabled','disabled');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" /><br /><br />
<input type="text" /><br /><br />
<input type="text" />
<button disabled>Confirm</button>
Edit 1.0:
$(document).ready(function (){
fees = [];
$('#button').attr('disabled',true);
});
//submit button enable disable
function submitButton() {
var total = $('#total').val();
$(".fee").each(function(index, value){
fees.push($(this).val().trim());
});
}//fuction
function disableButton(){
var enable = true
$('input.useToCheck').each(function(index, element){
if ($(element).val() == "" || $(element).val() == null){
enable = false;
}
});
if (enable){
$('button').removeAttr('disabled');
}else{
$('button').attr('disabled','disabled');
}
}
$('input').on('keyup', function(){
disableButton();
});
$('#more').on('click', function(){
disableButton();
});
//autocomplete script
$(document).on('focus','.search',function(){
let type = $(this).data('type');
$(this).autocomplete({
source: [{
label: 1,
value: 1,
data: {
t_id: 1,
Fee: 9.99
}
}, {
label: 2,
value: 2,
data: {
t_id: 2,
Fee: 1
}
}],
autoFocus: true,
minLength: 1,
select: function( event, ui ) {
let id_num = $(this).attr('id').substring(5);
$(this).val(ui.item.value);
$('#fee_' + id_num).val(ui.item.data.Fee);
$('#total').val(ui.item.data.Fee);
//$(this).attr('data-type', ui.item.type);
return false;
},
});
});
var i=$('table#first tr').length;
$("#more").on('click',function(){
html = '<tr>';
html += '<td><input type="text" data-type="type" onKeyUp="submitButton();" id="test_'+i+'" class="search useToCheck" placeholder="Enter 1 or 2 only"> </td>';
html += '<td><input type="number" id="fee_'+i+'" class="fee" placeholder="Fee"></td>';
html += '</tr>';
$('table#first').append(html);
i++;
disableButton();
$('input').on('keyup', function(){
disableButton();
});
});
#button {
margin: 50px;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!--hidden div-->
<div class="Popup">
<table id="first">
<thead>
<tr>
<th>Name</th>
<th>Fee</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" data-type="type" onKeyUp="submitButton();" id="test_1" class="search useToCheck" placeholder="Enter 1 or 2 only"></td>
<td><input type="number" id="fee_1" class="fee" placeholder="Fee"></td>
<td><a id="more"> More Row </a></td>
</tr>
</tbody>
</table>
<h3> Table 2 </h3>
<table id="tests">
<thead>
<tr>
<th>Student</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" data-type="type" onKeyUp="submitButton();" id="student" class="search useToCheck"></td>
<td><input type="number" id="total"></td>
</tr>
</tbody>
</table>
</div>
<button type="button" id="button"> submit </button>
Add keyup event to the input, Check if the elements .fee and '#total have value and then enable the button else disable.
$(document).ready(function() {
const btn = $('button');
btn.attr('disabled', true);
$('input').on('keyup', function() {
const fees = $('.fee').val();
const total = $('#total').val();
const isDisabled = (fees && total) ? false : true;
btn.attr('disabled', isDisabled);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Popup">
<table id="first">
<thead>
<tr>
<th>Name</th>
<th>Fee</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" data-type="type" id="test_1" class="search" placeholder="Enter 1 or 2 only"></td>
<td><input type="number" id="fee_1" class="fee" placeholder="Fee"></td>
<td><a id="more"> More Row </a></td>
</tr>
</tbody>
</table>
<h3> Table 2 </h3>
<table id="tests">
<thead>
<tr>
<th>Student</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" data-type="type" id="student" class="search"></td>
<td><input type="number" id="total"></td>
</tr>
</tbody>
</table>
</div>
<button type="button" id="button"> submit </button>
Can I use if else statement inside row.add()?
My html code:
<table id="myTableSub">
<thead>
...
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="insert" id="insert" /></td>
<td><input type="checkbox" name="select" id="select"/></td>
<td><input type="checkbox" name="update" id="update"/></td>
<td><input type="checkbox" name="delete" id="delete"/></td>
</tr>
</tbody>
<tfoot>...</tfoot>
</table>
My js:
var tableSub = $('#myTableSub').DataTable();
...
if (data) {
$.each(data, function (i, tdData) {
var insert = tdData['INSERT'];
tableSub.row.add(
if (insert == 1)
document.getElementById("insert").checked = true,
tdData['SELECT'],
tdData['UPDATE'],
tdData['DELETE']]).draw().node();
});
} else {
....
}
I want if insert is equal to 1, checkbox will be checked.
I try to get result from html table witch excepted only numbers i check them throw if statement if variable 1 bigger than variable 2 print content and that works good.
Now i am trying in the if statement to print variable 1 - variable 2 but it doesn't wanna work.
Here is the snippet:
$(document).ready(function() {
var vastInkomen = 0;
$('.txtBox').keyup(function() {
vastInkomen = 0;
$('.txtBox').each(function() {
var txtBoxVal = $(this).val();
vastInkomen += Number(txtBoxVal);
});
$('#vastInkomen').val(vastInkomen);
writeResult();
});
var vastLasten = 0;
$('.vast_lasten').keyup(function() {
vastLasten = 0;
$('.vast_lasten').each(function() {
var vastLastenVal = $(this).val();
vastLasten += Number(vastLastenVal);
});
$('#vastLasten').val(vastLasten);
writeResult();
});
function writeResult() {
if (vastInkomen !== 0 && vastLasten !== 0) {
if (vastInkomen > vastLasten) {
$('#result').text("Some text and work good!") +
vastLasten - vastInkomen;
} else if (vastInkomen < vastLasten) {
//$('#result-amount').console(vastInkomen -vastLasten);
$('#result').text("some text and work good.");
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>content1</td>
<td><input class="txtBox" type="number" name="content2" />
</td>
</tr>
<tr>
<td>content3</td>
<td><input class="txtBox" type="number" name="content3" />
</td>
</tr>
<tr>
<td>content4</td>
<td>
<input class="txtBox" type="number" name="content4" />
</td>
</tr>
</table>
<table>
<tr>
<td>content</td>
<td><input class="vast_lasten" type="number" name="content" /></td>
</tr>
<tr>
<td>content1</td>
<td><input class="vast_lasten" type="number" name="content1" /></td>
</tr>
<tr>
<td>content2</td>
<td><input class="vast_lasten" type="texnumber" name="content2" /></td>
</tr>
</table>
<div class="col">
<h3>Het resultaat is:</h3>
<p id="result"></p>
</div>
This will work:
var result = vastLasten - vastInkomen;
$('#result').text("Some text and work good!" + result);
You can use .text() to set the content of an element, but everything should be within the parenthesis.
I added an extra variable result because you cannot use + and - both here; it will result in NaN as it will try to sum the values.
This works as well:
$('#result').text("Some text and work good!" + (vastLasten - vastInkomen));
How can I get value of checkbox in table? I want use it for in this case in order get parameter. Now, please see html table:
<table id="div_func" class="table table-bordered" style="width: 100%">
<thead>
<tr>
<th>
<input type="checkbox" id="chk_all" /></th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="D01" /></td>
<td>Banana </td>
</tr>
<tr>
<td> <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="D02" /></td>
<td>Orange </td>
</tr>
<tr>
<td> <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="D03" /></td>
<td>Apple </td>
</tr>
</tbody>
</table>
And this is my script , I use for get value in checkbox , then put parameter
function add_funcgroup() {
var func_group = [];
var chk_allow = "";
var table = document.getElementById("div_func");
for (var i = 0; i < table.rows.length; i++) {
if ($('#chk')[i].is(':checked')) {
chk_allow = "True";
}
else {
chk_allow = "False";
}
var group_func = {
GROUP_MOD_ID: id_temp,
FUNCTION_MOD_ID: $('#chk')[i].val(),
ALLOW: chk_allow
};
func_group[i] = group_func;
}
var func_group_temp = {
FUNC_MOD: func_group
};
var DTO = {
'func_group_temp': func_group_temp
};
$.ajax(
{
And it's not working.
What you have done is right, but you are not outputting it to the table!
var table = $("#div_func");
var value_check = "";
for (var i = 1; i < table.rows.length; i++) {
if ($('#chk')[i].is(':checked')) {
value_check += i + ": " + $('#chk')[i].val();
}
}
alert(value_check);
And you aren't appending it, instead saving!
Try to this
$('#div_func tbody tr input:checkbox').each(function() {
if (this.checked) {
//Do something
}
});.
I am trying to pass a value entered in a textbox to a text area. However when I run my code the value appears in the textarea and it disapears.
Html code:
Customer Name
<input type="text" id="name1TXT" />
<textarea rows="6" cols="50" id="productList">
</textarea>
Javascript:
function transferData() {
var customer = document.getElementById("name1TXT").value;
if (customer != "")
document.getElementById('productList').value += customer + ","
document.getElementById('name1TXT').value = "";
}
Does anyone know why this would happen?
Edit
Here is all of my code.
<!DOCTYPE html>
<title></title>
<style>
.calcFrm {
}
</style>
<table style="width:300px;" border="1">
<tr>
<td>Customer Name</td>
<td><input type="text" id="name1TXT" /></td>
</tr>
<tr>
<td>Coating</td>
<td>
<select class="coating1DDL">
<option value="1">Galvanized</option>
<option value="2">Powder Coat</option>
<option value="3">None</option>
</select>
</td>
</tr>
<tr>
<td>Weight</td>
<td><input type="text" id="weight1TXT" onkeyup="sum1();"/></td>
</tr>
<tr>
<td>Length</td>
<td><input type="text" id="length1TXT" onkeyup="sum1();"/></td>
</tr>
<tr>
<td>Pieces</td>
<td><input type="text" id="pcs1TXT" onkeyup="sum1();"/></td>
</tr>
<tr>
<td>Pounds</td>
<td><input type="text" id="pounds1TXT" onkeyup="sum1();"readonly="readonly" /></td>
</tr>
<tr>
<td>Tons</td>
<td><input type="text" id="tons1TXT" onkeyup="convertPounds1();" readonly="readonly" /></td>
</tr>
</table>
<table style="width:300px;" border="1" class="tonsFrm2">
<tr>
<td>Customer Name</td>
<td><input type="text" id="name2TXT" /></td>
</tr>
<tr>
<td>Coating</td>
<td>
<select class="coating2DDL">
<option>Galvanized</option>
<option>Powder Coat</option>
<option>None</option>
</select>
</td>
</tr>
<tr>
<td>Weight</td>
<td><input type="text" id="weight2TXT" onkeyup="sum2();"/></td>
</tr>
<tr>
<td>Length</td>
<td><input type="text" id="length2TXT" onkeyup="sum2()"/></td>
</tr>
<tr>
<td>Pieces</td>
<td><input type="text" id="pcs2TXT" onkeyup="sum2();"/></td>
</tr>
<tr>
<td>Pounds</td>
<td><input type="text" id="pounds2TXT" readonly="readonly" onkeyup="sum2();" /></td>
</tr>
<tr>
<td>Tons</td>
<td><input type="text" id="tons2TXT" readonly="readonly" onkeyup="convertPounds2();" /></td>
</tr>
</table>
<table style="width:300px;" border="1" class="tonsFrm3">
<tr>
<td>Customer Name</td>
<td><input type="text" id="text3TXT" /></td>
</tr>
<tr>
<td>Coating</td>
<td>
<select class="coating3DDL">
<option>Galvanized</option>
<option>Powder Coat</option>
<option>None</option>
</select>
</td>
</tr>
<tr>
<td>Weight</td>
<td><input type="text" id="weight3TXT" onkeyup="sum3();"/></td>
</tr>
<tr>
<td>Length</td>
<td><input type="text" id="length3TXT" onkeyup="sum3();"/></td>
</tr>
<tr>
<td>Pieces</td>
<td><input type="text" id="pcs3TXT" onkeyup="sum3();"/></td>
</tr>
<tr>
<td>Pounds</td>
<td><input type="text" id="pounds3TXT" readonly="readonly" onkeyup="sum3();"/></td>
</tr>
<tr>
<td>Tons</td>
<td><input type="text" id="tons3TXT" readonly="readonly" onkeyup="convertPounds3();" /></td>
</tr>
</table>
<button onclick="transferData()">Submit</button>
<button type="reset" value="Reset">Reset</button>
<button type="button">Add New Form</button>
<br />
Pounds Total
<input type="text" id="TotalPoundsTxt" readonly="readonly" onkeyup="totalPounds();" />
Tons Total
<input type="text" id="TotalTonsTXT" readonly="readonly" onkeyup="totalTons();" />
<br />
<textarea rows="6" cols="50" id="productList">
</textarea>
<br />
<button type="button">Save Input</button>
Javascript:
//number correlate with form in order
//functions for first form
function sum1() {
var txtFirstNumberValue = document.getElementById('weight1TXT').value;
var txtSecondNumberValue = document.getElementById('length1TXT').value;
var txtThirdNumberValue = document.getElementById('pcs1TXT').value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue) * parseInt(txtThirdNumberValue);
if (!isNaN(result)) {
document.getElementById('pounds1TXT').value = result;
}
}
function convertPounds1() {
var txtFirstNumberValue = document.getElementById('pounds1TXT').value;
var result = parseInt(txtFirstNumberValue) / 2000;
if (!isNaN(result)) {
document.getElementById('tons1TXT').value = result;
}
}
function galvCalc1() {
var galvOption = document.getElementById('').value
}
//functions for second form
function sum2() {
var txtFirstNumberValue = document.getElementById('weight2TXT').value;
var txtSecondNumberValue = document.getElementById('length2TXT').value;
var txtThirdNumberValue = document.getElementById('pcs2TXT').value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue) * parseInt(txtThirdNumberValue);
if (!isNaN(result)) {
document.getElementById('pounds2TXT').value = result;
}
}
function convertPounds2() {
var txtFirstNumberValue = document.getElementById('pounds2TXT').value;
var result = parseInt(txtFirstNumberValue) / 2000;
if (!isNaN(result)) {
document.getElementById('tons2TXT').value = result;
}
}
//Functions for third form
function sum3() {
var txtFirstNumberValue = document.getElementById('weight3TXT').value;
var txtSecondNumberValue = document.getElementById('length3TXT').value;
var txtThirdNumberValue = document.getElementById('pcs3TXT').value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue) * parseInt(txtThirdNumberValue);
if (!isNaN(result)) {
document.getElementById('pounds3TXT').value = result;
}
}
function convertPounds3() {
var txtFirstNumberValue = document.getElementById('pounds3TXT').value;
var result = parseInt(txtFirstNumberValue) / 2000;
if (!isNaN(result)) {
document.getElementById('tons3TXT').value = result;
}
}
function totalPounds(){
var firstpoundvalue = document.getElementById('pounds1TXT').value;
var secondpoundvalue = document.getElementById('pounds2TXT').value;
var thirdpoundvalue = document.getElementById('pounds3TXT').value;
var result = parseInt(firstpoundvalue) + parseInt(secondpoundvalue) + parseInt(thirdpoundvalue);
if (!isNaN(result)) {
document.getElementById('TotalPoundsTxt').value = result;
}
}
function totalTons() {
var firsttonvalue = document.getElementById('tons1TXT').value;
var secondtonvalue = document.getElementById('tons2TXT').value;
var thirdtonvalue = document.getElementById('tons3TXT').value;
var result = parseInt(firsttonvalue) + parseInt(secondtonvalue) + parseInt(thirdtonvalue);
if (!isNaN(result)) {
document.getElementById('TotalTonsTXT').value = result;
}
}
function transferData() {
var customer = document.getElementById("name1TXT").value;
if (customer != "")
document.getElementById('productList').value += customer + ",";
}
</script>
I cannot comment but I created as JSBin and seems to be working. I wasn't for sure how you are calling the transferData function to see the textarea clear so I just added an onBlur event to the input textbox.
I also added a semicolon to the line clearing the name1TXT value.
I still think everything is working regarding your code. By that I mean there aren't any odd bugs. But what exactly are you trying to accomplish? There appears to be 3 Customer Name boxes but when you click submit only 1 is being output into the textarea. It only grabs Customer1 and puts his/her name into the textarea and this process is repeating with each Submit. Are you trying to add all 3 customers? If so, then you will need more logic in your transferData function
you should use value like this
document.getElementById("writeArea").value = txt;
or like this in jQuery:
$('#myTextarea').val('');