0

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

2
  • Have you checked for errors. Update your post with the code showing how myFunc() is called, and post any errors you get on console. Commented Feb 14, 2019 at 15:28
  • It probably produces an error in your console. It's spelled getElementById() — alphabetic case is important. Commented Feb 14, 2019 at 15:28

2 Answers 2

1

You should write document.getElementById(my_field) instead of document.getelementbyid(my_field).

Sign up to request clarification or add additional context in comments.

2 Comments

Just flag it as a typo, don't bother posting answers to questions like this.
Sorry, that's a typo in my question, I use the appropriate capital letters in my code, I just simplified it for this purposes of this question.
1

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.

1 Comment

And you just dropped the .value part?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.