HTML form + Javascript - how to do it?

[phinix]

To explain it as simple as it is:
I have special characters buttons on website, lets say 20 different buttons with french alphabet special characters.
Now, I have input text field, where user tapes his answer to a question listed above. When he needs to use special character he clicks on the approprietsfsf button with that character, and it appears in text field after the string he taped.
problem I have is - how to do it for all button? I can direct the value of one button to that field by simply "MyElement.value = MyElement.value + button.value;"
But now how can I add it when user clicks different button? How to change that button.value to actually button id that he clicked?

OK.. here's what I've got so far:

list of buttons (just few here to show how they look)

 <input type='button' value="&aacute;" id="aacute" onclick="AddChar()"/> 
  <input type='button' value="&agrave;" id="agrave" onclick="AddChar()"/>  
  <input type='button' value="&acirc;" id="acirc" onclick="AddChar()"/> 
  <input type='button' value="&auml;" id="auml" onclick="AddChar()"/>

.. text field:

<input type="input" id="myfield"></input>

Now, the function:

function AddChar()
{
   var MyElement = document.getElementById("myfield");
   MyElement.value = MyElement.value + aacute.value;

   return true;
}

So question is - how to change that "aacute.value" to "clickedbutton".value?
it has to be easy, but I'm total noob in javascript, so please help me out here!

 

[GravyMonster]

It would probably be easier to pass the element and character as parameters to the function rather than picking up the value of the button - eg.

<script type="text/javascript">
  function AddChar(char, inputField)  {
    inputField.value = inputField.value + char;
  }
</script>

<input type='button' value="&auml;" id="auml" onclick="AddChar('&auml', document.getElementById("myfield"))" />

<input type="text" name="txtField" id="myfield" />

This way the code will be extendible to use anY field and character you need without having to change you original function.

 

[Bes]

How about this?

<input type='button' value="&acirc;" id="acirc" onclick="AddChar(&acirc)"/>
<input type='button' value="&auml;" id="auml" onclick="AddChar(&amul)"/>

function AddChar(i)
{

var MyElement.value = MyElement.value + i;
return true;
}

you are passing the id to the function and then writing it out to MyElement.

I don't think you need this line at all:

var MyElement = document.getElementById("myfield");

There is probably a neater way of doing it using something like this.value too...

 

[phinix]

WOW! Thanks guys! I changed it a bit and here's how it looks now:

function AddChar(char)  {
    var inputField = document.getElementById("myfield");
	inputField.value = inputField.value + char;

..and then just added this to all characters:

 <input type='button' value="&ecirc;" id="ecirc" onclick="AddChar('&ecirc')"/>

now, how can I make those button be actived by another button? You know.. visible and unvisible thingy?

 

[Bes]

You mean you want all the buttons to be invisible until you click another button or something....?

PS what is this line for?

var inputField = document.getElementById("myfield");

All you are doing is overwriting that var in the next line anyway.

 

[phinix]

That line picks up what user already taped in and it will be added later in answer field with a character added to it..
It may be stupid, I'm really a noob in Java

About that visibility: imagine a page with test with 10 different questions. Every question has answer field that user must tape his answer. If he needs to use special character, he clicks small button next to the answer field and banch of small buttons will appear under or above it - special characters buttons.
Thing is I would like to make it visible just for one question part. If user clicks another button next to another answer field, it will make previous row of buttons invisible and opens (make visible) the row under the new, activated question.
I hope it makes sense...

 

[SimonCHere]

He's getting the myfield object so he can change it's value.
you can't just do inputField.value = "something" without setting inputField to the correct object.

edit


stick the buttons in span and make it's style="visibility:hidden"

document.getElementById("buttonspan").style.visibility = 'visible';
document.getElementById("buttonspan").style.visibility = 'hidden';

I think

<span id="buttonspan1" style="visibility:visable">
<input type='button' value="&acirc;" id="acirc" onclick="AddChar(this)"/>
<input type='button' value="&auml;" id="auml" onclick="AddChar(this)"/>
</span>

<input type='button' value='hide' onclick="hideButtons('buttonspan1')"/>

function AddChar(button)
{
var inputField = document.getElementById("myfield");
inputField.value = inputField.value + button.value;
return true;
}
function hideButtons(WhichGroup)
{
document.getElementById(WhichGroup).style.visibility = 'hidden';
}

 

[Bes]

Yeah but my point was that in his code he wasn't doing anything with it afterwards, so loading the value in was pointless.

 

[SimonCHere]

he was trying to add the aacute.value to it.
Admittedly the aacute would throw an error as it's not been defined anywhere but he was just asking how to do it.
If he had gone with
document.getElementById("aacute").value;
it would have worked.

 

[phinix]

He's getting the myfield object so he can change it's value.
you can't just do inputField.value = "something" without setting inputField to the correct object.

edit


stick the buttons in span and make it's style="visibility:hidden"

document.getElementById("buttonspan").style.visibility = 'visible';
document.getElementById("buttonspan").style.visibility = 'hidden';

I think

<span id="buttonspan1" style="visibility:visable">
<input type='button' value="&acirc;" id="acirc" onclick="AddChar(this)"/>
<input type='button' value="&auml;" id="auml" onclick="AddChar(this)"/>
</span>

<input type='button' value='hide' onclick="hideButtons('buttonspan1')"/>

function AddChar(button)
{
var inputField = document.getElementById("myfield");
inputField.value = inputField.value + button.value;
return true;
}
function hideButtons(WhichGroup)
{
document.getElementById(WhichGroup).style.visibility = 'hidden';
}

Cool, thanks. it works.. only thing is it hides them, but how can I make them to show up again, when clicked on that button second time?

 

[SimonCHere]

Add a show function

<input type='button' value='show' onclick="ShowButtons('buttonspan1')"/>

function ShowButtons(WhichGroup)
{
document.getElementById(WhichGroup).style.visibility = 'visible';
}

or change to a switch function

function HideUnhide(WhichGroup)
{
var group=document.getElementById(WhichGroup);
(group.style.visibility == 'visible' || group.style.visibility == '') ? group.style.visibility='hidden' : group.style.visibility='visible';
}

 

[phinix]

hehe, switch function works erfectly! Thank you for help!
Now, I have one more question.
How can I make this special character buttons group be visible/hidden for every question/answer line?
Lets say there are 10 questions, each has its answer text field and every text field would have its own show special characters group button.
When user clicks this button next to for example answer field 5, it wil show up under it, if he goes to question 6 and clicks button next to answer field 6, then previous group will hide and show up under answer field 6...

What I can imagine, the whole buttons group would be added as some kind of group that could be pulled under every answer field, where function would have to check which show-button was clicked and open this group there and close any other...
Is that too complicated? If it is, should I just copy the code under every question with all special buttons group code?

 

[SimonCHere]

Easy way is to copy the button span underneath each answer field with a different name.
Then, when you click on a button next to the answer field it calls a function to hide all the other spans and then shows the currently relevant one.

You could do it a different way with css moving a single span around but you would need to rewrite most of the above.

 

[phinix]

Yes, I thought about css, then I could call out that group as one in any place I wnat..
So if I go easier way, and just copy the group under every answer field, how can i use my function to check what group I want to use?
I mean sth similar to what I have now with "whichgroup" parameter in show/hide function.
Right now AddChar function looks like this:

function AddChar(char)  {
    var inputField = document.getElementById('myfield');
	inputField.value = inputField.value + char;

How can I change it to check what specialchar group am I pressing and add that character to the my field 1, 2, or 3 for example?

 

[SimonCHere]

Do like Spunkey suggested ^^^up there. Have your buttons pass the field you want to insert the character into as well as the character.

 

[phinix]

Yep, works great! Thanks guys!