I am wondering how to get the value of a input box by storing the id in a variable then fetching the value by that id variable. Here is what I have tried.

<script>
    var c=$("#inp").val();
    var temp = "i"+c;
    var obj = document.getElementById(temp).value;
    alert(obj);
</script>

<input type='text' class='form-control' value='$q6[$t2]' id='inp'>/php is used/

I am wondering how to get the value of a input box by storing the id in a variable then fetching the value by that id variable. Here is what I have tried.

<script>
    var c=$("#inp").val();
    var temp = "i"+c;
    var obj = document.getElementById(temp).value;
    alert(obj);
</script>

<input type='text' class='form-control' value='$q6[$t2]' id='inp'>/php is used/

• javascript
• jquery

• 2 What you have should work. Are you having any issues with it? – Rory McCrossan Commented Apr 20, 2015 at 13:17
• 2 Could you post the Html too? – Cherry Commented Apr 20, 2015 at 13:18
• 4 As long as your variable name doesn't start with a number, the code you have should work fine. – adam0101 Commented Apr 20, 2015 at 13:18
• 1 With a tag <input id="i" />, this will work. – rfornal Commented Apr 20, 2015 at 13:18
• 1 Works fine with matching HTML: codepen.io/paulroub/pen/VLZEXd. Please post your HTML. – Paul Roub Commented Apr 20, 2015 at 13:19

3 Answers 3

Your code works, but maybe you're doing something in the wrong order like putting the script before the element on the page. If your elements are in the following order, then it will work.

<input type="text" id="i" value="asdf" />
<script>
    var temp = "i";
    var obj = document.getElementById(temp).value;
    alert(obj);
</script>

edit

Based on your question's edits, given this input:

<input type='text' class='form-control' value='$q6[$t2]' id='inp'>

The value of c may not be what you think it is.

var c = $("#inp").val(); //equals $q6[$t2] exactly

By adding an i to the front of it, you get exactly that - i$q6[$t2] now the only way your script is going to work is if you have another element on the page with that ID.

<input type='text' id='i$q6[$t2]' value='output' />

I wonder is it really what you want to acplish? If so, this snippet demonstrates it.

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' class='form-control' value='$q6[$t2]' id='inp'>
<input type='text' id='i$q6[$t2]' value='output' />
<script>
    var c=$("#inp").val();
    var temp = "i"+c;
    var obj = document.getElementById(temp).value;
    alert(obj);
</script>

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='form-control' value='test' id='inp'>
<br>
<input type='text' class='form-control' value='$q6[$t2]' id='itest'>
<script>
var inp = $("#inp");
function chng(){
    var c=$("#inp").val();
    var temp = "#"+"i"+c;
    var obj = $(temp).val();
    alert(obj);
}
chng();
inp.on("change", chng);
</script>

When you call getElementById, you get a live node. That means its properties will update dynamically as the element in the page is modified (resized, typed into, selected). However, if you copy the value in a variable, this stored value won't update when you type in the input. That might be the cause of your problem here.

You need to update that variable when the "change" event is triggered for the input.

var myVal = null;

document.getElementById(temp).addEventListener("change", function(e) {
    myVal = e.target.value;
    alert(e.target.value);
});