CODEWITHSUNDEEP
javascriptjqueryhtml
user11651048
user11651048

Reputation: 59

How to enable submit button when input fields are filled dynamically?

I have made a web form where a user can fill Input fields by using a drop down box. Fields are dynamically filled using Jquery help. When all Input fields are filled, user have to click Submit Button to further use my Form benefits. I don't want to let users use Submit button till all input fields are filled. For this, I have already added a function in my code. This function enables Submit button only when all the input fields are filled with some amount. but issue is arising when input fields are filled dynamically using drop down box. when fields are filled using the drop down box , Submit button is not getting enabled itself. I have to click one of the input field to enable it.

I tried Google also to solve this issue but unable to solve this on my own. Can someone please help me to solve this issue.

Here is my code

let headings = []
function initInputs(headingList) {
  jQuery(".fields").append(createInputsHTML(headingList))
}


function createInputsHTML(headingList) {
  let html = ''
  headingList.forEach(heading => {
    if (heading !== 'Company') {
      html += `<label for="${heading}">${heading}: </label>`
      html += `<input type="number" id="${heading}">`
      html += '<br>'
    }
  })

  return html
}


function getJSON() {
  return new Promise(resolve => {
    jQuery.get("https://cors-anywhere.herokuapp.com/www.coasilat.com/wp-content/uploads/2019/06/data-1.txt", function(data) {
      resolve(JSON.parse(data))
    });
  })
}

// processing raw JSON data
function processRawData(data) {
  return new Promise(resolve => {
    const companyData = []
    // creating data array
    // handling multiple sheets
    Object.values(data).forEach((sheet, index) => {
      sheet.forEach((company, i) => {
        companyData.push({ ...company
        })
        // create headings only once
        if (index === 0 && i === 0) {
          Object.keys(company).forEach(item => {
            headings.push(item.trim())
          })
        }
      })
    })
    resolve(companyData)
  })
}

$(async function() {

  let lists = [];

  function initAutocomplete(list) {
    const thisKey = 'Company'
    $("#company").autocomplete('option', 'source', function(request, response) {
      response(
        list.filter(item => {
          if (item[thisKey].toLowerCase().includes(request.term.toLowerCase())) {
            item.label = item[thisKey]
            return item
          }
        })
      )
    })
  }

  $("#company").autocomplete({
    minLength: 1,
    source: lists,
    focus: function(event, ui) {
      // the "species" is constant - it shouldn't be modified
      $("#company").val(ui.item.Company);
      return false;
    },
    select: function(event, ui) {
      // handling n number of fields / columns
      headings.forEach(heading => {
        $('#' + heading).val(ui.item[heading])
      })
      return false;
    }
  });

  // starting data download, processing and usage
  getJSON()
    .then(json => {
      return processRawData(json)
    })
    .then(data => {
      
      // make the processed data accessible globally
      lists = data
      initAutocomplete(lists)
      initInputs(headings)
    })

});



// code to set default values if user enters zero or negative values




//calculation for Rating value

$(document).ready(function(){ 
$("#Cal").click(function(){

var peVal=0,roceVal=0,sgVal=0,dyVal=0,psVal=0,pbVal=0,npmlqVal=0,roaVal=0,deVal=0,upsVal=0,crVal=0
;

jQuery(".fields input").each(function (){ 
var idHeading=$(this).attr("id");  

if(idHeading=="PE"){ peVal=parseInt($(this).val()); } 
if(idHeading=="ROCE"){ roceVal=parseInt($(this).val()); } 
if(idHeading=="SG"){ sgVal=parseInt($(this).val()); } 
if(idHeading=="DY"){ dyVal=parseFloat($(this).val()); } 
if(idHeading=="PS"){ psVal=parseFloat($(this).val()); }
if(idHeading=="PB"){ pbVal=parseFloat($(this).val()); }
if(idHeading=="NPMLQ"){ npmlqVal=parseFloat($(this).val()); }

if(idHeading=="ROA"){ roaVal=parseFloat($(this).val()); }
if(idHeading=="DE"){ deVal=parseFloat($(this).val()); }
if(idHeading=="UPS"){ upsVal=parseFloat($(this).val()); }
if(idHeading=="CR"){ crVal=parseFloat($(this).val()); }


}); 

var output=peVal+roceVal+sgVal+dyVal+psVal+pbVal+npmlqVal+roaVal+deVal+upsVal+crVal
;

$("output[name='amount']").text(output);
 }); 
 });
 
 
 $(document).on("keyup", "input[type='number']", function() {
  var empty = false;
  $('input[type="number"]').each(function() {
    if (($(this).val() == '')) {
      empty = true;
    }
  });

  if (empty) {
    $('#Cal').attr('disabled', 'disabled');
  } else {
    $('#Cal').removeAttr('disabled');
  }
});
 
<html>
    <head>
        <title>Page Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
    </head>
    <body>
        
<div class="ui-widget">
  <form id="frm1">
    <label for="company">Drop-down box </label>
    <input id="company"><br /><br />
    
    <div class="fields"></div>
    <!-- PLEASE NOTE THAT THE OTHER INPUT FIELDS WILL BE ADDED DYNAMICALLY -->
 <button  type="button" id="Cal" disabled="disabled"  >
 Button
 </button>
<p> <output name="amount" for="calculation">0</output>
</p>
</form>
    </body>
</html>

Upvotes: 0

Views: 605

Answers (1)

KL_
KL_

Reputation: 1513

The last keyup of your code is ok ($(document).on("keyup", "input[type='number']", ... );) but you forgot that it will only trigger when the event keyup trigger in the inputs with the attribute type='number'.

This event will not fire when you select something in the autocomplete input, you need to add some code to check it. Something like:

let headings = []
function initInputs(headingList) {
	jQuery(".fields").append(createInputsHTML(headingList))
}


function createInputsHTML(headingList) {
	let html = ''
	headingList.forEach(heading => {
		if (heading !== 'Company') {
			html += `<label for="${heading}">${heading}: </label>`
			html += `<input type="number" id="${heading}">`
			html += '<br>'
		}
	})

	return html
}


function getJSON() {
	return new Promise(resolve => {
		jQuery.get("https://cors-anywhere.herokuapp.com/www.coasilat.com/wp-content/uploads/2019/06/data-1.txt", function(data) {
			resolve(JSON.parse(data))
		});
	})
}

// processing raw JSON data
function processRawData(data) {
	return new Promise(resolve => {
		const companyData = []
		// creating data array
		// handling multiple sheets
		Object.values(data).forEach((sheet, index) => {
			sheet.forEach((company, i) => {
				companyData.push({ ...company
				})
				// create headings only once
				if (index === 0 && i === 0) {
					Object.keys(company).forEach(item => {
						headings.push(item.trim())
					})
				}
			})
		})
		resolve(companyData)
	})
}

$(async function() {

	let lists = [];

	function initAutocomplete(list) {
		const thisKey = 'Company'
		$("#company").autocomplete('option', 'source', function(request, response) {
			response(
				list.filter(item => {
					if (item[thisKey].toLowerCase().includes(request.term.toLowerCase())) {
						item.label = item[thisKey]
						return item
					}
				})
			)
		})
	}

	$("#company").autocomplete({
		minLength: 1,
		source: lists,
		focus: function(event, ui) {
			// the "species" is constant - it shouldn't be modified
			$("#company").val(ui.item.Company);
			return false;
		},
		select: function(event, ui) {
      var empty = false;
			// handling n number of fields / columns
			headings.forEach(heading => {
				$('#' + heading).val(ui.item[heading]);
        if ((ui.item[heading] == '')) {
          empty = true;
        }
			});
      checkFill(empty);
			return false;
		}
	});

	// starting data download, processing and usage
	getJSON()
		.then(json => {
			return processRawData(json)
		})
		.then(data => {
			
			// make the processed data accessible globally
			lists = data
			initAutocomplete(lists)
			initInputs(headings)
		})

});



// code to set default values if user enters zero or negative values




//calculation for Rating value

$(document).ready(function(){ 
$("#Cal").click(function(){

var peVal=0,roceVal=0,sgVal=0,dyVal=0,psVal=0,pbVal=0,npmlqVal=0,roaVal=0,deVal=0,upsVal=0,crVal=0
;

jQuery(".fields input").each(function (){ 
var idHeading=$(this).attr("id");  

if(idHeading=="PE"){ peVal=parseInt($(this).val()); } 
if(idHeading=="ROCE"){ roceVal=parseInt($(this).val()); } 
if(idHeading=="SG"){ sgVal=parseInt($(this).val()); } 
if(idHeading=="DY"){ dyVal=parseFloat($(this).val()); } 
if(idHeading=="PS"){ psVal=parseFloat($(this).val()); }
if(idHeading=="PB"){ pbVal=parseFloat($(this).val()); }
if(idHeading=="NPMLQ"){ npmlqVal=parseFloat($(this).val()); }

if(idHeading=="ROA"){ roaVal=parseFloat($(this).val()); }
if(idHeading=="DE"){ deVal=parseFloat($(this).val()); }
if(idHeading=="UPS"){ upsVal=parseFloat($(this).val()); }
if(idHeading=="CR"){ crVal=parseFloat($(this).val()); }


}); 

var output=peVal+roceVal+sgVal+dyVal+psVal+pbVal+npmlqVal+roaVal+deVal+upsVal+crVal
;

$("output[name='amount']").text(output);
 }); 
 });
 
 
 $(document).on("keyup", "input[type='number']", function() {
	var empty = false;
	$('input[type="number"]').each(function() {
		if (($(this).val() == '')) {
			empty = true;
		}
	});
  checkFill(empty);
});

function checkFill(isEmpty){
  if (isEmpty) {
		$('#Cal').attr('disabled', 'disabled');
	} else {
		$('#Cal').removeAttr('disabled');
	}
}
<html>
	<head>
		<title>Page Title</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
	</head>
	<body>
		<div class="ui-widget">
		  <form id="frm1">
			<label for="company">Drop-down box </label>
			<input id="company"><br /><br />
				<div class="fields"></div>
				<!-- PLEASE NOTE THAT THE OTHER INPUT FIELDS WILL BE ADDED DYNAMICALLY -->
 				<button  type="button" id="Cal" disabled="disabled"  >
 				Button
 				</button>
				<p> <output name="amount" for="calculation">0</output>
				</p>
			</form>
		</div>
	</body>
</html>

Or, at least, trigger the keyup function when you set the field value:

let headings = []
function initInputs(headingList) {
	jQuery(".fields").append(createInputsHTML(headingList))
}


function createInputsHTML(headingList) {
	let html = ''
	headingList.forEach(heading => {
		if (heading !== 'Company') {
			html += `<label for="${heading}">${heading}: </label>`
			html += `<input type="number" id="${heading}">`
			html += '<br>'
		}
	})

	return html
}


function getJSON() {
	return new Promise(resolve => {
		jQuery.get("https://cors-anywhere.herokuapp.com/www.coasilat.com/wp-content/uploads/2019/06/data-1.txt", function(data) {
			resolve(JSON.parse(data))
		});
	})
}

// processing raw JSON data
function processRawData(data) {
	return new Promise(resolve => {
		const companyData = []
		// creating data array
		// handling multiple sheets
		Object.values(data).forEach((sheet, index) => {
			sheet.forEach((company, i) => {
				companyData.push({ ...company
				})
				// create headings only once
				if (index === 0 && i === 0) {
					Object.keys(company).forEach(item => {
						headings.push(item.trim())
					})
				}
			})
		})
		resolve(companyData)
	})
}

$(async function() {

	let lists = [];

	function initAutocomplete(list) {
		const thisKey = 'Company'
		$("#company").autocomplete('option', 'source', function(request, response) {
			response(
				list.filter(item => {
					if (item[thisKey].toLowerCase().includes(request.term.toLowerCase())) {
						item.label = item[thisKey]
						return item
					}
				})
			)
		})
	}

	$("#company").autocomplete({
		minLength: 1,
		source: lists,
		focus: function(event, ui) {
			// the "species" is constant - it shouldn't be modified
			$("#company").val(ui.item.Company);
			return false;
		},
		select: function(event, ui) {
			// handling n number of fields / columns
			headings.forEach(heading => {
				$('#' + heading).val(ui.item[heading]).keyup();
			})
			return false;
		}
	});

	// starting data download, processing and usage
	getJSON()
		.then(json => {
			return processRawData(json)
		})
		.then(data => {
			
			// make the processed data accessible globally
			lists = data
			initAutocomplete(lists)
			initInputs(headings)
		})

});



// code to set default values if user enters zero or negative values




//calculation for Rating value

$(document).ready(function(){ 
$("#Cal").click(function(){

var peVal=0,roceVal=0,sgVal=0,dyVal=0,psVal=0,pbVal=0,npmlqVal=0,roaVal=0,deVal=0,upsVal=0,crVal=0
;

jQuery(".fields input").each(function (){ 
var idHeading=$(this).attr("id");  

if(idHeading=="PE"){ peVal=parseInt($(this).val()); } 
if(idHeading=="ROCE"){ roceVal=parseInt($(this).val()); } 
if(idHeading=="SG"){ sgVal=parseInt($(this).val()); } 
if(idHeading=="DY"){ dyVal=parseFloat($(this).val()); } 
if(idHeading=="PS"){ psVal=parseFloat($(this).val()); }
if(idHeading=="PB"){ pbVal=parseFloat($(this).val()); }
if(idHeading=="NPMLQ"){ npmlqVal=parseFloat($(this).val()); }

if(idHeading=="ROA"){ roaVal=parseFloat($(this).val()); }
if(idHeading=="DE"){ deVal=parseFloat($(this).val()); }
if(idHeading=="UPS"){ upsVal=parseFloat($(this).val()); }
if(idHeading=="CR"){ crVal=parseFloat($(this).val()); }


}); 

var output=peVal+roceVal+sgVal+dyVal+psVal+pbVal+npmlqVal+roaVal+deVal+upsVal+crVal
;

$("output[name='amount']").text(output);
 }); 
 });
 
 
 $(document).on("keyup", "input[type='number']", function() {
	var empty = false;
	$('input[type="number"]').each(function() {
		if (($(this).val() == '')) {
			empty = true;
		}
	});

	if (empty) {
		$('#Cal').attr('disabled', 'disabled');
	} else {
		$('#Cal').removeAttr('disabled');
	}
});
<html>
	<head>
		<title>Page Title</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
	</head>
	<body>
		<div class="ui-widget">
		  <form id="frm1">
			<label for="company">Drop-down box </label>
			<input id="company"><br /><br />
				<div class="fields"></div>
				<!-- PLEASE NOTE THAT THE OTHER INPUT FIELDS WILL BE ADDED DYNAMICALLY -->
 				<button  type="button" id="Cal" disabled="disabled"  >
 				Button
 				</button>
				<p> <output name="amount" for="calculation">0</output>
				</p>
			</form>
		</div>
	</body>
</html>

Upvotes: 1

Related Questions