We Keep Coding

How to work multi input fields at once

I would like to disabled onchange by only defal4-disabl except (defalt1enabl,defalt2enabl,defal31enabl).
And work (enabled/disabled) both input fields at once?
Can any expert provide me modified Fiddle?

Here's your updated fiddle: http://fiddle.jshell.net/rbwtq/348/
This HTML:
<input name="test" type="text" id="disabled_input"/>
<br /><br />
<input name="test" type="text" id="disabled_input"/>
is changed to:
<input name="test" type="text" class="disabled_input"/>
<br /><br />
<input name="test" type="text" class="disabled_input"/>
And this JavaScript:
var defalt1enabl = $(this).val();
if(defalt1enabl == "defalt1enabl"){
$('#disabled_input').removeAttr('disabled');
}
else{
$('#disabled_input').attr('disabled','disabled');
}
is changed to this:
var selectedOption = $(this).val();
if(selectedOption == "defalt4-disabl"){
$('.disabled_input').attr('disabled','disabled');
}
else{
$('.disabled_input').removeAttr('disabled');
}

Please replace your piece of code as provided below.
For HTML:
<input name="test" type="text" class="disabled_input"/>
<br /><br />
<input name="test" type="text" class="disabled_input"/>
For Script:
$(document).ready(function() {
$('.disabled_input').attr('enabled','enabled');
$('select[name="facility"]').on('change',function(){
var defalt1enabl = $(this).val();
if(defalt1enabl == "defalt1enabl"){
$('.disabled_input').removeAttr('disabled');
}
else{
$('.disabled_input').attr('disabled','disabled');
}
});
});

Remove unchanged input fields from Form while submit

In my web application I have edit profile page. In editprofile page their is many fields like
Name : <input type="text" name="name"/>
Location : <input type="text" class="geolocation" name="location">
Birthdata : <input type="date" name="dob">
Profile Picture : <input type="file" name="photo"/>
I want to send back the data of only the fields which are edited and not all the fields.

I'd normally do something like this on the backend.... but for your requirement you could remove the inputs that haven't changed. When you generate the html you can define an extra data attribute. Here's how I would do that:
HTML:
<form id="myform">
<input type="text" id="Name" data-initial="Foo" value="Foo" />
<input type="text" id="Location" data-initial="Bar" value="Bar" />
<input type="submit" value="Submit" />
</form>
JS:
$("#myform").submit( function() {
$(this).find("input").filter( function() {
$this = $(this);
return $this.data("initial") == $this.val();
}).remove();
});
http://jsfiddle.net/uLe7T/
I added an alert in the fiddle so you can see that they are removed before the form is submitted

jsFiddle
HTML
<input id="test" type="text" value="Some Text" data-value="Some Text">
JS
$('#test').blur(function() {
el = $(this);
if (el.val() != el.attr('data-value')) {
console.log('Edited');
} else {
console.log('Not Edited');
}
});

jQuery form validation

I have been working on this jQuery form which would only allow the user to submit once all fields are filled in. So essentially, the submit field (or in my case the 'request' field) is dimmed until all fields are not blank. My button is always dimmed though, would someone help me with this please? I have the following jQuery:
$(function() {
var $submit = $(".request input");
var $required = $(".required");
function containsBlanks(){
var blanks = $required.map(function(){ return $(this).val() == "";});
// the inArray helper method checks if value is within an array
return $.inArray(true, blanks) != -1;
}
function requiredFilledIn(){
if(containsBlanks())
$submit.attr("disabled","disabled");
else
$submit.removeAttr("disabled");
}
$("#form2 span").hide();
$("input").focus(function(){
$(this).next().fadeIn("slow");
}).blur(function(){
$(this).next().fadeOut("slow");
}).keyup(function(){
//Check all required fields.
requiredFilledIn();
});
requiredFilledIn();
});
This is my form
<div id="form2" title="Request a Call-back">
<p class="validateTips">All form fields are required. The submit button will activate once this is done.</p>
<form action="includes/requestcall.php" method="post">
<fieldset>
<label for="name">Name:</label>
<input type="text" name="name" id="name" size="30" class="required" />
<span>Please enter your Name</span>
<br />
<br />
<label for="number">Number:</label>
<input type="text" name="number" id="number" size="30" class="required" />
<span>Please enter your number</span>
<br />
<br />
<label for="time">Preferred Time:</label>
<input type="text" name="time" id="time" size="30" class="required" />
<span>Please enter your preferred time</span>
<br />
</fieldset>
<p class="request">
<input type="submit" value="Request" class="btn-submit">
</p>
</form>
</div>
I'm still learning jQuery and any help would be much appreciated.

I've adjusted the code slightly to use the filter function to retrieve the empty textboxes along with using the change event.
This is the link to the updated script running your markup on JSFiddle
Here's the updated script:
$(function () {
var $submit = $("input.btn-submit").attr("disabled", "disabled").css("color", "red");
var $required = $(".required");
function requiredFilledIn() {
var blanks = $required.filter(function () {
return $(this).val() === "";
});
if (blanks.length > 0) $submit.attr("disabled", "disabled").css("color", "red");
else $submit.removeAttr("disabled").css("color", "black");
}
$("#form2 span").hide();
$("input:text").focus(function () {
$(this).next().fadeIn("slow");
}).blur(function () {
$(this).next().fadeOut("slow");
}).change(function () {
//Check all required fields.
requiredFilledIn();
});
});

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();

Deselect text with Javascript

I have two input tag with numeric id in a form in one html page. On focus, I would like to set value of the second input from first and second character of the first input. Then I want to deselect the selected text in second input. There is a way to do that?
I wrote this HTML code:
<label>Num. Fattura:
<input type="text" name="numfattura1" onkeypress="return event.keyCode != 13" id="1" />
</label>
<label>Importo:
<input type="text" name="importo1" onkeypress="return event.keyCode != 13" />
</label>
<br />
<label>Num. Fattura:
<input type="text" name="numfattura2" onkeypress="return event.keyCode != 13" id="2" onfocus="twoDigits(2)" />
</label>
<label>Importo:
<input type="text" name="importo2" onkeypress="return event.keyCode != 13" />
</label>
<br />
And this javascript function:
function twoDigits(id){
var previousId = id - 1;
var prevoiusValue = document.getElementById(previousId).value;
document.getElementById(id).value = prevoiusValue.substring(0,2);
document.selection.empty();
window.getSelection().removeAllRanges()
}
I can't find how to deselect the text that is selected automatically.

set selectionStart and selectionEnd using setTimeOut.
http://jsfiddle.net/enQvT/ works in firefox.
function twoDigits(id){
var previousId = id - 1;
var prevoiusValue = document.getElementById(previousId).value;
var elem = document.getElementById(id);
setTimeout(function() {
elem.selectionStart=0;
elem.selectionEnd=0;
}, 0);
elem.value = prevoiusValue.substring(0,2);
}

Call .focus() on a another form element.

You can also empty and refill the input.
If you want to test:
<input type="textfield" id="aaa" value="aaa" />
<input type="textfield" id="bbb" value="bbb" onmouseover="empty()" />
<script>
var empty = function() {
var ipt = document.getElementById('aaa');
var iptval = ipt.value;
ipt.value = "";
ipt.value = iptval;
}
</script>