The value of my input is supplemented with a variable from javascript.
But this variable is changed, i.e. the dynamic is subtracted or added.
so this value in input is also changed, but only after refreshing the page.
I would like this value in the input to be also dynamically changed, at the same time when I change the value in the variable js.
<input id="kwota2" type="text" name="kwota2" disabled>
<script>
document.getElementById("kwota2").value = localStorage.getItem('sumalist');
</script>
span .deleteitembasket changes the value of the js variable, which I pass to the input.
I've come up with a way to use a function that every time I press deleteitembasket I will overwrite the value in input, but I do not know how to create it, because I am a novice programmer. please help.
$(document).on('click', '.deleteitembasket', function () {
var nazwa = $(this).closest('.produkt').find('.nazwa').text();
var cena = $(this).closest('.produkt').find('.cenaprzedmiotu').text();
var suma = 0;
var id = $(this).closest('.produkt').attr("id");
var li = "<li data="+id+" class='produkt_w_koszyku'><b>" + nazwa + "</b> <span class='cena_w_koszyku'>" + cena + " zł</span><span style='float: right; margin-right: 30px;' class='deleteitembasket'><i class=\"fas fa-times\"></i></span></li>";
var $ul = $(this).parents('ul');
$(this).closest("li").remove();
localStorage.setItem('itemlist', $ul.html());
$("#koszyk .cena_w_koszyku").each(function () {
suma += parseFloat($(this).text());
});
$("#cena span").text(suma.toFixed(2));
localStorage.setItem('sumalist', suma.toFixed(2));
});
You can use the jQuery method .val() to change the input value dynamically,
here is an example:
$('#kwota2').val('Test');
$('.deleteitembasket').click(function() {
$('#kwota2').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="kwota2" type="text" name="kwota2" disabled>
<span class="deleteitembasket">Delete</span>
Related
I have input type text, when writing js in input field <script> alert (1) </script> it works, is it possible to disable js in input?
Thanks
<form action="" name="typing_and_press_form" id="typing_and_press_form">
<input id='typing_and_press' class="typing_and_press" type="text"
placeholder="<?php if($jobStrings) echo $jobStrings['keyword_search']; ?>">
<div class="tagsgroupkeyup"></div>
</form>
jquery:
jQuery('#typing_and_press_form').on('submit', function (event) {
event.preventDefault();
if (jQuery('#typing_and_press').val()){
var enteredValue = jQuery('#typing_and_press').val();
jQuery('.typing-press .tagsgroupkeyup').append('<div class="tagstyle"><span>' + enteredValue + '</span><span id="' + enteredValue + '" class="remove">X</span></div>');
jQuery('#typing_and_press').val('');
jQuery('#typing_and_press').text('');
}
})
This is known as a self-xss attack. Where the input is reflected onto the page, and executes javascript. To prevent this you have to use innerText, or you can also parse the input text by checking if there is any javascript in the input before showing it into the DOM.
In Jquery, you can use .text() method.
The Javascript part is:
jQuery('#typing_and_press_form').on('submit', function (event) {
event.preventDefault();
if(jQuery('#typing_and_press').val()){
var enteredValue = jQuery('#typing_and_press').val();
spanElem = jQuery('.tagsgroupkeyup').append('<div class="tagstyle"><span></span><span id="' + enteredValue + '" class="remove">X</span></div>');
spanElem.find("span:first").text(enteredValue)
jQuery('#typing_and_press').val('');
jQuery('#typing_and_press').text('');
}
})
The dynamic add/delete input rows is not working properly. The rows are created using add function, but it is not deleted properly. Basically the delete function call is not working.
$(document).ready(function(){
var counter = 1; //initlal text box count
$("#addButton").click(function () {
if(counter > 3){
alert("Only 3 textboxes allowed");
return false;
}
var selectfield = $('#selectcolumnlist option:selected').val();
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv');
newTextBoxDiv.after().html('<label>'+ selectfield + ' : </label>' + '<input type="text" name="textbox_' + selectfield + '" id="textbox_'+selectfield+'" placeholder="' + selectfield + '" value="" /><input type="button" value="Remove Button" class="remove_this" id="removeid" />');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
alert(counter);
});
$("#removeid").click(function() {
alert("i'm in");
});
}
Assuming you're creating elements in a correct way, I mean, using unique ids, you should use event-delegation:
// This example selects the element with the class
// .removeid (here you need to set a specific class) or set something unique
// per new dynamically created element.
$("#TextBoxesGroup").on('click', '.remove_this', (function() {
alert("i'm in");
}));
I need to update the price global variable. I believe it may have something to do with scope. I would appreciate it if you could be of assistance in this regard.
This is the script:
var price = 0;
var nextdayClass = $('.delivery1');
var $standardClass = $('.delivery2');
var $pickupClass = $('.delivery3');
nextdayClass.on('click', function() {
var nextday = $('#nextday').data('price');
price = nextday;
console.log(price);
});
standardClass.on('click', function () {
var standard = $('#standard').data('price');
price = standard;
console.log(price);
});
pickupClass.on('click', function () {
var pickup = $('#pickup').data('price');
price= pickup;
console.log(price);
});
console.log(price);
cartTotalHTML += '<div>' +
'<ul>' +
'<li>' +
'<div>Subtotal</div>' +
'<div>' + formatMoney(total) + '</div>' +
'</li>' +
'<li>' +
'<div>Shipping</div>' +
'<div>' + formatMoney(price) + '</div>' +
'</li>' +
'<li>' +
'<div>Total</div>' +
'<div>' + totalAfterShipping(total, price) + '</div' +
'</li>' +
'</ul>' +
'</div>';
$('#cartOutput').html(cartItemHTML);
Here is the html where i am getting my data from:
<div class="delivery">
<div>Shipping method</div>
<div>Select the one you want</div>
<div class="delivery_options">
<label>Next day delivery
<input id="nextday" type="radio" name="radio" data-name="nextday" data-price="9000">
<span class="checkmark delivery1"></span>
<span class="delivery_price">R90</span>
</label>
<label>Standard delivery
<input id="standard" type="radio" name="radio" data-name="standard" data-price="3000">
<span class="checkmark delivery2"></span>
<span >R30</span>
</label>
<label>Personal pickup
<input id="pickup" type="radio" checked="checked" data-name="pickup" data-price="0" name="radio">
<span class="checkmark delivery3"></span>
<span >Free</span>
</label>
</div>
</div>
Here is the html where i am taking my data to:
<div class="col-lg-6 offset-lg-2">
<div class="cart_total">
<div>Cart total</div>
<div>Final info</div>
<div id="cartTotalOutput">
</div>
<div><input type="submit" class="button checkout_button"></div>
</div>
</div>
</div>
There's two issues here. Firstly add() is to add an element to a collection, not to attach an event handler. To do what you want use click() or on().
Secondly, price is only updated after the click event happens, yet your logic is attempting to read it immediately. To address this you need to put the console.log() line in that event handler. Try this:
var price = 0;
var $nextdayClass = $('.delivery1');
$nextdayClass.on('click', function() {
var nextday = $('#nextday').data('price');
price = nextday;
console.log(price);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="delivery1">Click me</button>
<div id="nextday" data-price="1.99">Next day: 1.99</div>
It's also worth noting that you should avoid the use of global variables where possible. A better pattern to use would be just retrieve the data attribute which holds the price where it's actually needed and remove the price variable completely.
It has nothing to do with scope.
Look at your code:
You get an element
You say that when you click the element price should be updated (well, you try to, you made a typo and called add instead of on)
You look at price
Presumably, at some point later, you click the element.
At this point price is updated.
You don't look at it again.
JavaScript does not time travel into the past and change price before you looked at it the first time.
The record of what the value was when you looked at it that is displayed in the console will not change.
If you want to log the value after you click on the element, you have to put the code that does the logging in the function that is called when you click on the element.
var price = 0;
var nextdayClass = $('.delivery1');
nextdayClass.on('click', function() {
var nextday = $('#nextday').data('price');
price = nextday; // The window object stuff is a waste of time
console.log("Clicked value", price);
});
console.log("Initial value", price);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="delivery1">5</button>
<span id=nextday data-price=5></span>
Try JQuery on() like this, also as I assume your element may be generated dynamically, try to bind the event handler to the body element/
var price = 0;
var nextdayClass = $('.delivery1');
$('body').on('click', nextdayClass, function() {
var nextday = $('#nextday').data('price');
window['price'] = nextday;
});
console.log(price); //Prints out 0
UPDATED, TO BE MORE CLEAR:
My current field that contains the value ‘1201026404’ (which will change every time) :
<input id="ticket_fields_20323656" name="ticket[fields][20323656]" size="30" style="width:125px;" type="text" value="1201026404" tabindex="11">
The LI where I want the copied value ‘1201026404’ (which will change every time) to go when the page loads:
<ul class="multi_value_field" style="width: 99.5%;">
<li class="choice" choice_id="1201026404">1201026404<a class="close">×</a><input type="hidden" name="ticket[set_tags][]" value="1201026404" style="display: none;"></li>
</ul>
The Javascript that I have already made but need help with:
<script type="text/javascript">
copy = function()
{
var n1 = document.getElementById("ticket_fields_20323656");
var n2 = ‘what goes here??’
n2.value = n1.value;
}
</script>
does this work in firefox:
<script type="text/javascript">
copy = function()
{
var n1 = document.getElementById("ticket_fields_20323656");
var n2 = document.querySelectorAll("ul.multi_value_field li:first");
n2.innerHTML = n1.value;
}
</script>
this uses querySelectorAll which doesnt exist in IE6,7,8 - otherwise you need to use the id of the element which im not sure you have
You're going to have to use an ID on the li element.
<li id="choice_20323656">
then you can copy it like
<script type="text/javascript">
copy = function()
{
var n1 = document.getElementById("ticket_fields_20323656");
var n2 = document.getElementById("choice_20323656");
n2.innerHTML = n1.value;
}
</script>
EDIT:
If you can use jQuery 1.6 or up, this will work:
$("#ticket_fields_20323656").keyup(function(e) {
$(".choice")
.attr("choice_id",e.currentTarget.value)
.html(e.currentTarget.value
+ "<a class=\"close\">×</a><input"
+ " type=\"hidden\" name=\"ticket"
+ "[set_tags][]\" value=\""
+ e.currentTarget.value
+ "\" style=\"display: none;\">");
});
Here's a demo: http://jsfiddle.net/JKirchartz/V2L25/, However you should know, if you have multiple things with the class choice their value's going to change in the same way like this: http://jsfiddle.net/JKirchartz/V2L25/4/
I want the variable inputname to go up by 1 every time a new <input /> is added
e.g.
<input name="1" />
<input name="2" />
<input name="3" />
---html---
<p class="add">Add</p>
<div class="added"></div>
---jQuery/javascript---
$(document).ready(function() {
$("p.add").click(function() {
var inputname = somevar;
var added = "<input type=\"text\" name=\""+inputname+"\" />";
$("div.added").append(added);
});
});
here it is on jsfiddle.net if it helps -> http://jsfiddle.net/gamepreneur/54kzw/
Set inputname like this:
var inputname = $('.added input').length + 1;
This gets the total number of added inputs and increments by one, resulting in the new name.
Change the variable scope
Use this:
// declare your variable here so it exists throughout every call, instead of being
// delcared new with every call.
var inputname = somevar;
$(document).ready(function() {
$("p.add").click(function() {
var added = "<input type=\"text\" name=\""+(inputname++)+"\" />";
$("div.added").append(added);
});
});
Alternatives:
Grab the number of inputs ($('div.added input').length) and use that for a counter.
Grab the id of the last item $('div.added input:last').prop('name')) and increment it.
You need to declare inputname in the global scope so that it lasts longer than just the duration of the click function and then you need to increment it each time you use it.
I modified your fiddle to this: http://jsfiddle.net/jfriend00/54kzw/2/
var inputname = 1;
$(document).ready(function() {
$("p.add").click(function() {
var added = "<input type='text' name='" + inputname++ + "' />";
$("div.added").append(added);
});
});
Try
$(document).ready(function() {
$("p.add").click(function() {
var inputname = $('input', $("div.added")).length + 1;
var added = "<input type=\"text\" name=\"" + inputname + "\" />";
$("div.added").append(added);
});
});
Consider adding some other selectors to choose those inputs (like a class selector)