Javascript: change element value by input textbox

Question

I want to change THISVALUE using a textbox and submit button, which then refreshes the data on the page:

<form id="newssearch" action="#">
  <input type="text" size="30" maxlength="155" name="search" id="search" />
  <input type="button" name="submit" value="Search" onclick="showElements();" />
</form>

<div class="sm" data-type="static" data-symbol="THISVALUE" data-size="medium" data-logscale="on" data-chart-type="ca" data-timeframe="1y"></div>

<div class="sm" data-type="news" data-symbol="THISVALUE"></div>

Also: you press the button and it refreshes the page with the new data-symbol value. That value stays for the next visit to the page or until another search is performed.

Perhaps it would be better to do this in php?

Make sure you provide some code for the community to be able to help you out. — Takoyaro
– Takoyaro, Commented Jun 10, 2016 at 18:23
^^^ To all the comments above: when you see an new user write "Here's the form:" and you see no form, try editing the question, chances are OP did not know how to use code blocks and therefor no code was visible... — Adam Buchanan Smith
– Adam Buchanan Smith, Commented Jun 10, 2016 at 18:32

bhansa · Accepted Answer · 2016-06-10 18:50:53Z

1

You can also use the setAttribute() function

function showElements(){

  document.getElementsByClassName('blah')[0].setAttribute("data-symbol",document.getElementById('search').value);

}

answered Jun 10, 2016 at 18:50

bhansa

7,5763 gold badges35 silver badges58 bronze badges

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

Comments

Rahul Desai · Accepted Answer · 2016-06-10 18:58:06Z

1

First off - data-symbol is not an element. It is an attribute and to be more specific - a data attribute.

Learn more about data attributes here: Using data attributes | MDN

I assume you want the data submitted in the form to get into the data-symbol attribute.

Checkout the working code snippet below:

function showElements(){

  // just copy over the search text into the data attribute
  document.getElementsByClassName('blah')[0].dataset.symbol = document.getElementById('search').value;

}

<div class="blah" data-type="cur" data-symbol="THISVALUE"></div>


<form id="newssearch" action="#">

  <input type="text" size="30" maxlength="155" name="search" id="search" />
  <input type="button" name="submit" value="Search" onclick="showElements();" /> <!-- no need to pass any arguments to this function, we can get data using element ID -->

</form>

Check the result using Developer Tools (I have used Chrome here):

edited Jun 10, 2016 at 18:58

answered Jun 10, 2016 at 18:32

Rahul Desai

15.5k20 gold badges89 silver badges146 bronze badges

12 Comments

SML Over a year ago

sorry a bit irrelevant to the question being asked here. How do you add run code snippet to your answer? I checked the help page but couldn't find anything

Adam Buchanan Smith Over a year ago

this is off topic, but Is that a stackoverflow version of jsfiddle?

Rahul Desai Over a year ago

Google is your friend :) You can always Google it if you don't find it in help section. Here you go: blog.stackoverflow.com/2014/09/…

Rahul Desai Over a year ago

@AdamBuchananSmith ^

Rahul Desai Over a year ago

@user6439245 FYI ^

|

Collectives™ on Stack Overflow

Javascript: change element value by input textbox

2 Answers 2

Comments

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related