Assign dynamic value to an Input Field in HTML

Question

I have an input field and I want to assign it a value dynamically fetched from DB. I will use that value later in a script. Here is my code below

<div data-ng-model="DashboardCounterItems">
<div data-ng-repeat="cItem in DashboardCounterItems">
<input type ="hidden" id ="myInput" value = {{cItem.dbMeetings.length}} />
</div>
</div>

Here {{cItem.dbMeetings.length}} is fetched from DB and assigned to myInput. Further when I check the value of this input in alert in script below, I get {{cItem.dbMeetings.length}} message instead of the value within it.

<script>
var iLenthv = document.getElementById("myInput").value;
alert(iLenthv);
</script>

Any help how can I do it. Or any other better way. I will really appreciate it.

So I'm not familiar with server-side JS, which I'm assuming this is (angular?), but for some language, like Coldfusion, you have to specify that you want the server-side engine to evaluate your variables. In Coldfusion, that's a #variable# wrapped in a <cfoutput> tag. Outside of this tag, it simply appears as #variable#, rather than being evaluated. — mykaf
– mykaf, Commented Oct 4, 2021 at 14:48
When I use it like this <input type ="hidden" id ="myInput" value = "THIS VALUE" /> The same alert gives me "THIS VALUE" as an output. I don't know why it does not give dynamic value output — Mirza Bilal
– Mirza Bilal, Commented Oct 4, 2021 at 14:51
<div data-ng-model="DashboardCounterItems"> <div data-ng-repeat="cItem in DashboardCounterItems"> {{cItem.dbMeetings.length}} </div> </div> Also when I run this code, it gives the value of the item — Mirza Bilal
– Mirza Bilal, Commented Oct 4, 2021 at 14:53
Also not sure why you are using an id inside an element that repeats. An id is singular item, not multiple. — epascarello
– epascarello, Commented Oct 4, 2021 at 15:10

Hasitha Gamage · Accepted Answer · 2021-10-04 16:26:15Z

1

I think your JS code will execute before DB data retrieval, can you check JS code within the setTimeout() Method?

<script>
    setTimeout(function() {
        var iLenthv = document.getElementById("myInput").getAttribute("value");
        alert(iLenthv);
    }, 3000); 
</script>

answered Oct 4, 2021 at 16:26

Hasitha Gamage

1071 silver badge4 bronze badges

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

Comments

Dhruv · Accepted Answer · 2021-10-04 14:46:18Z

0

Use .getAttribute() to get the value from a html attribute

function myFunction() {
var iLenthv = document.getElementById("myInput").getAttribute("value"); 
alert(iLenthv);
}

Hope it's helpfull

answered Oct 4, 2021 at 14:46

Dhruv

1722 silver badges11 bronze badges

2 Comments

Mirza Bilal Over a year ago

Hi, It didn't work

Dhruv Over a year ago

then @MirzaBilal try this var iLenthv = {{cItem.dbMeetings.length}};

Philippe · Accepted Answer · 2021-10-04 16:38:58Z

0

So we have to track the client side actual value, after the document is loaded. Would you adapt this piece of code and take a look at the console ?

<div data-ng-model="DashboardCounterItems">
  <div data-ng-repeat="cItem in DashboardCounterItems">
    <input type="hidden" id="myInput" value={{cItem.dbMeetings.length}} />
  </div>
</div>

<script>
  const test = () => {
    var iLenthv = document.getElementById("myInput").value;
    console.log("value:",iLenthv);
  };

  window.onload = test;
</script>

answered Oct 4, 2021 at 16:38

Philippe

1,30713 silver badges23 bronze badges

Collectives™ on Stack Overflow

Assign dynamic value to an Input Field in HTML

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related