input value not getting read by jQuery - javascript

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

Related

Javascript - Use document.getelementbyid().value with a variable

I'm trying to capture the value of a text field on an HTML form using document.getElementById(my_field).value where the variable my_field is passed to my function dynamically, but am hitting a wall.
How do you use a variable in this context?
The function just doesn't seem to parse the contents of the variable my_field, instead treating it as a string no matter whether I use quotes, square brackets or curly braces.
function myFunction() {
var my_field = arguments[0];
var current_value = document.getElementById(my_field).value;
alert ("Current Value: " + current_value);
}
I'm doing it this way because I have multiple records on a form and each row has its own unique id for the required field.
Running the above just does nothing. The alert never pops which I assume is because current_value never gets set.
To add further detail - I tried to simplify everything for the purposes of this question as there's lots of other unnecessary complications that will only detract from the main issue - on my HTML form is a text field which calls my function on onChange
onchange="enforce_multiples('quantity[<?php echo $line_id; ?>]',<?php echo $product['minimum'];?>)"
I've checked that arguments[0] and [1] are being captured correctly by outputting their values to an alert. Everything works fine up until I try to set the quantity_entered value.
<script>
function enforce_multiples() {
var line_id = arguments[0];
var quantity_increments = arguments[1];
var quantity_entered = document.getElementById([line_id]).value;
alert("QE" + quantity_entered);
//var quantity_mod = quantity_entered % quantity_increments;
//var revised_quantity = quantity_entered - quantity_mod;
//alert("RQ: " + revised_quantity);
//document.getElementById([line_id]).value = revised_quantity;
}
</script>
Checked the console and I receive the error: Uncaught TypeError: Cannot read property 'value' of null on the geElementById line
You should write document.getElementById(my_field) instead of document.getelementbyid(my_field).
OK so I got to the bottom of this in case anyone is interested.
In order to use a variable in document.getElementById() you simply add the variable name with no quotes.
var my_variable = "field1";
document.getElementById(my_variable);
The reason this wasn't working on my form was because the text fields only had the name parameter and not an id parameter.
So I needed to change:
<input type="text" name="field_name" value="1234" />
To
<input type="text" name="field_name" id="field_name" value="1234" />
And that sorted it. Otherwise I was just getting generic NULL error messages in the console.

adding .value stops flow of javascript

I'm in the middle of creating a program in the browser which compares the selections of the user with a list of pre-defined holidays using Objects. I tried to create an object from the selections of the user to use in comparisons and select the most matching holiday, however when I try to select the value (adding .value) it seems to break the flow of Java, and none of the code read afterwards is read.
var climateVar = document.getElementById('climateselect')/.value\;
var accVar = document.getElementById('accomadationselect')/.value\;
var durationVar = document.getElementById('duration')/.value\;
var userInput = new Input(climateVar/.value\, accVar/.value\, durationVar/.value\);
for (var key in userInput) {
var woo = userInput[key];
document.getElementById('someDiv').innerHTML += woo/.value\;
}
without any .value/s, this prints[object HTMLSelectElement]null[object HTMLSelectElement] - (I changed "getElementById" to "querySelector" which simply made it print "nullnullnull")
, but when I try to add .value anywhere, the entire script stops working, and so everything under this will not run. Why on earth would adding .value stop the script from working? Nothing else changed.
Also, I'm a novice at this, this was meant to be a practice project, but I've been stuck on this for about a day now. any other advice you might feel like giving would also be appreciated
everywhere I typed /.value\ I've tried to add .value, and it has had the effect of stopping the code
Are you sure you are calling value on a valid object? The object has to exist and support .value to get a result - e.g.
http://jsfiddle.net/pherris/t57ktnLk/
HTML
<input type="text" id="textInput" value="123"/>
<div id="divHoldingInfo">123</div>
JavaScript
alert(document.getElementById('textInput').value);
alert(document.getElementById('divHoldingInfo').innerHTML);
alert(document.getElementById('iDontExist').value); //errors out

jquery getting value from input

This has me stumped, and should be pretty simple.
I have an input in my html:
<input type="text" id="fafsaNbrFam" name="fafsaNbrFam" value="<%=nbrFam%>" class="hidden" />
System.out.println(nbrFam); // Works, gives me "6"
Then my js code:
$("#submit").click(function(e) {
var numEntries = 0;
var fafsaNbr = 0;
$("input[name^='name_']").each(function() {
if (this.value) {
numEntries++;
}
});
// EVERYTHING ABOVE HERE WORKS
fafsaNbr = $("input[name=fafsaNbrFam]").val();
alert(fafsaNbr + "X");
// WHERE THE 6 is I want to put the variable fafsaNbr, just hardcoded for now.
if (6 > numEntries && !confirm("The number of members you listed in your household is less than the number you indicated on your FAFSA. Please confirm or correct your household size. ")) {
e.preventDefault();
}
});
On my alert to test this, I get "undefinedX", so basically my jquery to get the value is coming up undefined.
EDIT: So it turns out my code wasn't the problem, but the placement of my input. Even though the original input placement was being processed, once I changed it, it all worked properly. Needless to say, I am still stumped.
You are missing the quotes around the name value. Try:
fafsaNbr = $("input[name='fafsaNbrFam']").val();
Your code is working fine,
I just added your code to jsFiddle and it works
Live EXAMPLE
Could you please make sure, the java scriplet is loading inside the value tag properly or not by checking the view source in browser?
Try to parse the value of the input like this:
fafsaNbr = parseInt($("input[name=fafsaNbrFam]").val());
Or Check whether the $("input[name=fafsaNbrFam]") is undefined or not.

create variable javascript with an input value

I don't know if this can be do it, i have a input with a submit:
Variable JSON (data/data.links)
<input type="text" id="newVarJson" value="data" onclick="verifica();"/><br>
and I need to put the value of that input as the name of a variable in javascript to create a json with that name, i thought on make that:
<script type="text/javascript">
function verifica(){
var document.getElementById(newVarJson).value={}
data.value="asdf";
alert(JSON.stringify(data));
}
</script>
As you see, the variable the input value = data, I don't know if this can be do it, so, can someone tell me any tips to make this, or it can't be do it?
Thanks!
You can try this:
window[document.getElementById(newVarJson).value];
and your var name will be the value of that input.
Edit:
window[document.getElementById('newVarJson').value];
Working jsbin: http://jsbin.com/doparibu/1/edit

Get function from input field

I have some jQuery inside a text field which I need to fire, but I'm struggling to get anything to happen.
I think the best way to explain this is to put down some code:
<input type="hidden" id="win-body-tst" value="$("#a").append($("#b"));">
<script> function NNNfoo(){
var funcvar = document.getElementById('win-body-tst').value;
funcvar
}</script>
I am calling NNNfoo() successfully, but the append does not action.
eval will run JS code which is expressed as a string (but I'd take a step back and try to solve whatever problem you have another way, it isn't usually a good idea to ask users to input JS).
eval(funcvar);
(You also need to convert your " as data to " so that they don't act as attribute value delimiters).
You can do it with
function NNNfoo(){
var functionBody = document.getElementById('win-body-tst').value;
var func = new Function( functionBody );
func();
}
But why do you want to run arbitrary code from input elements ?

Categories