Develop Reference

Change input value using javascript in a form built with Aura

I have an input in a form built with aura (Salesforce JS framework):
<input class=" input uiInput uiInputText uiInput--default uiInput--input" type="text" aria-describedby="5284:0" placeholder="" id="7:4790;a" data-aura-rendered-by="17:4790;a" data-aura-class="uiInput uiInputText uiInput--default uiInput--input" data-interactive-lib-uid="54" aria-required="true">
I need to change the value of this input using javascript.
However, when doing:
document.getElementById("7:4790;a").value = "random value";
Visually, it changes the value in the input, but it is not taken into account when saving as if I didn't change anything.
How can I achieve this ?
Do I need to trigger a specific event so that aura takes notice of the new data ?

You need to create an attribute of string type.
<aura:attribute name="myInputValue" type="String" />
Pass the attribute to the value property of the input tag.
<input .... value="{! v.myInputValue}" />
Now, whenever you want to change the value in the input, you can simply do this from your javascript function:
component.set('v.myInputValue, "My new String" />
Important Note: Salesforce frameworks don't allow DOM level manipulation due to a security architecture called Locker service. It is not advisable to follow DOM level Manipulation. Instead, follow the state-based approach like above.

Why does PHP only parse DOM elements using 'name' identifiers, and not 'id'?

There seems to be a lot of waste in having to duplicate the same string for both the id and name of an element within a form:
<input id="foo" /> <!-- JS/CSS accept this -->
<input name="foo" /> <!-- Only PHP accepts this -->
<input id="foo" name="foo" /> <!-- Everyone's happy -->
Why does PHP not use id tags?

Why does PHP not use id tags?
That's not PHP, that's HTML. PHP has nothing to do with the HTML spec.
HTML does use id attributes, but it uses them for a different purpose than name attributes.
HTML form elements build requests (POST or GET generally) from their child value-carrying elements (input, select, textarea, etc.). The name attribute is used as the key, and the value (or selected value, etc.) is used as the value.
This creates the key/value pairs for the data in the request.
There seems to be a lot of waste in having to duplicate the same string for both the id and name of an element within a form
You don't have to duplicate it. You may personally choose to duplicate it. But that's your choice. There's no rule in any specs/standards/conventions/etc. indicating that you must or even should do that.
<input id="foo" /> <!-- JS/CSS accept this -->
<!--- incorrect. JS/CSS can also target name attributes if necessary. -->
<input name="foo" /> <!-- Only PHP accepts this -->
<!--- incorrect. This isn't PHP, this is HTML. PHP isn't involved here at all. -->
<input id="foo" name="foo" /> <!-- Everyone's happy -->
<!--- if that's the markup you choose to define, sure. -->

Why does PHP not use id tags?
Because that is the standard set for submitting forms to specified serverside. I would say that IDs are most likely to be used with js/css while you need name to serialize your form elements.

Id attribute is used for DOM manipulating.
http://www.w3schools.com/tags/att_global_id.asp
When sending forms name attribute is used either.
http://www.w3schools.com/tags/att_input_name.asp
These are different purposes.
You can use name attributes in JS also, but array of elements will be returned:
// plain JS
document.getElementsByName("foo");
// jQuery example
$('[name="foo"]')

because in web need 3 type identifier for each unique use for example
1) class : its use for designing and also select multiple tag in dom (jquery)
2) id : used to access some specific element in dom and also design for one field
3) name : used for passing single and multiple data and array
AND thing if you can pass value by id then how can you send checkbox value and multiple select tag values ???

can I add an arbitrary attribute to a tag like <input type="text" preference="silly"/> and access it in JS code later

Is there a way to supplement a DOM element with extraneous attributes, or are the tags fixed with certain attribute by design? As an example, is this possible?
<input id="spec" type="text" preference="silly"/>
And later access this element with jQuery or DOM requests like
if ($("#spec").attr("preference")=="silly") {
document.write("That input is silly")
}
David

Adding arbitrary extra attributes, at best, makes HTML invalid and risks conflicts with future changes to the language.
HTML 5 introduces data-* attributes for storing arbitrary data in the DOM.
jQuery can access them via the data() method.
<input id="spec" data-preference="silly">
if (jQuery('#spec').data('preference') === 'silly') { ... }

You can do this simply using data:
<input id="spec" type="text" data-preference="silly"/>
if ($("#spec").data("preference") == "silly") {
alert("That input is silly");
}

Javascript Array in Class = How to make it valid

I am using this jQuery validation library on my website. It requires me to put the validation rules in the class part of the input tag. ie <input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />
Now this causes me to end up with code in mine that looks similar such as:
<input type="text"
id="charfname"
name="charfname"
value=""
style="width: 300px;"
class="validate[required,length[3,20],custom[noSpecialCaracters]]" />
Which as you see has a [ and ] in the class name. So when I run the page through a validator I get the error:
character "[" is not allowed in the value of attribute "class"
How do I fix this to make it valid but still have the library work?
Thanks

Use some other method for initialization or use another script? Use an alternate attribute and a custom DTD for example. Or throw away the attribute based init system and use something else. Either way you have to modify the plugin's code. You cannot use "[" and "]" characters in a class name and any other combination implying them, period.

Prototype - Element with styleclass in element with an id?

First of all: I'm new to Prototype JS Framework!
Until now I worked with jQuery.
In jQuery I am able to get an element by coding:
$('#myitemid .myitemclass').val()
html:
<div id="myitemid">
<input type="text" class="notmyclass" />
<input type="text" class="myitemclass" />
<input type="text" class="notmyclass" />
</div>
But how to do this in prototype?
I tried to code:
$('myitemid .myitemclass').value
but this won't work.
Can U help me plz?

Use $$ which returns all elements in the document that match the provided CSS selectors.
var elemValue = $$('#myitemid input.myitemclass')[0].getValue();
Also input.myitemclass is better than .myitemclass because it restricts search to input elements with class name .myitemclass.

If you want to get the named element myitemid, simply use $('myitemid'). This is equivalent to $('#myitemid') or document.getElementById('myitemid'). Your case is more complex, since you want to select a child of a named element. In that case you want to first find the named element, then use a selector on it's children.
$('myitemid').select('input.myitemclass')
Then, to access it's value (since it's a form element), you can add .getValue().
$('myitemid').select('input.myitemclass').getValue()

Should be faster
$("myitemid").down("input[class~=myitemclass]").value