We Keep Coding

Use data-attribute in javascript to alter elements width

I am still new, so please forgive me if this question is too trivial or the issue has already been discussed. I didnt find anything specific, which led me to open a new question. That said, here is how it goes:
Im passing values from my database into data-attributes in order to use them in javascript to alter the width of certain elements (i.e. graphs). The element that should be altered according to the retrieved value is a p-Tag (together with others it sits inside a foreach):
<span class="fdpg-nut-vline"><p class="fdpg-nut-graph" id="graph" data-somedat="<?php echo "'" . $value['Nu_Val'] . "%'" ?>"></p></span>
The value of the data-attribute with the name "somedat" I want to use in js, like so:
var somevar = document.getElementById('graph').getAttribute("data-somedat");
document.getElementById("graph").style.width = somevar;
What I did?
I checked whether the format of the value is right. I therefore set a 'static' variable var somevartest = '20%'; and used it in the code above. It worked and the graph changed accordingly.
I checked if the value is passed into the data-attribute: (1) in the sourcode (its there!) and afterwards included an alert which shows me the value in the right format aswell (i.e. 'x%').
What is it that Im not getting? How can I solve my problem?

The proper way to pass data from PHP to JavaScript is using a JSON string.
PHP:
<?php
$arr = get_from_database_as_array(...);
// at end of page before your scripts:
echo "<script>";
echo "var data = " . json_encode($arr, true) . ";";
echo "</script>";
HTML:
<script>
console.log(data);
document.getElementById("elem1").style.width = data["elem1"] + "px";
document.getElementById("elem2").style.width = data["elem2"] + "px";
// and so on.
</script>

input value not getting read by jQuery

I've spent days looking for an error in PHP only to discover my jQuery was never passing the correct value via AJAX in the first place. I was 100% sure this worked and have tested in the past:
JS:
var barcode = null;
if ($("#barcode").length)
{ var $barcode = $("#barcode").val(); console.log("barcode"); }
alert(barcode);
HTML:
<div class="col-lg-10">
<input type="text" class="form-control" id="barcode" placeholder="Barcode">
</div>
Why does barcode still equal null when there are values in the barcode input?

Because the variable you are assigning a value to is
$barcode
and you alert
barcode
Like in real life $ matters

You are creating a new variable, called $barcode inside of the if block. Your worker has no idea that you meant the barcode variable defined above. Instead, try barcode = instead of var $barcode=

You are alerting barcode which is null. You would need $barcode

Need to pass cookie values to hidden fields in Infusionsoft Form

I've been trying to modify some javascript provided by this gentleman - http://www.terminusapp.com/blog/add-utm-referrer-lead-forms/
However the instructions he provided simply don't work for Infusionsoft. I've been able to get the Javascript code functional to actually write the cookie, but I'll need to manually get it input in this form. The field in the form is programmed this way
<div class="infusion-field">
<label for="inf_custom_LastReferrer0">Last Referrer</label>
<input class="infusion-field-input-container" id="inf_custom_LastReferrer0" name="inf_custom_LastReferrer0" type="hidden" />
</div>
The cookie being created is named "_uc_last_referrer" with the value "https%3A//www.google.com" Obviously that value will change depending on who the original referrer was.
What I need is to input that value into the hidden field contained in the form. There's actually four cookie values that I need to input into 4 hidden fields, but I'm assuming once I see how to do one I can do repeat and change the text as needed for the other three.
I've searched on the site of course, because a million people have asked this question, but I don't have a good enough grasp of Jquery yet to be able to figure out how to tweak it for the Infusion form. If anyone could help me out I'd greatly appreciate it.

(function(){
var cookies;
function readCookie(name,c,C,i){
if(cookies){ return cookies[name]; }
c = document.cookie.split('; ');
cookies = {};
for(i=c.length-1; i>=0; i--){
C = c[i].split('=');
cookies[C[0]] = C[1];
}
return cookies[name];
}
window.readCookie = readCookie;
})();
$(document).ready(function(){
//Get cookie you want.
var referrer = window.readCookie('readCookie_uc_last_referrer') || '';
//Set cookie value to hidden field.
$('#inf_custom_LastReferrer0').val(referrer);
});

JavaScript Adding a numeric generated value onto a current set value

I have a function that generates a random number for me between 2 values I set myself. Here's the code.
<script>
function coinsEarned(){
var worth = document.getElementById("Earned");
var coins=Math.floor(Math.random()*10000+1000);
Earned.value = coins;
}
</script>
This works perfect. Now, I have a text bubble that represents the users balance, It is also perfect for me. Here's the code.
<input class="balance" id="Balance" type=text" value="20000" readonly/>
I would like to add a new button that when clicked will transfer the generated number found above ^^ onto the balance text which is just stated there ^. How would I get this to happen using a JavaScript function preferably so when the button is clicked I will have onclick="funtion();" that will add the generated number to the current balance and then display a new balance.
Thanks in advance for help :)

You can access the current amount using the value attribute.
function coinsEarned(){
var current = document.getElementById("Balance");
var coins = Math.floor(Math.random()*10000+1000);
current.value = +current.value + coins;
}
document.getElementById("MyButton").onclick = coinsEarned;

hide all rows with td containing value from drop down

iam trying to hide all rows in table except for the ones with <td> containing same text as user selected from dropdown. thought it should be easy but im struggling with it for long now...i tried something like this:
$(document).ready(function() {
$('select[name=selectName]').change(function() {
$("td").each(function(index, paragraph) {
$td = $(paragraph);
if ($td.html() === $('select[name=selectName]').val()) {
//hide the matched row rather than remove it
$(not(this)).parent("tr:first").hide();
}
});
$('select[name="selectName"]').on('change', function() {
$("tr").show();
});
});
});
but it didnt work so i tried this:
$(document).ready(function(){
$('select[name=selectedName]').change(function() {
$('tr').filter(function () {
return $(this).find('td').filter(function () {
return $(this).text().indexOf('$('select[name=select2]').val()') == -1;
}).length;
}).$(this).parent("tr:first").hide();
});
});
but didnt work as well...this is how i build my dropdown:
$query = "SELECT user_name FROM users";
$result = mysql_query($query); ?>
<select name="selectedName" id="userSelected">
<option value="" disabled selected>user name</option>
<?php while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { ?>
<option value="<?php echo $line['user_name'];?>">
<?php echo $line['user_name'];?>
</option>
<?php } ?>
</select>
any help to lead for solution?? thanks

Knowing you have not posted enough info for us to help you finish, I can at least point out an error in your code.
You should use the F12 tools so you can spot these errors.
Depending on the browser you are using, the Console area of the F12 tools will show ReferenceError: not is not defined.
Clicking the line number will show that the error is
$(not(this)).parent("tr:first").hide();
(unless there's another error before this in which case you need to fix that first)
So not(this) is not valid syntax. If you don't understand why, please post a separate question, more specific, and we would be happy to explain the meaning of these things.

Are you looking to filter to rows containing the text in a given value, or rows whose entire html is equal to the text in the given value? This is an important difference, an I assume you mean the former since that's the wording you use, but your code seems to do the latter.
Also keep in mind that $(element).html() will give you a very different string from $(element).text(). In the following example, $('.bunny').text() will include the string "I am a bunny" but $('.bunny').html() won't.
<div class="bunny">
Hi! I am a <strong>bunny</strong>.
</div>
If you're looking to filter rows by their text contents, I'd do something like the following:
var search_term = $(this).val();
var matching_rows $('tr').filter(function(){
var this_row_text = $(this).text();
// Standardize whitespace (in case it's useful)
this_row_text = this_row_text.replace(/\s+/g, " ");
if (this_row_text.indexOf(search_term) > -1) {
return true;
} else {
return false;
}
});
matching_rows.addClass("highlighted"); // or whatever
Note that I created lots of variables at each step; even if the var is only used once, this can lead to much more descriptive and readable code that's less of a pain for you to troubleshoot and maintain later on. When my JS code is misbehaving, the first thing I do is I go in and break out variables like this. The resulting JS is about twice as many lines, but I almost always spot and fix multiple issues just by going through that process. Jquery makes it too easy to write overly dense code. ;-)
On a more general note, I think I spot a number of Jquery errors in your code snippets above. We could point those out individually for you, but that's not what SO is here for; focus on breaking your problem down into smaller and smaller pieces so you can tackle those errors one at a time, rather than being stumped by several of them acting up at once. For example, if you're trying to troubleshoot the filtering behavior, open up Chrome's dev tools and just start playing with filters in the JS console. Then once you're confident with that, you can copy & paste back into your IDE and be confident that "OK, I know these 3 lines are working as intended".

First set up some constants for the bits of the page that aren't going to change (this will help speed up your code):
var select = $('#userSelected');
var trs = $('tr');
Then in your change function you just need to test the text in each row against the value and toggle whether the the row is hidden or not:
$(document).ready(function(){
var select = $('#userSelected');
var trs = $('tr');
select.change( function() {
var value = select.val();
trs.each(function(){
var isShown = $( 'td:first', this ).text() == value;
$(this).toggle( isShown );
});
});
});
JSFIDDLE