We Keep Coding

How with javascript change html code

I need the following change using javascript:
from:
<input id="innn" value="" />
to:
<input id="innn" value="SOME_VALUE" />
I tried this:
document.getElementById("innn").setAttribute("value", "189");
and this:
document.getElementById('innn').value = '152';
it worked but it changed only visual on page not the html code and i need to change the code as shown below:
<input id="innn" value="" /> --> <input id="innn" value="125" /> --><input id="innn" value="158" />
Please help or I must use php like : <input id="innn" value="<? php ... ?>" /> ????

HTML is what is rendered in order for your browser to know what to show on your page. Once sent by the server it will not change (at least not with basic JavaScript). There are more advanced ways of doing things, but they are not simple. When you call a JavaScript function to change something, it changes it in the DOM, so you will see the change on your screen, but when you click view-source your browser is fetching the original page again from the server to show you. In some browsers they have something called Inspect mode which allows you to see what the HTML looks like right now for your page. In that case it will show the updated code. If you want that when someone clicks view-source and sees SOME_VALUE in the value for id="innn", then you would need to use PHP.

document.getElementById("innn").value = somevalue

What is the clearist notification method for html5 maxlength, or is it possible?

If I have for example inputs...
<input type="text" maxlength="10">
<textarea maxlength="20"></textarea>
How would I tell my user, they "have a limit of..." only when attempting add the 11th or 21st char respectively?
Is there an "html" way of handling this, or do we require javascript.

You could to a certain extent use the pattern attribute. For a maxlength of 10 you would write <input type="text" pattern=".{0,10}" />.
Now you would have to display the error message via CSS with help of the :invalid-selector.
Here is an example.
Edit: This doesn't seem to be working with textarea, though … I am having a look into it right now.

Missing JQuery Datepicker

I am newbie in jquery, I have read many solutions in this website about datepicker, but I don't understand.
I have code in Page_A. Page_A load Page_B that contain datepicker.
I try to put Jquery in Page_A or Page_B. and it still missing.
Page_A :
<div class="label-form">Cari Pegawai</div>
<input type="text" id="autocomplate" name="nama" class="form500" placeholder="Nama Pegawai" size="50">
<input type="button" class="button1" value="Cari" onClick="return getTabelPns();"/>
<div id="autotampil"></div>
Page_B :
<input type="text" id="tgl" size="15" name="tgl" value="12/12/1940" />
Here my complete code : http://www.4shared.com/rar/avzmICydba/email2.html
i have included my JQuery. In that link, i include JQuery in Page_B. i try to access page_B directly and it work. But when i access page_B from page_A it is not work.
Thanks a lot for your help ..

i have included my JQuery. In that link, i include JQuery in Page_B. i try to access page_B directly and it work. But when i access page_B from page_A it is not work.
I put my complate code in this link :
Downlod Here : http://www.4shared.com/rar/avzmICydba/email2.html
Thanks a lot for your help

Chrome incorrectly invalidating form input after jQuery clone

I have an issue when cloning a from in Chrome. Note that this doesn't seem to happen in Firefox.
When I dynamically create an input and clone that and then append to the form it will not validate, but when I check the validityState object of the Node is says everything is fine.
I know the clone doesn't make much sense, but it's a reduced testcase from what I require. Are there any solutions to ensure the DOM data is copied over correctly?
Javascript:
$('<input type="text" required="required" />').val('08').clone().appendTo('#form1');
$('<input type="text" required="required" />').val('08').appendTo('#form2');
HTML:
<form id="form1"><input type="submit" value="Click me"/></form>
<form id="form2"><input type="submit" value="Click me"/></form>
Fiddle for reference: http://jsfiddle.net/x7aRt/1/

Looks like a bug in chrome (webkit?) or related maybe to jQuery.
To validate input, looks like you need to re-set value after cloning it, doesn't make much sense but...
$('<input type="text" required="required" />').val('08').clone().val(function(){return this.value}).appendTo('#form1');

javascript input focus

<form id="commentform" method="post" action="wp-comments-post.php">
<input type="text" aria-required="true" tabindex="1" size="22" value=""
id="author" name="author">
</form>
I set default value "visitor" to the input box. When focus is in text box or mouose enters it, I want to hide "visitor" string and want to show it when it loses focus or mose moves out.

Try using the HTML5 placeholder attribute:
<input type="text" aria-required="true" tabindex="1" size="22"
placeholder="visitor" id="author" name="author">
While browser support is not 100% there yet, this will give you a standard way to achieve what you're trying to achieve, without going through unnecessary hoops.
Another thing you can try is to overlay the input element over some text and make it transparent/translucent when not in focus and opaque when in focus/filled.
As of today, Tumblr's login page uses this trick:
<div class="input_wrapper" id="">
<label for="user_password">Password</label>
<input type="password" id="user_password" name="user[password]" data-validation-type="password" value="">
</div>
Through CSS magic this becomes:

Looks like you are using WordPress, so you have the jQuery library on your site.
You can use my jQuery plugin to achieve this.
Example
jQuery
$('#author').inputLabel({
customLabel: 'Visitor'
});
In this case, I had to specify the label myself, but the plugin works without this by finding the relevant label element to the input, which should be present for accessibility.
jsFiddle.

If you are up to HTML 5 yet then try this:
<script type="text/javascript">
var prompt="visitor";
var txt=document.getElementById("author");
txt.onfocus=function(){txt.value='';}
txt.onblur=function(){
if(txt.value==''){
txt.value=prompt;
}
}
</script>

Ates Goral's answer looks very interesting. please try it first shot. this is an alternative if you do not want to sweat..:)
i would suggest using a watermark plugin. there are many available.
have used this plugin before. worked fine. gives you nice control.
the plugin requires jQuery

Though I too would use jQuery or CSS and a pseudo-class (:focus)....
Here's an easy JS solution that does exactly what you're after. Again, I wouldn't recommend this approach for more than one or two input fields.
<input type="text" value="Visitor" onFocus="this.value='';" onBlur="this.value='Visitor';" id="author"/>