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>
Related
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>
I need to insert some html to node after ajax call in javascript.
I use framework, but it doesn't matter. Important thing - insertion content in ajax callback:
// added filterWrapper to DOM
BX.ajax.get(
'/get_filter_for_diagrams.php',
{
'sessid': BX.bitrix_sessid()
},
function (data)
{
filterWrapper.innerHTML = data;
}
);
After adding content via innerHTML my window scrolls to this element, but I not want this behaviour.
I try make:
window.scrollTo(0,0);
But all the same - scroll to element.
How can I prevent scroll to element?
UPD:
generated html
<!-- Final :: Search -->
<div class="main-ui-filter-search main-ui-filter-no-search main-ui-filter-theme-default" id="filter_diagrams_underwriters_search_container">
<input
type="text"
tabindex="1"autofocus=""value=""
name="FIND"
placeholder="Filter"
class="main-ui-filter-search-filter"
id="filter_diagrams_underwriters_search"
autocomplete="off">
<div class="main-ui-item-icon-block">
<span class="main-ui-item-icon main-ui-search"></span>
<span class="main-ui-item-icon main-ui-delete"></span>
</div>
</div>
<!--'start_frame_cache_xIeC97'-->
<script type="text/html" id="filter_diagrams_underwriters_GENERAL_template">
<div class="main-ui-filter-wrapper main-ui-filter-value-required-mode main-ui-filter-theme-default">
<div class="main-ui-filter-inner-container">
<div class="main-ui-filter-sidebar">
<div class="main-ui-filter-sidebar-title">
<h5 class="main-ui-filter-sidebar-title-item">Filters</h5>
</div><!--main-ui-filter-sidebar-->
<div class="main-ui-filter-sidebar-item-container">
<div class="main-ui-filter-sidebar-item main-ui-hide" data-id="tmp_filter" >
<span class="main-ui-item-icon main-ui-filter-icon-grab" title="Pull to sort the filters list"></span>
<span class="main-ui-filter-sidebar-item-text-container">
<span class="main-ui-filter-sidebar-item-text">Current month</span>
<input type="text" placeholder="Filter name" value="Current month" class="main-ui-filter-sidebar-item-input">
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
</span>
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
<span class="main-ui-item-icon main-ui-filter-icon-edit" title="Edit filter name"></span>
<span class="main-ui-item-icon main-ui-delete" title="Delete filter"></span>
<div class="main-ui-filter-edit-mask"></div>
</div>
<div class="main-ui-filter-sidebar-item main-ui-filter-current-item main-ui-hide" data-id="default_filter" >
<span class="main-ui-item-icon main-ui-filter-icon-grab" title="Pull to sort the filters list"></span>
<span class="main-ui-filter-sidebar-item-text-container">
<span class="main-ui-filter-sidebar-item-text">Filter</span>
<input type="text" placeholder="Filter name" value="Filter" class="main-ui-filter-sidebar-item-input">
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
</span>
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
<span class="main-ui-item-icon main-ui-filter-icon-edit" title="Edit filter name"></span>
<span class="main-ui-item-icon main-ui-delete" title="Delete filter"></span>
<div class="main-ui-filter-edit-mask"></div>
</div>
<div class="main-ui-filter-sidebar-item main-ui-filter-new-filter">
<div class="main-ui-filter-edit-mask"></div>
<input class="main-ui-filter-sidebar-edit-control" type="text" placeholder="Filter name">
</div>
</div><!--main-ui-filter-sidebar-item-container-->
</div><!--main-ui-filter-sidebar-->
<div class="main-ui-filter-field-container">
<div class="main-ui-filter-field-container-list">
</div>
<div class="main-ui-filter-field-add">
<span class="main-ui-filter-field-add-item">Add field</span>
<span class="main-ui-filter-field-restore-items">Restore default fields</span>
</div><!--main-ui-filter-field-add-->
</div><!--main-ui-filter-field-container-->
<div class="main-ui-filter-bottom-controls">
<div class="main-ui-filter-add-container">
<span class="main-ui-filter-add-item">Save filter</span>
<span class="main-ui-filter-add-edit" title="Configure filter"></span>
<span class="main-ui-filter-reset-link">
<span class="main-ui-filter-field-button-item">Reset to default</span>
</span>
</div><!--main-ui-filter-add-container-->
<div class="main-ui-filter-field-preset-button-container">
<div class="main-ui-filter-field-button-inner">
<span class="webform-small-button webform-small-button-blue main-ui-filter-field-button main-ui-filter-find">
<span class="main-ui-filter-field-button-item">Search</span>
</span>
<span class="webform-small-button webform-small-button-transparent main-ui-filter-field-button main-ui-filter-reset">
<span class="main-ui-filter-field-button-item">Reset</span>
</span>
</div>
</div>
<div class="main-ui-filter-field-button-container">
<div class="main-ui-filter-field-button-inner">
<label class="main-ui-filter-field-button main-ui-filter-save-for-all" for="save-for-all">
<input id="save-for-all" class="main-ui-filter-field-button-checkbox" type="checkbox">
<span class="main-ui-filter-field-button-item">Apply for all users</span>
</label>
<span class="webform-small-button webform-small-button-accept main-ui-filter-field-button main-ui-filter-save">
<span class="main-ui-filter-field-button-item">Save</span>
</span>
<span class="webform-small-button webform-small-button-transparent main-ui-filter-field-button main-ui-filter-cancel">
<span class="main-ui-filter-field-button-item">Cancel</span>
</span>
</div>
</div>
</div><!--main-ui-filter-bottom-controls-->
</div><!--main-ui-filter-inner-container-->
</div><!--main-ui-filter-wrapper-->
</script>
<!--'end_frame_cache_xIeC97'-->
UPD2: after regular expression on remove autofocus (console.log output):
<!-- Final :: Search -->
<div class="main-ui-filter-search main-ui-filter-no-search main-ui-filter-theme-default" id="filter_diagrams_underwriters_search_container">
<input
type="text"
tabindex="1"value=""
name="FIND"
placeholder="Filter"
class="main-ui-filter-search-filter"
id="filter_diagrams_underwriters_search"
autocomplete="off">
<div class="main-ui-item-icon-block">
<span class="main-ui-item-icon main-ui-search"></span>
<span class="main-ui-item-icon main-ui-delete"></span>
</div>
</div>
<!--'start_frame_cache_xIeC97'-->
<script type="text/html" id="filter_diagrams_underwriters_GENERAL_template">
<div class="main-ui-filter-wrapper main-ui-filter-value-required-mode main-ui-filter-theme-default">
<div class="main-ui-filter-inner-container">
<div class="main-ui-filter-sidebar">
<div class="main-ui-filter-sidebar-title">
<h5 class="main-ui-filter-sidebar-title-item">Filters</h5>
</div><!--main-ui-filter-sidebar-->
<div class="main-ui-filter-sidebar-item-container">
<div class="main-ui-filter-sidebar-item main-ui-hide" data-id="tmp_filter" >
<span class="main-ui-item-icon main-ui-filter-icon-grab" title="Pull to sort the filters list"></span>
<span class="main-ui-filter-sidebar-item-text-container">
<span class="main-ui-filter-sidebar-item-text">Current month</span>
<input type="text" placeholder="Filter name" value="Current month" class="main-ui-filter-sidebar-item-input">
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
</span>
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
<span class="main-ui-item-icon main-ui-filter-icon-edit" title="Edit filter name"></span>
<span class="main-ui-item-icon main-ui-delete" title="Delete filter"></span>
<div class="main-ui-filter-edit-mask"></div>
</div>
<div class="main-ui-filter-sidebar-item main-ui-filter-current-item main-ui-hide" data-id="default_filter" >
<span class="main-ui-item-icon main-ui-filter-icon-grab" title="Pull to sort the filters list"></span>
<span class="main-ui-filter-sidebar-item-text-container">
<span class="main-ui-filter-sidebar-item-text">Filter</span>
<input type="text" placeholder="Filter name" value="Filter" class="main-ui-filter-sidebar-item-input">
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
</span>
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
<span class="main-ui-item-icon main-ui-filter-icon-edit" title="Edit filter name"></span>
<span class="main-ui-item-icon main-ui-delete" title="Delete filter"></span>
<div class="main-ui-filter-edit-mask"></div>
</div>
<div class="main-ui-filter-sidebar-item main-ui-filter-new-filter">
<div class="main-ui-filter-edit-mask"></div>
<input class="main-ui-filter-sidebar-edit-control" type="text" placeholder="Filter name">
</div>
</div><!--main-ui-filter-sidebar-item-container-->
</div><!--main-ui-filter-sidebar-->
<div class="main-ui-filter-field-container">
<div class="main-ui-filter-field-container-list">
</div>
<div class="main-ui-filter-field-add">
<span class="main-ui-filter-field-add-item">Add field</span>
<span class="main-ui-filter-field-restore-items">Restore default fields</span>
</div><!--main-ui-filter-field-add-->
</div><!--main-ui-filter-field-container-->
<div class="main-ui-filter-bottom-controls">
<div class="main-ui-filter-add-container">
<span class="main-ui-filter-add-item">Save filter</span>
<span class="main-ui-filter-add-edit" title="Configure filter"></span>
<span class="main-ui-filter-reset-link">
<span class="main-ui-filter-field-button-item">Reset to default</span>
</span>
</div><!--main-ui-filter-add-container-->
<div class="main-ui-filter-field-preset-button-container">
<div class="main-ui-filter-field-button-inner">
<span class="webform-small-button webform-small-button-blue main-ui-filter-field-button main-ui-filter-find">
<span class="main-ui-filter-field-button-item">Search</span>
</span>
<span class="webform-small-button webform-small-button-transparent main-ui-filter-field-button main-ui-filter-reset">
<span class="main-ui-filter-field-button-item">Reset</span>
</span>
</div>
</div>
<div class="main-ui-filter-field-button-container">
<div class="main-ui-filter-field-button-inner">
<label class="main-ui-filter-field-button main-ui-filter-save-for-all" for="save-for-all">
<input id="save-for-all" class="main-ui-filter-field-button-checkbox" type="checkbox">
<span class="main-ui-filter-field-button-item">Apply for all users</span>
</label>
<span class="webform-small-button webform-small-button-accept main-ui-filter-field-button main-ui-filter-save">
<span class="main-ui-filter-field-button-item">Save</span>
</span>
<span class="webform-small-button webform-small-button-transparent main-ui-filter-field-button main-ui-filter-cancel">
<span class="main-ui-filter-field-button-item">Cancel</span>
</span>
</div>
</div>
</div><!--main-ui-filter-bottom-controls-->
</div><!--main-ui-filter-inner-container-->
</div><!--main-ui-filter-wrapper-->
</script>
<!--'end_frame_cache_xIeC97'-->
The autofocus attribute will make the control, well, autofocus. Thus the page will scroll to there.
To demonstrate, in this actual page (this SO page), try executing (using dev tools console)
document.getElementsByClassName('js-primary-footer-links')[0].innerHTML = "<input autofocus='' type='text'/>"
VS
document.getElementsByClassName('js-primary-footer-links')[0].innerHTML = "<input type='text'/>"
Is the generated content also under your control? - if not, you can just remove that part from the returned data, before putting it on the page (using innerHTML)
ie
filterWrapper.innerHTML = data.replace('autofocus=""', '');
EDIT: your new code does not trigger the scroll for me anymore, so there is something else then as well. Maybe in the source of your current page, or still something in the framework.
Example with your supplied code (save in test.html and open in browser):
<html>
<head>
<script type="text/template" id="content">
<!-- Put your processed HTML here, for clearity - I did not include it here-->
<!--Your old html did trigger the scroll, your new html doesnt-->
</script>
</head>
<body>
<input type="button" onclick="load()" value="load"/>
<div style="background-color: green; height: 100%"></div>
<div id="diva"></div>
</body>
</html>
I have an ADD button that adds a form field when clicked on. I want the new form field button to change when it is added to a REMOVE button. How do I change the buttons (keep in mind I'm still learning jquery). Here's my code
HTML
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }} inputFields">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autofocus>
#if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
#endif
</div>
<a class="addbtn"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i></a>
</div>
Script
$(document).ready(function(){
$(".addbtn").on('click', function(){
var ele = $(this).closest('.inputFields').clone(true);
$(this).closest('.inputFields').after(ele);
})
});
There are two options. Create two buttons and hide/show them or you can use one button and change its content to what you need. Of cours with the second option you have to check the click event if it should be a delete or an add.
I think this is what you are looking for
$(document).ready(function(){
$(".deletebtn").hide();
$(".wrapper").on('click', '.addbtn', function(){
var ele = $(this).closest('.inputFields').clone(true);
$(this).closest('.inputFields').after(ele);
var el = $(this).closest('.inputFields').next();
el.find('.addbtn').hide();
el.find('.deletebtn').show();
});
$(".wrapper").on('click', '.deletebtn', function(){
$(this).closest('.inputFields').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="form-group inputFields">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="" required autofocus>
</div>
<a class="addbtn"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i> Add</a>
<a class="deletebtn"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i> Remove</a>
</div>
</div>
Add this to your $('.addbtn').on('click'...);...
$('.addbtn').hide();
$('.removebtn').show();
And add this to your html right below your addbtn...
<a class="removebtn">
<i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i>
</a>
you can manipulate the dynamic dom object you are creating, just as you can manipulate any dom object in jquery. for example, you could do something like (just a poc, needs to keep working on this):
$(document).ready(function(){
$(".addbtn").on('click', function(){
var ele = $(this).closest('.inputFields').clone(true);
ele.find(".addbtn").replaceWith("HTML FOR REMOVE BUTTON");
$(this).closest('.inputFields').after(ele);
})
});
I have some fields to edit user' data. One of the field is also used in breadcrumb:
I use ng-model to bind all the fields:
...
<ol class="breadcrumb">
<li>Home</li>
<li>{{user.name}}</li>
<li class="active">Profile</li>
<li class="active">Edit</li>
</ol>
<hr>
<form role="form" class="col-sm-2">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" ng-model="user.name" placeholder="Username" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" ng-value="user.birthday" placeholder="Birthday" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" ng-value="user.city" placeholder="City" class="form-control">
</div>
<button id="submit" ng-click="saveUser(user)" class="btn btn-success pull-right">Save</button>
</form>
...
The problem and also the right behavior of ng-model changes the name value of breadcrumb on input updating:
Is it possible to set value in breadcrumb as a static and prevent it from changing?
The actual result I want to achieve:
Answer is that I should use one-time data-binding using :: on my li element in the breadcrumb like so:
<li>{{::user.name}}</li>
It prevents data from future changing once it was rendered.
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.