We Keep Coding

How to assign javascript variable value to HTML Attribute?

I am having 2 text box.. Value of first text box should been an length of second text box.. Eg: If user gives First text box value as "10", then my second text box should not allow user to type more than 10 characters..
Here is my code..
function field_length() {
var fieldValue = document.getElementById('Length').value;
alert(fieldValue);
}
<input type="text" name="Length[]" maxlength="2" class="required" id="Length" onkeypress="return isNumberKey(event);" placeholder="Field length" class="form-control">
<input type="text" name="Label[]" class="required" id="Label" maxlength="" onClick="field_length();" placeholder="Field Label" class="form-control">
In this code what i did was.. if user is gives value for first field as "5", on tap of second field it will alert the value.. But i want that value to be assigned to Maxlenght attribute. Give me some idea..

Get length and set maxLength attribute.
function field_length(){
var length = $("#Length").val();
$("#Label").attr("maxlength", length)
}

You can use setAttribute
<script type="text/javascript">
function field_length()
{
var fieldValue= document.getElementById('Length').value;
document.getElementById("Label").setAttribute('maxlength',fieldValue);
}
</script>
<input type="text" name="Length[]" maxlength="2" class="required" id="Length" onkeypress="return isNumberKey(event);" placeholder="Field length" class="form-control">
<input type="text" name="Label[]" class="required" id="Label" maxlength="" onClick="field_length();" placeholder="Field Label" class="form-control">

Try this:
$("#Label").attr("maxlength", length);
or
$("#Label").prop("maxlength", length);
NOTE:
As of jQuery 1.6. , the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

use same value on 2 inputs on keyup if first one is originaly empty

I have 2 fields in a form Name and Company and I want Name to dynamically get the Company value while it's typed (only if Name is empty when you start imputing Company) and i'm not finding out the best way to achieve this.
for example purposes the HTML is:
<form>
...
<input type="text" id="Name" name="Name" value="">
<input type="text" id="Company" name="Name" value="">
...
</form>
i tried:
$('#Company').on('keyup', function(){
var str = $('#Company').val();
str = str.substring(0, str.length - 1);
if($('#Name').val().length <= 0 || $('#Name').val() == str){
$('#Name').val($('#Company').val());
}
});
and it works to some extent, if you type in too quickly it stops assuming #Name and #Company had the same value before last keyup
I also thought about doing on Company blur and it'll probably work, but that is not the user experience i was wanting to achieve.
This would probably be easier using Angular.js or the likes of that, but using that now is not an option.

Something like this, adding a class that is removed on input into the name field, otherwise the length check will fail after the first character is copied from the Company field.
$('#Name').addClass('empty').on('input', function() {
$(this).toggleClass('empty', this.value.trim().length === 0);
});
$('#Company').on('input', function() {
$('#Name.empty').val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
Name : <input type="text" id="Name" name="Name" value=""><br>
Comp : <input type="text" id="Company" name="Name" value="">
</form>

Check if text box is empty or not, then put attributes

Disable the other textbox if the textbox(4) is filled. I have a multiple text boxes in my div
For instance:
If I put a text in textbox(4), then the textbox(1) will becomes disable. Then if I remove the text in the textbox(4), then the text box for the textbox(1) will becomes enable.
Here is the sample html:
<div class="main-wrapper">
<div class="form-text-wrapper">
<div><input type="text" class="form-text" value="" name="text1" id="text1"></div>
<div><input type="text" class="form-text" value="" name="text2" id="text2"></div>
<div><input type="text" class="form-text" value="" name="text3" id="text3"></div>
<div><input type="text" class="form-text" value="" name="text4" id="text4"></div>
</div>
</div>
My code doesn't seems to work, I'm not sure what's wrong with my code.
Here is my js code:
$('.main-wrapper').each(function(){
var name = $('#text4', this).val();
var disForm = $('#text1');
if ($(name.length >= 1)) {
$(disForm, this).attr('disabled', 'disabled');
} else {
$(disForm, this).removeAttr('disabled');
}
});
Please help... Thank you!!!

jQuery(function($) {
//change event handler which gets executd whenever the value of #test4 is chaned
$('#text4').on('change', function() {
//find all the input elements under the current .form-text-wrapper and except #test4 and set its disabled status based on #text4's value
$(this).closest('.form-text-wrapper').find('input').not(this).prop('disabled', this.value.length)
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-wrapper">
<div class="form-text-wrapper">
<div><input type="text" class="form-text" value="" name="text1" id="text1"></div>
<div><input type="text" class="form-text" value="" name="text2" id="text2"></div>
<div><input type="text" class="form-text" value="" name="text3" id="text3"></div>
<div><input type="text" class="form-text" value="" name="text4" id="text4"></div>
</div>
</div>

Ok, so a few issues with what you are doing.
Firstly you are needing to execute your code every time one of those text boxes changes. You can wrap that functionality into a function and add it to the change event on each of the textboxes. I have added an example below. NB the example could be alot better than explicitly adding the change to each of the textboxes but I'll leave that for you to do.
Secondly you were executing your comparison for if the length was greater than 0 inside a jquery wrapper ($(name.length >= 1)) -> Don't. I've removed that as well in the code sample.
Thirdly I'm a little confused by the requirement. Are you wanting it to toggle disabled/not disabled for just the first text box? REading your code that's what it looked like you were trying to achieve. If you are wanting to disable all of the rest of the text boxes then Arun P Johny's function will do what you want.
function onTextChange(){
console.log('running');
$('.main-wrapper').each(function(){
var name = $('#text4', this).val();
var disForm = $('#text1');
if (name.length >= 1) {
$(disForm, this).attr('disabled', 'disabled');
} else {
$(disForm, this).removeAttr('disabled');
}
});
}
$('#text1').on('change', onTextChange);
$('#text2').on('change', onTextChange);
$('#text3').on('change', onTextChange);
$('#text4').on('change', onTextChange);
http://jsfiddle.net/jtgs5kcj/1/

How to chang all <input> to its value by clicking a button and change it back later?

The problem: I have a page with many <input> fields (just say all are text fields)
I would like to have a button, when click on it, all input fields will become plaintext only.
e.g. <input type="text" value="123" /> becomes 123
and if I click on another button, the text will change back to
e.g. 123 becomes <input type="text" value="123" />
Is there an automatic way to scan for all the <input>s and change them all at once using javascript and jquery.
Thank you!
Edited
Seems you guys are getting the wrong idea.
Read what I have written again: e.g. <input type="text" value="123" /> becomes 123
I have value="123" already, why would I want to set the value again???
What I want is e.g.
<body><input type="text" value="123" /><input type="text" value="456" /></body> becomes <body>123456</body> and later <body>123456</body> back to <body><input type="text" value="123" /><input type="text" value="456" /></body>

Use this to go one way,
$('input').replaceWith(function(){
return $('<div />').text(this.value).addClass('plain-text');
});​​​
and this to go the other.
$('.plain-text').replaceWith(function(){
return $('<input />').val($(this).text());
});
​

Check this link http://jsfiddle.net/Evmkf/2/
HTML:
<div id='divInput'>
<input type="text" value='123' />
<br/>
<input type="text" value='456' />
<br/>
<input type="text" value='789' />
</div>
<div id='plainText' style='display:none'></div>
<div>
<input type="button" id='btnPlain' value='Make It Plain' />
<input type="button" id='btnInput' value='Make It Text' />
</div>​
Javascript:
$("#btnPlain").bind('click',function(){
$("#plainText").html('');
$("#divInput input[type=text]").each(function(index){
$("#plainText").append('<span>'+$(this).val()+'</span>');
$("#divInput").hide();
$("#plainText").show();
});
});
$("#btnInput").bind('click',function(){
$("#divInput").html('');
$("#plainText span").each(function(index){
$("#divInput").append('<input type="text" value="'+$(this).text()+'"/><br/>');
$("#plainText").hide();
$("#divInput").show();
});
});
​

Try this FIDDLE
$(function() {
var arr = [];
$('#btn').on('click', function() {
var $text = $('#inp input[type="text"]');
if( $text.length > 0){
$text.each(function(i) {
arr[i] = this.value;
});
$('#inp').html(arr.join());
}
else{
if(arr.length <= 0){
}
else{ // Add Inputs here
var html = '';
$.each(arr, function(i){
html += '<input type="text" value="' + arr[i]+ '"/>'
});
$('#inp').html(html);
}
}
});
});
​

You need to create a hidden element for each input, then use jquery to hide the input, show the hidden element and give it the inputs value.
<input type="text" value="123" id="input_1" />
<div id="div_1" style="display:none;"></div>
$("#div_1").html($("input_1").val());
$("#input_1").hide();
$("#div_1").show();

default value 'password' for input field, show it?

I'm using this js to display default password, when user clicks it automatically clears default value, if user deselects without entering anything default value re-appears.
I used it for all my fields, but obviously for password it is trickier! :)
How would you do it?
<input
type="password"
onblur="this.value=!this.value?'Password':this.value;"
onfocus="this.select()"
onclick="if (this.value=='Password'){this.value='';}"
name="pwd"
id="user_pass"
class="input"
value="Password"
size="20"
tabindex="20" />

Were you thinking of <input placeholder='Password' type='password'/> ?

This is your solution: http://jsfiddle.net/cgP5K/1/
<input
type="text"
onblur="this.value=!this.value?'Password':this.value;"
onfocus="this.select()"
onclick="if (this.value=='Password'){this.value=''; this.type='password'}"
name="pwd"
id="user_pass"
class="input"
value="Password"
size="20"
tabindex="20" />​

Try This out - http://roshanbh.com.np/examples/text-in-password/

You need to create a plain text input as a placeholder. This code will do that for you without exposing any variables to the global scope:
​<input id="pass-placeholder" type="text"​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ value="Password" />
<script type="text/javascript">
(function(){
var pass_holder_el = document.getElementById('pass-placeholder');
var pass_el = document.createElement('input');
pass_el.type = 'password';
pass_el.onblur = function(){
if(!this.value)
this.parentNode.replaceChild(pass_holder_el, this);
}
pass_holder_el.onfocus = function(){
this.parentNode.replaceChild(pass_el, this);
pass_el.focus();
}
})();
</script>​
JSFiddle

Please use the below solution,
<input name="password" class="input"value="Password" size="20"
tabindex="20" onclick="if(this.value==defaultValue){this.value=''; this.type='password'} else if(this.value==''){this.value=defaultValue; this.type='text'} " onblur="if(this.value==''){this.value=defaultValue; this.type='text'}"/>
because first solution works well but if u empty the password field, it will not convert to its default value which is a text. So try above solution.