pass input value to onclick function

Question

Can anyone give me a "trick" how to pass input value to "a" element onclick function.

Let say i have input field with specific id:

<input id="yourname" type="text" value="Testing Value" class="form-control" type="text" placeholder="Your name here..." >

and function "exportText" which actualy export text (html) from specific div id (biography):

<a   href="#" onclick="exportText('biography', 'Name of player');">

                Save your biography
            </a>

When you click a href link it will save biography in txt document with name: "Name of player.txt"

How can i force the function to actually grab the input id "yourname" value and save the .txt document with that name, something like "yourname+.txt"

I really tried to search a solution over the net, but my knowledge is too low to found an answer on myself.

Thank you so much!

You have to create one JavaScript function in that you can get the value of input yourname. After that, you can proceed for creating the file. — Hkachhia
– Hkachhia, Commented Apr 21, 2020 at 11:41
Maybe i didnt say, i already have working function to export file its called "exportText". The function itself has variable/parameter // Specify file name filename = filename?filename+'.txt':'yourname.txt'; Does this piece of code help? — ribosed
– ribosed, Commented Apr 21, 2020 at 11:46
Still not clear what you want to say. It would be nice if you share the whole code — Hkachhia
– Hkachhia, Commented Apr 21, 2020 at 11:59

YannickIngenierie · Accepted Answer · 2020-04-21 11:53:30Z

2

In your exportText function, if it's a local function you can directly use

document.getElementById('yourname').value;

instead of 'Name of player' parameter Now, if it's a global function, you can play with a specific class (Ex:ClsUserName) and in your exportText use

document.getelementsbyclassname('ClsUserName')

answered Apr 21, 2020 at 11:53

YannickIngenierie

6221 gold badge13 silver badges39 bronze badges

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

Comments

BeHappy · Accepted Answer · 2020-04-21 11:45:33Z

1

You can use event:

input id="yourname" value="Testing Value" class="form-control" type="text" placeholder="Your name here..." /> 
<a href="#" id="exportText">Save your biography</a>

and js:

document.getElementById('exportText').addEventListener('click', function() {
    console.log(document.getElementById('yourname').value)
})

answered Apr 21, 2020 at 11:45

BeHappy

4,0265 gold badges30 silver badges67 bronze badges

Comments

Prajapati Yash · Accepted Answer · 2023-05-17 08:54:07Z

0

No need to use the tag.

Due to the button being inside the form, it will submit the form to the server and reload the page. As the form is submitted, and page load happened you will not be able to see the text assigned to the div.

answered May 17, 2023 at 8:54

Prajapati Yash

146 bronze badges

1 Comment

Moritz Ringler Over a year ago

Not sure which question you are answering, but it does not seem to be this one.

Collectives™ on Stack Overflow

pass input value to onclick function

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related