Check if all inputs are filled in to remove disabled attribute - javascript

I want to check if all inputs have an value if so than remove the disabled attribute on the button.
Here below I have a code snippet inserted,
but this removes the attribute when only one input has a value.
$(".follow-url-inputs").each(function(index, item) {
$(item).change(function() {
var empty = $(this).filter(function() {
return this.value === "";
});
if (empty.length) {
console.log("all fiels filled in");
} else {
$('.fs_btn-save').removeAttr('disabled')
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="follow-inputs text-center px-5">
<div class="input-group px-5">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<i class="fab fa-facebook"></i>
</span>
</div>
<input id="facebook" class="form-control follow-url-inputs" name="facebook" placeholder="https://facebook.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
</div><br>
<div class="input-group px-5">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<i class="fab fa-linkedin"></i>
</span>
</div>
<input id="linkedin" class="form-control follow-url-inputs" name="linkedin" placeholder="https://linkedin.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
</div><br>
<div class="input-group px-5">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<i class="fab fa-twitter"></i>
</span>
</div>
<input id="twitter" class="form-control follow-url-inputs" name="twitter" placeholder="https://twitter.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
</div><br></div>
<div class="text-center">
<button class="btn btn-primary fs_btn-primary fs_btn-save" disabled onclick="setupFollowButtons()">Save</button>
</div>
Could someone help me on checking if all inputs has a value and than remove the disabled attribute.

Logic is a bit backwards. You want to filter all the inputs inside change of each. Your current code only filters the one that changed
var $inputs = $(".follow-url-inputs").change(function() {
var inValid = $inputs.filter(function() {
return !this.value.trim();
}).length;
$('.fs_btn-save').prop('disabled', inValid)
if (!inValid) {
console.log("all fiels filled in");
}
});

Use jquery map method. This will give an object and if any field is empty it will have a key which will have true as a value.
On doing Object.values it will return an array of all values and check if it has true which mean any one of the field is empty , in that case the button state can be disbaled
Also have changed change to keyup
$(".follow-url-inputs").keyup(function() {
let m = $(".follow-url-inputs").map(function(item) {
return $(this).val() === ""
})
// map will give an object
// if any input is empty it will contain true
if (Object.values(m).indexOf(true) !== -1) {
console.log("all fiels filled in");
} else {
$('.fs_btn-save').removeAttr('disabled')
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="follow-inputs text-center px-5">
<div class="input-group px-5">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<i class="fab fa-facebook"></i>
</span>
</div>
<input id="facebook" class="form-control follow-url-inputs" name="facebook" placeholder="https://facebook.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
</div><br>
<div class="input-group px-5">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<i class="fab fa-linkedin"></i>
</span>
</div>
<input id="linkedin" class="form-control follow-url-inputs" name="linkedin" placeholder="https://linkedin.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
</div><br>
<div class="input-group px-5">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<i class="fab fa-twitter"></i>
</span>
</div>
<input id="twitter" class="form-control follow-url-inputs" name="twitter" placeholder="https://twitter.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
</div><br></div>
<div class="text-center">
<button class="btn btn-primary fs_btn-primary fs_btn-save" disabled onclick="setupFollowButtons()">Save</button>
</div>

Try this instead
$(".follow-url-inputs").each(function(index, item) {
$(item).change(function() {
var isEmpty = true;
$('input').each(function() {
if ($.trim($(this).val()) == '') {
isEmpty = true;
}
else {
isEmpty = false;
}
});
if (isEmpty) {
console.log("isAllEmpty: "+ isEmpty);
} else {
$('.fs_btn-save').removeAttr('disabled')
console.log("isAllEmpty: "+ isEmpty);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="follow-inputs text-center px-5">
<div class="input-group px-5">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<i class="fab fa-facebook"></i>
</span>
</div>
<input id="facebook" class="form-control follow-url-inputs" name="facebook" placeholder="https://facebook.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
</div><br>
<div class="input-group px-5">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<i class="fab fa-linkedin"></i>
</span>
</div>
<input id="linkedin" class="form-control follow-url-inputs" name="linkedin" placeholder="https://linkedin.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
</div><br>
<div class="input-group px-5">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<i class="fab fa-twitter"></i>
</span>
</div>
<input id="twitter" class="form-control follow-url-inputs" name="twitter" placeholder="https://twitter.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
</div><br></div>
<div class="text-center">
<button class="btn btn-primary fs_btn-primary fs_btn-save" disabled onclick="setupFollowButtons()">Save</button>
</div>

Related

How to add my ajax data to bootstrap4 cards

This is my part of html(ejs) file and I have multiple card forms(such as ID =myContent1, myContent2, myContetn3 ...) they receive ajax data when the i class=icon... is toggled. when the function(toggle) is activated, received ajax data mapping with myContent No. (ex. received ajax data ID 1 with myContent1 and 2 for myContent2 ... so on).
What I want to do is that, ajax data should be loaded when my html file is executed and automatically mapping with my card forms(based on card Id no)
need your kind help.
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="cardHeader3" style="visibility: hidden;">unSaved</div>
<div class="card-body">
<i class="icon-plus icons font-2xl" id="icon3" style="font-size: 5rem !important;margin-left: 46%;cursor:pointer;" onclick="toggler('myContent_3');"></i>
<div id="myContent_3" class="card-title" style="display: none;">
<form action="" method="post">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">sequence</span>
</div>
<input type="text" id="notiSeq_3" name="notiSeq" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">title</span>
</div>
<input type="text" id="title_3" name="title" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-tumblr"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Link</span>
</div>
<input type="text" id="link_3" name="link" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-hand-o-left"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">exposureTime</span>
</div>
<input type="text" id="notiTime_3" name="notiTime" class="form-control" value="" readonly style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="cui-calendar"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Urgency</span>
</div>
<select class="form-control" id="viewYn_3" defaultValue="N">
<option value="N">N</option>
<option value="Y">Y</option>
</select>
<div class="input-group-append">
<span class="input-group-text">
<i class="icon-eye icons"></i>
</span>
</div>
</div>
</div>
<div class="form-group form-actions">
<button type="button" class="btn btn-primary" onclick ="save('3')">Save</button>
<button type="button" class="btn btn-secondary" onclick="del('3')">Delete</button>
</div>
</form>
</div>
</div>
</div>
</div>
And This is my part of js file. it currently works with when the card forms are toggled.
function toggler(divId) {
var tempId = divId.slice(-1);
var x = document.getElementById("icon" + tempId);
var y = document.getElementById("cardHeader" + tempId);
$.ajax({
url: GW_URL+'/myRestAPI/get/'+tempId,
type:'get',
contentType: "application/json",
dataType : "json",
cache: false,
success : function(data){
$("#notiSeq_" + tempId).val(data.exposureNo);
$("#title_" + tempId).val(data.title);
$("#link_" + tempId).val(data.link);
$("#notiTime_" + tempId).val(data.exposureTime + " - " + data.exposureTime2);
$("#viewYn_" + tempId).val(data.urgency);
},
error : function(jqXHR, textStatus, errorThrown){
console.log(jqXHR.responseText);
}
});

Unable to Remove Class for Span Element

I'm trying do remove class "bg-color-disable" for #filenameRPT but nothing I tried work. I have used $("#parentRPT > span#filenameRPT").removeClass("bg-color-disable"); and $("#filenameRPT").removeClass("bg-color-disable"); but no lucks. Any idea?
<div class="two-row mb-3">
<div id="parentRPT" class="input-group bg-color-disable">
<span class="input-group-addon gi data-gi-size gi-file-plus"></span>
<span id="filenameRPT" class="bg-color-disable">
Upload REPORT
<span class="fa fa-arrow-circle-right text-primary ml-1 mr-1"></span>
<a name="rpt" href="#">No File Exists</a
<input class="hidden" name="delete_RPT" value="not_deleted" type="text"/>
</span>
<span id="deleteRPT" class="fa fa-times text-danger hidden" title="Delete"></span>
<label class="input-group-addon has-float-label" for="file-uploadRPT">
Browse
<input id="file-uploadRPT" name="FileToUploadRPT" type="file" accept="application/pdf">
</label>
</div>
</div>
Crazy thing is I was able to remove "bg-color-disable" for #parentRPT using $("#parentRPT").removeClass("bg-color-disable"); but using $("#filenameRPT").removeClass("bg-color-disable"); didn't work for element #filenameRPT. Why?
I think your issue is with improper closing of anchor tag.
Removing class is straight forward.
window.onload = removeClass()
function removeClass() {
console.log('before removal',document.getElementById('filenameRPT').classList);
document.getElementById('filenameRPT').classList.remove('bg-color-disable')
console.log('after removal',document.getElementById('filenameRPT').classList);
}
<div class="two-row mb-3">
<div id="parentRPT" class="input-group bg-color-disable">
<span class="input-group-addon gi data-gi-size gi-file-plus"></span>
<span id="filenameRPT" class="bg-color-disable">
Upload REPORT
<span class="fa fa-arrow-circle-right text-primary ml-1 mr-1"></span>
<a name="rpt" href="#">No File Exists</a>
<input class="hidden" name="delete_RPT" value="not_deleted" type="text"/>
</span>
<span id="deleteRPT" class="fa fa-times text-danger hidden" title="Delete"></span>
<label class="input-group-addon has-float-label" for="file-uploadRPT">
Browse
<input id="file-uploadRPT" name="FileToUploadRPT" type="file" accept="application/pdf">
</label>
</div>
</div>

How to change button text by verifying data are same or not when edited

I need one help.
I need to change button text according to some condition using Javascript/Jquery. I will explain my code below.
Here, when a user is selects the drop-down list, the 3 input field is filled with some value. the JavaScript code is given below.
function setValue(){
var arrField=[];
if(document.getElementById('uinfo').value==1){
document.getElementById('uname').value="Ram";
document.getElementById('uemail').value="subhra#gmail.com";
document.getElementById('ucity').value="cuttuck";
arrField.push({'uname':document.getElementById('uname').value,'uemail':document.getElementById('uemail').value,'ucity':document.getElementById('ucity').value});
}else{
document.getElementById('uname').value="";
document.getElementById('uemail').value="";
document.getElementById('ucity').value="";
var arrField=[];
}
}
<select onchange="setValue();" id="uinfo">
<option value="">Select</option>
<option value="1">User Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail"/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="email" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button type="button" class="btn btn-success" onclick="checkAllValue();">
<i class="icon-user icon-white"></i> Add
</button>
<button type="button" class="btn btn-success" onclick="checkAll();">
<i class="icon-user icon-white"></i> Check
</button>
Here I need that when a user will click on the Check button it will check for the original value after the drop down select if all are as it was then the Add button text will remain as Add.
If any field value has changed after selecting that button text will change to Update.
Please help me.
Try this
function setValue(){
var arrField=[];
if(document.getElementById('uinfo').value==1){
document.getElementById('uname').value="Ram";
document.getElementById('uemail').value="subhra#gmail.com";
document.getElementById('ucity').value="cuttuck";
arrField.push({'uname':document.getElementById('uname').value,'uemail':document.getElementById('uemail').value,'ucity':document.getElementById('ucity').value});
}else{
document.getElementById('uname').value="";
document.getElementById('uemail').value="";
document.getElementById('ucity').value="";
var arrField=[];
}
}
function checkAll(){
var uname = $('#uname').val();
var email = $('#uemail').val();
var city = $('#ucity').val();
var count = 0;
if(uname!='Ram')
{
count++;
}
else if(email!='subhra#gmail.com')
{
count++;
}
else if(city!='cuttuck')
{
count++;
}
if(count>0)
{
$('#add').text('UPDATE');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select onchange="setValue();" id="uinfo">
<option value="">Select</option>
<option value="1">User Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail"/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="email" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button id="add" type="button" class="btn btn-success" onclick="checkAllValue();">
<i class="icon-user icon-white"></i> Add
</button>
<button type="button" class="btn btn-success" onclick="checkAll();">
<i class="icon-user icon-white"></i> Check
</button>
var arrField = new Array();
function setValue() {
if (document.getElementById('uinfo').value == 1) {
document.getElementById('uname').value = "Ram";
document.getElementById('uemail').value = "subhra#gmail.com";
document.getElementById('ucity').value = "cuttuck";
arrField.push({
'uname': document.getElementById('uname').value,
'uemail': document.getElementById('uemail').value,
'ucity': document.getElementById('ucity').value
});
} else {
document.getElementById('uname').value = "";
document.getElementById('uemail').value = "";
document.getElementById('ucity').value = "";
arrField = [];
}
$('#Save').text('Add');
}
$(document).ready(function() {
$('#uname, #uemail, #ucity').change(function() {
if (arrField[0].uname == $('#uname').val() && arrField[0].uemail == $('#uemail').val() && arrField[0].ucity == $('#ucity').val())
$('#Save').text('Add');
else
$('#Save').text('Update');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select onchange="setValue();" id="uinfo">
<option value="">Select</option>
<option value="1">User Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="text" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button type="button" class="btn btn-success" onclick="checkAllValue();" id="Save">
<i class="icon-user icon-white"></i> Add
</button>
The (additional) jQuery code you're looking for would be something like this. Note that I added the class "changebtn" to the target button to make it work:
$(document).ready(function(){
// Save original value when document is ready
var original = $("#uinfo").val();
// Update Button when current value is different
// from original as the selection changes
$("#uinfo").on("change", function(){
if ($(this).val() != original) {
$(".changebtn").html("Update");
} else {
// Reset Button when User switches back to original
$(".changebtn").html("Add");
}
});
});
JSFiddle demo: https://jsfiddle.net/0yj5y5sb/2/
Try this way
//Object, key based on select options
var popData= {
'user-info':
{uname: 'User1', uemail: 'user1#test.com', ucity: 'user city'}
,
'emp-info':
{uname: 'Emp1', uemail: 'emp1#test.com', ucity: 'emp city'}
};
//Select change that will update values
$('#uinfo').change(function(){
$.each(popData[$(this).val()], function( i, val ) {
$('#'+i).val(val);
});
});
//When input change check based on the conditions
$('button.check').click(function(){
//Check if any changes in the fields
if(
popData[$('#uinfo').val()].uname != $('#uname').val() ||
popData[$('#uinfo').val()].uemail != $('#uemail').val() || popData[$('#uinfo').val()].ucity != $('#ucity').val()
)
{
$('button.add').text('Update');
}
//Check if no changes in the fields
else if(popData[$('#uinfo').val()].uname == $('#uname').val() &&
popData[$('#uinfo').val()].uemail == $('#uemail').val() && popData[$('#uinfo').val()].ucity == $('#ucity').val())
{
$('button.add').text('Add');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="uinfo">
<option value="">Select</option>
<option value="user-info">User Info</option>
<option value="emp-info">Emp Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail"/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="email" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button type="button" class="btn check">
<i class="icon-user icon-white"></i> Check
</button>
<button type="button" class="btn btn-success add">
<i class="icon-user icon-white"></i> Add
</button>

How to get the value of input and sum the total

This i'm trying to do, I want to get all the data in input fields using javascript and put the sum of all the fields in another input. But im getting an error, the value of total is null or blank. Can someone help me about this? Or give me clue what's causing the error.
Here my html code for the inputs i will not include all of the fields to lessen the code.
var ma = +(document.getElementById('majore').textContent);
var qu = +(document.getElementById('quize').textContent);
var hss = +(document.getElementById('hs').textContent);
var attt = +(document.getElementById('att').textContent);
var laboo = +(document.getElementById('labo').textContent);
var acttt = +(document.getElementById('act').textContent);
var recitss = +(document.getElementById('recits').textContent);
var total = ma + qu + hss + attt + laboo + acttt + recitss;
document.getElementById('totals').innerHTML = total;
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well total">
<label for="total">Total/label>
<div class="input-group">
<input type="text" class="form-control total" id="totals"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
here's my js. this code is inside in the `success function` of `ajax`.
Use value property, not textContent/innerHTML to get the value from Input-Element
Also note that you are accessing few elements which are not in the DOM, I have removed those statements from Demo
var ma = +(document.getElementById('majore').value);
var qu = +(document.getElementById('quize').value);
var hss = +(document.getElementById('hs').value);
var total = ma + qu + hss;
document.getElementById('totals').value = total;
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well total">
<label for="total">Total/label>
<div class="input-group">
<input type="text" class="form-control total" id="totals" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
You may try this code
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well total">
<label for="total">Total</label>
<div class="input-group" id="totals">
<input type="text" class="form-control total" id="totals"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<script>
function sum() {
var ma = parseInt(document.getElementById('majore').value);
var qu = parseInt(document.getElementById('quize').value);
var hss = parseInt(document.getElementById('hs').value);
var totals = ma + qu + hss;
document.getElementById('totals').innerHTML = totals;
}</script>
You can get or set the value for the input element using val property.
Get the value from the input element and sum the values
Set the value for the total input field
Here is the Code :
var total = +($('#majore').val()) + +($('#quize').val()) + +($('#hs').val());
$('#totals').val(total);
Check your output in Jsfiddle
This is simple and optimized way. Read more about val property here
function numberSum(N) {
var total = 0;
for(var i = 1; i <= N; i++){
total += i;
}
return total;
}
function run(){
val = document.getElementById("val").value;
document.getElementById("results").innerHTML=val+": "+numberSum(val)
}
<input id="val">
<input type="Submit" onclick="run();">
<p id="results"></p>
Your showing only your body part ...kindly do the script like this way

Dynamic TextFields in JSP with data from MYSQL database upon item selection

I am trying to create a form where user gets a list of products from database and upon selecting the product, retrieve the prices associated to that product and assign the value from database to the second textfield, similarly other textfields as well. Also upon changing the selection the values should get updated. Need suggestions if this is possible and how? Examples would be great. Thanks
He is what I am trying to do
<form method="post" action=".\Sale">
<div class= "form">
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<select class="form-control" name="orproductname" id="orproname" onchange="updateFields()">
<option>--Select Product--</option>
<% ProductDAO pdr = new ProductDAO(); String[] kl = pdr.getProductNames();
for(int i=0;i<kl.length;i++) {%>
<option><% out.println(kl[i]); %></option>
<% } %>
</select>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Original Price" id="orproprice" name="orproductprice" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Discount" id="orprodis" name="orproductdiscount" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Sales Tax" id="orprosalestax" name="orproductsalestax" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Final Price" id="orprofinalprice" name="orproductfinalprice" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-home" ></i>
</span>
<textarea class="form-control" type="textarea" placeholder="Shipping Address" name="orproductshippingaddress" required></textarea>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input class="form-control" type="text" placeholder="Order Date" id="datepicker" name="orproductorderdate" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<input class="form-control" type="text" placeholder="User ID" name="orproductuserid" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-picture-o"></i>
</span>
<img class="img-responsive" src="img/bride-1.jpg" alt="Product" >
</div>
<input class="btn btn-primary send" style="width:200px; margin-right:20px" type="submit" value="Order">
<input class="btn btn-primary send" style="width:200px" type="reset" value="Clear">
</form>
You can do that using ajax.
Find the below links to get the data from database using Jsp and servlets and ajax.
http://www.javacodegeeks.com/2014/09/jquery-ajax-servlets-integration-building-a-complete-application.html
How to use Servlets and Ajax?
http://www.programming-free.com/2013/03/ajax-fetch-data-from-database-in-jsp.html
Give it a try ;)
I will explain this into step by step with code.
step 1. in jsp file display all product into select option tag. and give select tag name and **id**.
step 2. using ajax to define where to get the required data.call servlet. this servlet define the your query you wants using productid. productid pass by ajax. jQuery("#your select tag id").change(function(){
var productid = jQuery(this).val();
jQuery.ajax({
async : false,
url : 'your servlet url',
type : 'POST',
dataType: 'json',
data : {'productid':productid},
success : function(response){
if (response.success == 'true' && response.html != '') {
$('#your price text box id').val(response.html)
}else{
jQuery("#user_role_parent").html("");
}
},
error : function(){
alert("Some thing went wrong!!!");
},
});
Step 3. response.html come from servlet
I hope you are understand this code and solve your problem.

Categories