In this code I want to calculate discount present.
There is one offer selection list if we select offer as yes then I shows <div id="dis11"> i.e. ($("#dis11").show();). There is jquery call. In that div four text boxes are there offerstart date, end date, discount prize, discount%. I want to take discount prize in jquery call, but I didn't get it.
adis=document.getElementById("discount").value;
that's the problem.
In this there is prize text box which contains original prize of product. Using that prize and discount prize I have to calculate discount persent. On prize text box I gave onblur event. Bez if prize change discount present also going to change.
<div class="formrow1">
<div class="txttitle_large1">Prize</div>
<div class="txtinputouter1">
<input type="text" name="prize" id="prize1" onblur="prizf();">
</div>
</div>
</div>
<div class="txttitle" style="width:30px;">Offer</div>
<div class="txtinputouter1">
<select class="required" name="offer" id="offers" onChange="discountajax();">
<option value="11">--Select offer--</option>
<option value="1">yes</option>
<option value="0">no</option>
</select>
<div id="discountinfo">
</div>
</div>
<div style="width:70%;height:auto;float:left;margin-top:10px; display:none;" id="dis11">
<div class="formrow1">
<div class="txttitle_large1">OfferStart</div>
<div class="txtinputouter1">
<input type="text" name="offerstart" id="offerstart"/>
</div>
</div>
<div class="formrow1">
<div class="txttitle_large1">OfferEnd</div>
<div class="txtinputouter1">
<input type="text" name="offerEnd" id="offerEnd"/>
</div>
</div>
<div class="formrow1">
<div class="txttitle_large1">Discount Prize</div>
<div class="txtinputouter1">
<input type="text" name="discountprize" id="discount"/>
</div>
</div>
<div class="formrow1">
<div class="txttitle_large1">Discount%</div>
<div class="txtinputouter1">
<input type="text" name="discountpercent" id="discountpercent"/>
</div>
</div>
</div>
--------script---------------
<script>
function prizf()
{
alert("hi");
discountajax();
}
</script>
<script>
function discountajax()
{
p=document.getElementById("prize1").value;
alert(p);
id1=document.getElementById("offers").value;
alert(id1);
if(id1==1)
{
$("#dis11").show();
adis=document.getElementById("discount").value;
alert(adis);
}
}
</script>
Explanation
Your function prizf run only two times. one starting and second onchange but you are able to get the value of discount when it start to visible for entering values.
you are getting undefined $ error because jquery is not included.
I create a function for getting value of discount.
check the below code.
BTW this is not the standard code.
<script>
function discountajax()
{
p = document.getElementById("prize1").value;
//alert(p);
id1 = document.getElementById("offers").value;
if (id1 == 1)
{
// alert("id"+id1);
$("#dis11").show();
adis = document.getElementById("discount").value;
alert(adis);
}
}
$(document).ready(function () {
$("#discount").focusout(function () {
prizf();
})
})
</script>
Related
I'm making an expense tracker with HTML, CSS, and JavaScript and I ran into a problem where when I first load up the page I can add as many div items I want, but then after I delete one (or more) of them, the adding button doesn't work anymore. The error I get in the console is:
main.js:8 Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at HTMLButtonElement.duplicate (main.js:8:25).
I have a function for removing a div (in this case the div is the expense item in the list), called deleteItem(), and another one for adding a div, called duplicate(). I'm not sure what is happening, but if anyone can help, that would be great.
I've seen a few possible solutions on YouTube that use JQuery, but since I'm still learning JavaScript, I'm trying not to get into that just yet. However, if the solution requires JQuery or anything like that, let me know.
document.getElementById('new-item-btn').onclick = duplicate;
var original = document.getElementById('expense-item');
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "expense-item";
original.parentNode.appendChild(clone);
}
function deleteItem() {
var removeItem = document.getElementById('expense-item');
removeItem.remove();
}
<main id="main">
<div class="container" id="container">
<div class="expense-item" id="expense-item">
<button class="delete-btn" onclick="deleteItem()">Delete</button>
<div class="expense-inputs">
<label for="expense-name"></label>
<input type="text" placeholder="Expense Name" id="expense-name">
<label for="expense-category"></label>
<select name="expense-category" id="expense-category">
<option value="">Category</option>
<option value="groceries">Groceries</option>
<option value="housing">Housing</option>
<option value="utilities">Utilities</option>
</select>
<label for="expense-amount"></label>
<input type="text" id="expense-amount" name="expense-amount" placeholder="Amount">
</div>
</div>
</div>
<div class="info">
<div class="new-item">
<button class="new-item-btn" id="new-item-btn" onclick="duplicate()">New Item</button>
</div>
</div>
</main>
What you can do to make the delete method dynamic and work without id is:
function deleteItem(obj) { // <- obj refers to the clicked object because of `this` in onclick="deleteItem()"
var removeItem = obj.parentElement; // <- use parentElement to target the "<div class="expense-item" id="expense-item">"
removeItem.remove();
}
Then you just need to add this to onclick="deleteItem()"
Note I would advice you to still change the id to something new on the create but this is the example of the delete method.
demo
document.getElementById('new-item-btn').onclick = duplicate;
var original = document.getElementById('expense-item');
function duplicate() {
var clone = original.cloneNode(true);
original.parentNode.appendChild(clone);
}
function deleteItem(obj) {
var removeItem = obj.parentElement;
removeItem.remove();
}
<main id="main">
<div class="container" id="container">
<div class="expense-item" id="expense-item">
<button class="delete-btn" onclick="deleteItem(this)">Delete</button>
<div class="expense-inputs">
<label for="expense-name"></label>
<input type="text" placeholder="Expense Name" id="expense-name">
<label for="expense-category"></label>
<select name="expense-category" id="expense-category">
<option value="">Category</option>
<option value="groceries">Groceries</option>
<option value="housing">Housing</option>
<option value="utilities">Utilities</option>
</select>
<label for="expense-amount"></label>
<input type="text" id="expense-amount" name="expense-amount" placeholder="Amount">
</div>
</div>
</div>
<div class="info">
<div class="new-item">
<button class="new-item-btn" id="new-item-btn" onclick="duplicate()">New Item</button>
</div>
</div>
</main>
You can, in most instances, remove IDs when creating dynamic content and use other means of identifying DOM nodes - such as querySelector in combination with event.target. Inspecting an Event to determine the origin of the click is probably the most reliable method.
The dynamically added content does not know in advance IDs or other attributes so by supplying the event as an argument to the deleteItem method you can identify the newly added content from button to container and remove it quite easily.
document.querySelector('.new-item-btn').onclick = duplicate;
function duplicate() {
const original = document.querySelector('[data-id="expense-item"]');
original.parentNode.appendChild( original.cloneNode(true) );
}
function deleteItem(e) {
let item = e.target.closest('.expense-item');
if( document.querySelectorAll('.expense-item').length > 1 ){
item.parentNode.removeChild( item );
}
}
<main>
<div class="container">
<div class="expense-item" data-id="expense-item">
<button class="delete-btn" onclick="deleteItem(event)">Delete</button>
<div class="expense-inputs">
<label>
<input type="text" placeholder="Expense Name" />
</label>
<label>
<select name="expense-category" data-id="expense-category">
<option value="">Category</option>
<option value="groceries">Groceries</option>
<option value="housing">Housing</option>
<option value="utilities">Utilities</option>
</select>
</label>
<label>
<input type="text" name="expense-amount" placeholder="Amount" />
</label>
</div>
</div>
</div>
<div class="info">
<div class="new-item">
<button class="new-item-btn" data-id="new-item-btn" onclick="duplicate()">New Item</button>
</div>
</div>
</main>
I am creating a web app (using thymeleaf, html, css, javascript) and I ran into a problem. Say I have a search bar and a button like this:
Now this represents the functionality of an app and currently it can only search records from a table by their name. But I want to add some other functions like "search by population", "search by capital" etc. I was planning on creating a drop-down list next to the search bar where these options will be included, and the user will select from that list how he wants to search for a record. I can't see a way to do that. Currently this is a search bar code:
<h4 class="left">
<form ui-jp="parsley" th:action="#{/events/showByState}" th:object="${myState}" method="get">
<div class="row m-b">
<div class="child">Search by State Name:</div>
<div class="child"><input id="filter" type="text" th:field="*{officialStateName}" class="form-control input-sm w-auto inline m-r"/></div>
<div class="child box-3">
<button class="btn">Search!</button>
</div>
</div>
</form>
</h4>
So it is unclear for me how I do this because I need to specify the link for button based on what user will choose from the list. Any help is appreciated!
You can create a <select> element with options whose value indicate what the action of the form should be. Whenever its value changes, you can update the form's action.
document.getElementById('search-by').addEventListener('change', function(e) {
let searchBy = this.value;
console.log(searchBy);
this.form.action = `/events/${searchBy}`;
});
<form ui-jp="parsley" th:action="#{/events/showByState}" th:object="${myState}" method="get">
<div class="row m-b">
<div class="child">Search by
<select id="search-by">
<option value="showByState">State Name</option>
<option value="showByPopulation">Population</option>
<option value="showByCapital">Capital</option>
</select>:</div>
<div class="child"><input id="filter" type="text" th:field="*{officialStateName}" class="form-control input-sm w-auto inline m-r" /></div>
<div class="child box-3">
<button class="btn">Search!</button>
</div>
</div>
</form>
I have two forms. form1's content is a choice option filled by name, matricule, and salary, and a button validate, which hides form1 and displays form2. I want when I click on the button, the contents of select to separate and show like this:
name:
registration number :
salary :
$(document).ready(function() {
$("#hide").click(function() {
let name1 = $('#name').text();
let matricule1 = $('#matricule').text();
let salary1 = $('#salary').text();
$('#nam').text(name1);
$('#mat').text(matricule1);
$('#sal').text(salary1);
$("#form1").hide();
$("#form2").show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form1">
<div class="form-group col-md-3">
<select class="form-control">
<option>
<div id="name">imad</div>
<div id="matricule">22</div>
<div id="salary">6000</div>
</option>
</select>
</div>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success " id="hide">valider</button>
</div>
</div>
<!--form 2-->
<div id="form2">
<h4>name : <span id="nam"></span></h4>
<h4>matricule : <span id="mat"></span></h4>
<h4>salary : <span id="sal"></span></h4>
</div>
As Rory said, you cannot have HTML within an option element, this is invalid. Use a custom drop-down select library (some examples of such are here: https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/)
Now, if you know the format of the data you are using to populate the select option values with (you are getting data from server side, etc.), you could then format the data on the client side with some sort of separator to create a chained together option value for the 3 different fields, like I've done in the example below using a dash (-). You could then split the string value of the option selected, and parse it out to individual text fields. Again, this is all dependent on how you get and format the data within the select element.
$(document).ready(function() {
$("#hide").click(function() {
let selectOption = $('.form-control').val();
let optionSplits = selectOption.split('-');
let name1 = optionSplits[0];
let matricule1 = optionSplits[1];
let salary1 = optionSplits[2];
$('#nam').text(name1);
$('#mat').text(matricule1);
$('#sal').text(salary1);
$("#form1").hide();
$("#form2").show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form1">
<div class="form-group col-md-3">
<select class="form-control">
<option value="imad-22-6000">imad 22 6000</option>
<option value="gupta-24-8000">gupta 24 8000</option>
<option value="ganesh-27-5000">ganesh 27 5000</option>
</select>
</div>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success " id="hide">valider</button>
</div>
</div>
<!--form 2-->
<div id="form2">
<h4>name : <span id="nam"></span></h4>
<h4>matricule : <span id="mat"></span></h4>
<h4>salary : <span id="sal"></span></h4>
</div>
I want to populate the value of the "eventTitle" in "Requirement" input box when some one click on the corresponding check box. i.e If some one clieck on the check box of Vels Group Of Instutions then automatically i want this to populate in texbox with name "Requirement" if multiple check box are clicked i want it to be comma seperated. Below is the code i tried to get but it is not working and getting undefined.
<div class="wid100">
<div class="eventTitle">Vels Group Of Instutions</div>
<div class="eventDate">2017-07-25</div>
<div class="eventVenue">This is world wide institute of technology </div>
<div class="selectEvent">
<input type="checkbox" class="seminar selected" id="179">
<label for="179"></label>
</div>
</div>
<div class="wid100">
<div class="eventTitle">Title goes here</div>
<div class="eventDate">2017-07-25</div>
<div class="eventVenue">sdfdsafasdfdsafdsafsadfsdfsdf </div>
<div class="selectEvent">
<input type="checkbox" class="seminar" id="179">
<label for="179"></label>
</div>
</div>
<input type="text" name="Requirement" placeholder="Title 01" id="divclass" required="required" class="pull-left" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
$(".seminar").click(function () {
if ($(this).is(":checked")) {
//checked
$(this).addClass("selected");
var event_title = "";
event_title = $(".selected").siblings('.eventTitle').val();
console.log(event_title); return false;
} else {
//unchecked
$(this).removeClass("selected");
}
});
.eventTitle is not the sibling of .selected and the .eventTitle is a div element having no value, text there. change this line
event_title = $(".selected").siblings('.eventTitle').val();
to
event_title = $(this).parent().siblings('.eventTitle').text();
or
event_title = $(this).parent().siblings('.eventTitle').html();
The issue you have is because .eventTitle is not a sibling of the clicked checkbox, so the DOM traversal logic is wrong. div elements also do not have a val(), so you should use text() or html() instead.
However, you can improve the logic and also achieve the comma separated list of the selected event titles by using map() to build an array which you can then join() before setting in the value of #divclass. Try this:
$(".seminar").click(function() {
$(this).toggleClass('selected', this.checked);
var eventNames = $('.seminar:checked').map(function() {
return $(this).closest('.wid100').find('.eventTitle').text();
}).get().join(',');
$('#divclass').val(eventNames);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wid100">
<div class="eventTitle">Vels Group Of Instutions</div>
<div class="eventDate">2017-07-25</div>
<div class="eventVenue">This is world wide institute of technology </div>
<div class="selectEvent">
<input type="checkbox" class="seminar selected" id="179">
<label for="179"></label>
</div>
</div>
<div class="wid100">
<div class="eventTitle">Title goes here</div>
<div class="eventDate">2017-07-25</div>
<div class="eventVenue">sdfdsafasdfdsafdsafsadfsdfsdf </div>
<div class="selectEvent">
<input type="checkbox" class="seminar" id="179">
<label for="179"></label>
</div>
</div>
<input type="text" name="Requirement" placeholder="Title 01" id="divclass" required="required" class="pull-left" size="100" />
I'd suggest changing the id of the #divclass to something more descriptive, as the element is not a div, and it's an identifier, not a class.
Finally, your .seminar elements have the same id attribute which is invalid. You should ensure that the ids are unique within the DOM - assuming that this is not just a typo from copy/pasting the code in the question.
There are three fields(first name, Last name & age) displayed in text boxes. Each field is displayed in separate div's. There are 4 records. On clicking a sort button above each field the div records should be sorted based on the data type of the field and should displayed in the HTML page.
I tried the solution in this link
I can't use this because the records are displayed in text box within the div.
<div id="content">
<div>
<div class="price"><input type="text" class="pri" value="120"/></div>
<div class="dateDiv">2012-05-09 20:39:38.0</div>
<div class="distance">20 mile</div>
</div>
<div>
<div class="price"><input type="text" class="pri" value="123"/></div>
<div class="dateDiv">2012-05-10 20:39:38.0</div>
<div class="distance">30 mile</div>
</div>
<div>
<div class="price"><input type="text" class="pri" value="100" /></div>
<div class="dateDiv">2012-05-11 20:39:38.0</div>
<div class="distance">50 mile</div>
</div>
<div>
<div class="price"><input type="text" class="pri" value="124"/></div>
<div class="dateDiv">2012-05-12 20:39:38.0</div>
<div class="distance">60 mile</div>
</div>
</div>
How can I do this in javascript?
see this demo using jquery.tinysort.min.js
see also this one
You can use knockoutjs to do something like that.
For example, the html:
<div id="content" data-bind="foreach: lines">
<div class="fname"><input type="text class="pri" data-bind="value: fname"/></div>
<div class="lname" data-bind="text: lname"/>
<div class="age" data-bind="text: age"/>
</div>
Javascript:
function EachDivViewModel(line)
{
this.fname = line.fname;
this.lname = line.lname;
this.age = line.age;
}
function YourViewModel()
{
var self = this;
self.lines = ko.observableArray([]); // this array will contain elements of EachDivViewModel type
self.handlerForYourSortButtongs = function() {
// Code here to sort the array based on the button clicked
// The UI will automatically get updated as you reorder the elements in the lines array
}
}
$(document).ready(function() {
var yourViewModelInstance = new YourViewModel();
// Code to get the lines here
ko.applyBindings(yourViewModelInstance);
});
It can be done using tablesorter.
Hope that will help you out.