Number of items does not appear in the list of arrays when sending to whatsapp. Only the item name and value. How could I solve it? Can someone help me?
When I click to send to whatsapp, the correct name and value is sent, but the quantity of the item is not informed. What am I doing wrong?
CODE ONLINE:
https://codepen.io/cinthia-danielle/pen/PoNQBdR
<script>
function displayCart() {
var cartArray = shoppingCart.listCart();
var output = "";
for(var i in cartArray) {
output += `<tr>
<td style="font-size:12px;"><strong>•</strong> ${cartArray[i].name}</td>
<td><div class='input-group'><button class='minus-item input-group-addon btn btn-primary menosItemCB' data-name='${cartArray[i].name}'>-</button>
<input type='button' style="margin:2px; font-size:12px;" class='item-count form-control numberItemCB' data-name='${cartArray[i].name}' value='${cartArray[i].count}'><button style="margin-left: 4px;" class='plus-item btn btn-primary input-group-addon maisItemCB' data-name='${cartArray[i].name}'>+</button></div></td>
=
<td style="font-size:12px;"> $ ${cartArray[i].total}<button class='delete-item btn btn-danger deleteItemCB' data-name='${cartArray[i].name}''>delete</button></td>
</tr><br>`;
}
$('.send_form').on("click",function(){
var input_blanter = document.getElementById('wa_name');
/* Whatsapp Settings */
var walink = 'https://web.whatsapp.com/send',
phone = 'xxxxxxxxxxxx',
walink2 = 'Cart Items';
/* Smartphone Support */
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var walink = 'whatsapp://send';
}
if("" != input_blanter.value){
/* Call Input Form */
var totalC = total.toFixed(2);
/* Final Whatsapp URL */
var blanter_whatsapp = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' +
'Name : ' + input_name1 + '%0A%0A' + 'Cart: ' + totalC + '%0A%0A' + itemsCart ;
/* Whatsapp Window Open */
window.open(blanter_whatsapp,'_blank');
}
});
}
displayCart();
</script>
HTML:
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<table class="show-cart table"></table>
<form class="whatsapp-form">
<input class="validate" id="wa_name" name="name" required="" type="text" value=''/>
<label>Your Name</label>
<a class="send_form" href="javascript:void" type="submit" title="Send to Whatsapp">Send to Whatsapp</a>
</form>
</body>
EDIT
So far I tried to make the script work, but I couldn't. The list does not come with the number of items. I am a beginner and am unable to find an answer.
As commented before the issue is that when you use .text() to get your info, is not getting the amount of products because you are using an input.
In this case innerText will not contain any text, because the info you want to get is in the input's value attribute.
The best way to go about this would be to build your itemsCart string from your variables in your javascript code and not from the html generated.
However if you want to do it like that, you should iterate over each td in a tr. And use the value attribute to get your amount of products, like so:
itemsCart = $(".show-cart > tbody > tr").toArray().map(productItem => {
let desc = $(productItem).children('td:nth-child(1)').text() + ',';
desc += ' Amount: ' + $(productItem).find('td > div > input').val() + ',';
desc += ' Price: ' + $(productItem).children('td:nth-child(3)').text();
return desc;
}).join('\n')
Then add to your URL with :
encodeURI(itemsCart)
that will yield:
%E2%80%A2%20Product%20three,%20Amount:%203,%20Price:%20$%2090.00%20%0A%E2%80%A2%20Product%20two,%20Amount:%201,%20Price:%20$%2020.00%20
which decoded is:
• Product three, Amount: 3, Price: $ 90.00
• Product two, Amount: 1, Price: $ 20.00
I would also recommend not using %0A, just build your string as if you were to output that to console and then do encodeURI(text) to add it to your URL.
It will make your code much more readable.
PD:Also try to indent properly your code to make it more readable.
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
I am editing an existing Smarty Template that has JavaScript like below which builds a portion of the page.
In the code snippet of JavaScript below you can see a Value for an HTML Input field is set with this JavaScript variable var priority
var priority = 'Urgent';
e.innerHTML += '<input name="priority_'+num+'" id="priority_'+num+'" size=6 type="text" value="'+priority+'" class="priority">';
In my template file there is many different variables and sections very similar to this one posted above. if i can get help with this one, then i can apply the changes across all my other ones so there is no need to post them all here.
What I need to do is replace this text input field with a Dropdown Selection field and then also have the correct value to be selected based on the value of the var priority variable.
So the new field would look something like this instead of the old text input field shown above...
e.innerHTML += '<select name="priority_'+num+'" id="priority_'+num+'">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
<option value="Urgent">Urgent</option>
</select>';
But I would then need to have the value of this JavaScript variable var priority to have the correct selection value SELECTED
I would appreciate any help I can get with this please?
UPDATES
After trying out a couple ideas from the comments I have realized I need to go ahead an post more of my code and explain more as it seems to be a bit more complex than I had thought originally.
So below is a JavaScript function that gets called which inserts a Row of HTML form inputs and selections each time the Function is called. It not only inserts this row into the DOM but if currecnt values are supplied, it then populates the Values for each field as well. The problem is it is currently only text input fields and I am trying to convert a few of the text fields into Selection fields.
<script type='text/javascript'>
var project_tasks = new Array();
var priotities = ['Low', 'Medium', 'Urgent'];
YAHOO.util.Event.onDOMReady(function(){
// code iterates my PHP and calls this for each existing Tasks row to add and
// Load in all the existing Tasks for this record.
add_task_row("","fgsdgsdfjhg","gsdgsdfhjgh","hsdgsdfj","Low","klk");
add_task_row("","sdgsdfgdfg","dfgsdfgsdfg","dfgdsfg","Urgent","hlf");
});
function add_task_row(taskid,name,description,status,priority,type){
var ii = document.getElementById("project_tasks");
var num = document.getElementById("tasks_count").value;
num++;
var e = document.createElement("div");
e.setAttribute('id','task_'+num);
//e.innerHTML = '<input name="taskID_'+num+'" id="taskID_'+num+'" size=0 type="hidden" value="'+taskID+'">';
// Add an ID
e.innerHTML = '<div style="float: left; width: 111px;"><input name="taskid_'+num+'" id="taskid_'+num+'" size=9 type="text" value="'+taskid+'"></div>';
e.innerHTML += '<div style="float: left; width: 400px;"><input name="name_'+num+'" id="name_'+num+'" size=45 type="text" value="'+name+'"></div>';
e.innerHTML += '<div style="float: left; width: 400px;"><input name="description_'+num+'" id="description_'+num+'" size=45 type="text" value="'+description+'"></div>';
e.innerHTML += '<div style="float: left; width: 90px;"><input name="status_'+num+'" id="status_'+num+'" size=5 type="text" value="'+status+'"></div>';
//e.innerHTML += '<div style="float: left; width: 90px;"><input name="priority_'+num+'" id="priority_'+num+'" size=6 type="text" value="'+priority+'" class="priority"></div>';
e.innerHTML += '<div style="float: left; width: 90px;"><select name="priority_'+num+'" id="priority_'+num+'" class="priority"><option value="Low">Low</option><option value="Medium">Medium</option><option value="High">High</option><option value="Urgent">Urgent</option></select></div>';
e.innerHTML += '<div style="float: left; width: 90px;"><input name="type_'+num+'" id="type_'+num+'" size=4 maxlength=6 type="text" value="'+type+'"></div>';
e.innerHTML += '<div style="float: left; width: 30px;"><button type="button" onclick="remove_item_row('+num+')"><img src="index.php?entryPoint=getImage&imageName=id-ff-clear.png"></button></div>';
e.innerHTML += '<br style="clear:both;">';
document.getElementById("tasks_count").value = num;
ii.appendChild(e);
}
What this function does above, is when I click a button to add a new Task, it calls this function and leaves each Function Variable empty which results in a new Task row inserted into teh DOM and each input is empty and ready for me to type in new values.
Now when the page loads, it first iterates over an array of values and call this function for each Tasks in the array, it then sets the Value for each inputs based on the value in the Tasks array.
So you can see this same code works for adding new Tasks rows and editing existing Tasks rows.
I just need to be able to convert some of the text input fields into selection fields and then still be able to set the value for them on existing Tasks records that are loaded.
Hopefully this makes some sort of sense. Thanks for all help!
The approach I'd go for is to create a separate function that generates the select options...exactly the same way you're doing it now by generating the html string, except that this function will "insert" the output html between the opening and closing select tag...
var priorities = ['Low', 'Medium', 'Urgent'];
function createOptions(selectedPriority){
var options = '';
for(var i = 0; i < priorities.length; i++){
options += "<option value='" + priorities[i] + "' "
+ (selectedPriority == priorities[i] ? "selected='selected'" : "")
+ ">" + priorities[i] + "</option>";
}
return options;
}
this is just to give you an idea. You probably don't need the selectedPriority argument since you already have the priority variable which I believe is accessible within this scope. Now, you will run this function when you are generating the select HTML as below...
e.innerHTML += "<select name='priority_" + num + "' id='priority_" + num + "'>" +
createOptions(num) +
"</select>";
I am trying to create a button that upon clicking, fills an input box located right next to it with 3 random words and 2 preset words.
I have the 5 words with JQuery & Javascript going into <p> tags as of now, but I cannot figure out for my life how to get them into the input box.
Here's what I have so far for the JavaScript:
jsfiddle link
It's forcing me to put some of the code, so here is the short amount of HTML I have for it.
<h1>Shakespearean Insult Generator</h1>
<div>
<p id=word4></p>
<p id=word1></p>
<p id="word2"></p>
<p id="word3"></p>
<p id=word5></p>
</div>
<input type="text" name="message" size="50" value="Thou">
<button id="wordGen">Click Me!</button>
It sounds like your only issue is with how to set the value of a text input. Use jQuery's val method to set the value of the text input to the complete sentence that you have constructed. See:
http://api.jquery.com/val/
You should give the text input an id attribute (not necessary, as you could select by name), eg.
<input type="text" name="message" size="50" value="Thou" id="finalMessage">
and then something like this to select and set its value:
// construct the sentence
var finalMessage = 'Thou ' + words1[getWord1()] + ' ' + words2[getWord2()] + ' ' + words3[getWord3()];
// set the value of the text input to the sentence
$("#finalMessage").val(finalMessage);
As others have suggested you could also improve your method of selecting a random word to make it more reusable.
Try this :
$('#wordGen').click(function() {
$('#word1').html("");
$('#word2').html("");
$('#word3').html("");
$('#word1').append('<input value="' + words1[getWord1()] + '"></input>');
$('#word2').append('<input value="' + words2[getWord2()] + '"></input>');
$('#word3').append('<input value="' + words3[getWord3()] + '"></input>');
});
Fiddle : https://jsfiddle.net/DinoMyte/fy1asfws/24/
If you have your three words and you need to put them in the <input>, then you need to use $("#message").val() to set the text for the input. Also, for this to work, you need to add id="message" to the <input> tag so that it becomes <input type="text" id="message" name="message" size="50" value="Thou">. For instance, your code might look like this:
val word1 = words1[getWord1()];
val word2 = words1[getWord2()];
val word3 = words1[getWord3()];
$('#word1').text(word1);
$('#word2').text(word2);
$('#word3').text(word3);
$("#message").val(word1 + " " + word2 + " " + word3);
Essentially, as I can see from the jsfiddle link, your question boils down to how to set the value property of an input field.
As you're using jQuery, this can be done by using the val() method.
In action for your generator:
$('input[name=message]').val(insultFunctionWord1() + insultFunctionWord2());
The javascript alternative is just as concise as the solutions written in jQuery (and, arguably, could be abbreviated further):
function getWord(i) {
var randomNumber = Math.floor(Math.random() * words[(i-1)].length);
return words[(i-1)][randomNumber];
}
document.querySelector('#wordGen').onclick = function() {
var insult = getWord(1) + ' ' + getWord(2) + ' ' + getWord(3);
document.querySelector('input').value = insult;
}
Here is the full solution in plain vanilla javascript:
var words = [
['artless',
'bawdy',
'beslubbering',
'bootless',
'churlish',
'cockered',
'clouted',
'craven',
'currish',
'dankish',
'dissembling',
'droning',
'errant',
'fawning',
'fobbing',
'froward',
'frothy',
'gleeking',
'goatish',
'gorbellied',
'impertinent',
'infectious',
'jarring',
'loggerheaded',
'lumpish',
'mammering',
'mangled',
'mewling',
'paunchy',
'pribbling',
'puking',
'puny',
'qualling',
'rank',
'reeky',
'roguish',
'ruttish',
'saucy',
'spleeny',
'spongy',
'surly',
'tottering',
'unmuzzled',
'vain',
'venomed',
'villainous',
'warped',
'wayward',
'weedy',
'yeasty',
],
['base-court',
'bat-fowling',
'beef-witted',
'beetle-headed',
'boil-brained',
'clapper-clawed',
'clay-brained',
'common-kissing',
'crook-pated',
'dismal-dreaming',
'dizzy-eyed',
'doghearted',
'dread-bolted',
'earth-vexing',
'elf-skinned',
'fat-kidneyed',
'fen-sucked',
'flap-mouthed',
'fly-bitten',
'folly-fallen',
'fool-born',
'full-gorged',
'guts-griping',
'half-faced',
'hasty-witted',
'hedge-born',
'hell-hated',
'idle-headed',
'ill-breeding',
'ill-nurtured',
'knotty-pated',
'milk-livered',
'motley-minded',
'onion-eyed',
'plume-plucked',
'pottle-deep',
'pox-marked',
'reeling-ripe',
'rough-hewn',
'rude-growing',
'rump-fed',
'shard-borne',
'sheep-biting',
'spur-galled',
'swag-bellied',
'tardy-gaited',
'tickle-brained',
'toad-spotted',
'unchin-snouted',
'weather-bitten',
],
['apple-john',
'baggage',
'barnacle',
'bladder',
'boar-pig',
'bugbear',
'bum-bailey',
'canker-blossom',
'clack-dish',
'clotpole',
'coxcomb',
'codpiece',
'death-token',
'dewberry',
'flap-dragon',
'flax-wench',
'flirt-gill',
'foot-licker',
'fustilarian',
'giglet',
'gudgeon',
'haggard',
'harpy',
'hedge-pig',
'horn-beast',
'hugger-mugger',
'joithead',
'lewdster',
'lout',
'maggot-pie',
'malt-worm',
'mammet',
'measle',
'minnow',
'miscreant',
'moldwarp',
'mumble-news',
'nut-hook',
'pigeon-egg',
'pignut',
'puttock',
'pumpion',
'ratsbane',
'scut',
'skainsmate',
'strumpet',
'varlot',
'vassal',
'whey-face',
'wagtail',
]
];
function getWord(i) {
var randomNumber = Math.floor(Math.random() * words[(i-1)].length);
return words[(i-1)][randomNumber];
}
document.querySelector('#wordGen').onclick = function() {
var insult = getWord(1) + ' ' + getWord(2) + ' ' + getWord(3);
document.querySelector('input').value = insult;
}
button {
background-image: url( 'https://media.giphy.com/media/URZcG7uLd9h4s/giphy.gif' );
background-size: 100px 130px;
height: 250;
width: 250;
//background-size: auto;
font: 15px Verdana, sans-serif;
}
h1 {
font: 35px Arial, sans-serif;
}
<h1>Shakespearean Insult Generator</h1>
<input type="text" size="30" />
<button id="wordGen">Click Me!</button>