We Keep Coding

how to exchange value between 2 inputs

I have 2 input text and button.. I want to make exchange value between 2 inputs at the same time. here is my code.
$("button").on('click', function() {
if (!($(this).hasClass("clicked"))) {
$(this).addClass("clicked");
$(".first").val($(".second").val());
$(".second").val($(".first").val());
} else {
$(this).removeClass("clicked");
$(".first").val($(".second").val());
$(".second").val($(".first").val());
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input class="first" type="text" value>
<input class="second" type="text" value>
<button type="button">Exchange</button>
</div>
the first input works fine but the second not working.. I want the exchange happen at the same time.

You are overwriting one of the two before reading that other value. So you end up with twice the same value.
The traditional way is to use a temporary variable:
$("button").on('click', function() {
$(this).toggleClass("clicked");
var temp = $(".first").val();
$(".first").val($(".second").val());
$(".second").val(temp);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input class="first" type="text" value>
<input class="second" type="text" value>
<button type="button">Exchange</button>
</div>
At the same time note how you can shorten your code with the toggleClass method.
Alternative
Just to provide an alternative, you can do this without an explicit extra variable, using the ES6 destructuring assignment. For that to work, you need to have an assignable property for the input value. Of course, the DOM value property would just be that:
$("button").on('click', function() {
$(this).toggleClass("clicked");
[$(".first").get(0).value, $(".second").get(0).value] =
[$(".second").val(), $(".first").val()];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input class="first" type="text" value>
<input class="second" type="text" value>
<button type="button">Exchange</button>
</div>

$("button").on('click', function() {
var firstVal = $(".first").val()
var secondVal = $(".second").val()
if (!($(this).hasClass("clicked"))) {
$(this).addClass("clicked");
$(".first").val(secondVal);
$(".second").val(firstVal);
} else {
$(this).removeClass("clicked");
$(".first").val(secondVal);
$(".second").val(firstVal);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input class="first" type="text" value>
<input class="second" type="text" value>
<button type="button">Exchange</button>
</div>
You need to store the original values first, when you try to swap them without storing you forget that one of the values is overridden.

that because the value was changed . try to save old value on var
$("button").on('click', function() {
var first = $(".first").val(),
second = $(".second").val();
if (!($(this).hasClass("clicked"))) {
$(this).addClass("clicked");
$(".first").val(second);
$(".second").val(first);
} else {
$(this).removeClass("clicked");
$(".first").val(second);
$(".second").val(first);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input class="first" type="text" value>
<input class="second" type="text" value>
<button type="button">Exchange</button>
</div>

Use an intermediate temp variable to swap them.
$("button").on('click', function() {
if (!($(this).hasClass("clicked"))) {
$(this).addClass("clicked");
var temp = $(".first").val();
$(".first").val($(".second").val());
$(".second").val(temp);
} else {
$(this).removeClass("clicked");
var temp = $(".first").val();
$(".first").val($(".second").val());
$(".second").val(temp);
}
});
Working DEMO

Updating same html Element with jQuery when user input changes

I am trying do some calculations that take user input and supply the calculated value for the user to see. The user will supply two values and then the result, ADF, will be returned.
Two problems that I am having: The value is calculated before I have entered the second value (FG); and when either value is changed, the old ADF is not replaced. I understand that is because it keeps applying .append(), but I do not know what I need to use instead. I have provided pictures of what is happening. I have listed my code below.
*Note the round() and ADF() functions are my Javascript functions used for the calculations and I didn't think it relevant to list that code. Let me know if you think it is relevant to see it.
Thanks in advance for your help.
function main() {
$(document).on('change', '#Gravities', function () {
OG = $('input[name=OG]').val();
FG = $('input[name=FG]').val();
var calc = round(ADF(OG,FG)*100, 2);
$('.ADFbox').append('<div class="ADF">'+calc+'%</div>');
});
}
$(document).ready(main);
<body>
<form id="Gravities">
<div>
<p><label class="originalGravity">OG: <input type='text' name='OG' value =""></input></label></p>
</div>
<div>
<p><label class="finalGravity">FG: <input type='text' name='FG' value=""></input></label></p>
</div>
</form>
<div class = 'ADFbox'>
<p>ADF:</p>
</div>
</body>
</html>
enter image description here
enter image description here

$(document).on("input", ".gravity", function() {
var thisval = $(this).val()
var nothisval = $(".gravity").not(this).val()
if (thisval.length > 0 && nothisval.length > 0) {//check if one value is empty
OG = $('input[name=OG]').val();
FG = $('input[name=FG]').val();
//var calc = round(ADF(OG, FG) * 100, 2);
var calc = OG * FG;//change this computation
//$('.ADFbox').append('<div class="ADF">' + calc + '%</div>');
$('.ADFbox').text("ADF:" + calc).change();
} else {
$('.ADFbox').text("ADF: 0");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form id="Gravities">
<div>
<p><label class="originalGravity">OG: <input type='text' class="gravity"name='OG' value ="" /></label></p>
</div>
<div>
<p><label class="finalGravity">FG: <input type='text' class="gravity" name='FG' value=""/></label></p>
</div>
</form>
<div class='ADFbox'>
<p>ADF:</p>
</div>
</body>
Check of each value then proceed if both value has length more than 0
Note: input has no ending tag just close like <input />

To solve this you could place the .adf div in the HTML on load and then simply update it's text() instead of using append() to create a new copy after each calculation.
Below is a working example. Note that I simplified the calculation as you didn't provide the logic of the round() or ADF() functions. Try this:
function main() {
$(document).on('change', '#Gravities', function() {
OG = $('input[name=OG]').val();
FG = $('input[name=FG]').val();
//var calc = round(ADF(OG, FG) * 100, 2);
var calc = OG * FG;
$('.ADFbox .adf').text(calc + '%');
});
}
$(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Gravities">
<div>
<p>
<label class="originalGravity">
OG:
<input type='text' name='OG' value="">
</label>
</p>
</div>
<div>
<p>
<label class="finalGravity">
FG:
<input type='text' name='FG' value="">
</label>
</p>
</div>
</form>
<div class='ADFbox'>
<p>ADF: <div class="adf"></div></p>
</div>

The problem you are appending html not updating the existing text value.
Just change your code like below:
$(document).on('change', '#Gravities', function () {
OG = $('input[name=OG]').val();
FG = $('input[name=FG]').val();
if(OG != "" && FG != ""){
var calc = round(ADF(OG,FG)*100, 2);
$('.ADFbox').find("p").html("ADF:"+ calc + '%');
}
});

function main() {
$(document).on('change', '#Gravities', function () {
if($('input[name=OG]').val()!='' && $('input[name=FG]').val()!=''){
var calc = round(ADF(OG,FG)*100, 2);
$('.ADFbox').html('<div class="ADF">'+calc+'%</div>');
}
});
}
$(document).ready(main);
<body>
<form id="Gravities">
<div>
<p><label class="originalGravity">OG: <input type='text' name='OG' value =""></input></label></p>
</div>
<div>
<p><label class="finalGravity">FG: <input type='text' name='FG' value=""></input></label></p>
</div>
</form>
<div class = 'ADFbox'>
<p>ADF:</p>
</div>
</body>
</html>

You have added on change event. that's why it's getting calculated each time when any one of the fields got updated. I made few changes:
<form id="Gravities">
<div>
<p><label class="originalGravity">OG: <input type='number' name='OG' value =""></input></label></p>
</div>
<div>
<p><label class="finalGravity">FG: <input type='number' name='FG' value=""></input>
</label></p>
</div>
<button type="button" id="fgs">
Find ADF</button>
</button>
</form>
<div class = 'ADFbox'>
<p>ADF:</p>
</div>
function main() {
$("#fgs").on('click', function () {
OG = $('input[name=OG]').val();
FG = $('input[name=FG]').val();
var calc = OG*FG;
document.getElementsByClassName("ADFbox")[0].innerHTML= "ADF:"+" " +calc;
});
}
$(document).ready(main);
created working fiddle for you: https://jsfiddle.net/Safoora/hspdgqca/15/

Sorry if I'm not understanding you. As per my understanding you need to calculate only if both inputs field are changed? If it is so, you can do like this:
function main() {
$(document).on('change', '#Gravities input', function () {
OG = $('input[name=OG]');
FG = $('input[name=FG]');
$(this).data('changed',true); // set "changed=true" for current input
// Check if both input fields are changed
if(OG.data('changed') == true && FG.data('changed') == true){
//var calc = round(ADF(OG.val(),FG.val())*100, 2); // uncomment this
var calc = OG.val() * FG.val(); // comment this
$('.ADFbox').html(function(){
$('#Gravities input').data('changed',false); // set "changed=false" for next query
return '<div class="ADF">'+calc+'%</div>'
});
}
});
}
$(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Gravities">
<div>
<p><label class="originalGravity">OG: <input type='text' name='OG' value =""></input></label></p>
</div>
<div>
<p><label class="finalGravity">FG: <input type='text' name='FG' value=""></input></label></p>
</div>
</form>
<div class = 'ADFbox'>
<p>ADF:</p>
</div>

Re-arrange Text Input fields based on Number entered by user

I have few inputs, and it comes with values from 1 to 100 in it, but user can alter those values. I have sorted my inputs in Ascending order. Now I want that each time user changes an input, they should be re-arranged in ascending order.
Here is my HTML template:
var sortedArray = $("div[class^='wrap_']").get().sort(function(a, b) {
var idx = parseInt($(a).find(".sort_by").val(),10);
var idx2 = parseInt($(b).find(".sort_by").val(),10);
return idx > idx2;
});
$(sortedArray).appendTo("body");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap_0">
<input class="sort_by" value="10"/>
</div>
<div class="wrap_1">
<input class="sort_by" value="3"/>
</div>
<div class="wrap_2">
<input class="sort_by" value="7"/>
</div>
Right now they appear as:
3
7
10
if user changes 3 to 12, I want my output to be automatically changed to:
7 10 12.
I want Jquery solutions only. Thanks in advance.

$(document).ready(function(){
sort();
$(".sort_by").change(function(){
sort();
});
function sort(){
var sortedArray = $("div[class^='wrap_']").get().sort(function(a, b) {
var idx = parseInt($(a).find(".sort_by").val(),10);
var idx2 = parseInt($(b).find(".sort_by").val(),10);
return idx > idx2;
});
console.log(sortedArray);
$(sortedArray).appendTo("body");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap_0">
<input class="sort_by" value="10"/>
</div>
<div class="wrap_1">
<input class="sort_by" value="3"/>
</div>
<div class="wrap_2">
<input class="sort_by" value="7"/>
</div>
There...you change a value and press enter...your sort code is executed.

You can use the input event and apply the sort method on the parent div jQuery collection. Please note that I added class wrap so the divs can be easily selected. The code .trigger('input') ensures that the input (actually parent div) elements are sorted when the page loads.
$(function() {
$('.sort_by').on('focusout', function() {
var arr = $('div.wrap');
arr = arr.sort(function(a,b) {
return +$(a).find('.sort_by').val() - +$(b).find('.sort_by').val();
});
$('body').append( arr );
})
.trigger('focusout');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_0 wrap">
<input class="sort_by" value="10"/>
</div>
<div class="wrap_1 wrap">
<input class="sort_by" value="3"/>
</div>
<div class="wrap_2 wrap">
<input class="sort_by" value="7"/>
</div>

CSS input change and return to normal

I tried to make a warning if the input is not the same , like the example below:
$data = document.getElementById("target").value = "";
$("#target").keyup(function() {
if ($data.length > 3) {
$("#target").css("border-color", "red");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="target" class="form-control" type="text" value="">
</form>
But it did not work, so if true then the border-color has to change

You need to move your $data variable into inside keyup events. Since you've add jQuery tag, I've selecting object using jQuery method too.
UPDATE
Simplify the code
$("#target").keyup(function(){
var $data = $("#target").val();
$("#target" ).css("border-color", $data.length > 3 ? "red" : "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="target" class="form-control" type="text" value="">
</form>

In provided example, $data holds ""(empty string)
In event-handler-function, this refers to the element on which event is invoked hence this.value will return the value of the element.
var $data = $("#target");
$data.val('');
$data.keyup(function() {
if (this.value.length > 3) {
$("#target").css("border-color", "red");
} else {
$("#target").css("border-color", "");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="target" class="form-control" type="text" value="">
</form>
Another approach I would like to suggest is to using jQuery.toggleClass instead of jQuery.css
var $data = $("#target");
$data.keyup(function() {
$("#target").toggleClass('error', this.value.length > 3);
});
.error {
border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="target" class="form-control" type="text" value="">
</form>

show or hide div depending on dynamic value in combo box jquery

I have a combobox called select_person ={typeA, typeB}.
When an option is chosen I want to show other combobox has_id={has_id, has_no_id}
Now depending on value chosen in typeA or typeB and depending on that has_id or has_no_id I want to show (or keep hidden) the respective div.
So If the registry happens to have an id and is typeA I will show only an input field, but if is typeA and has no ID i will display 3 input fields, same for typeB.
to do so I am doing something like:
$(function () {
$('#select_person').change(function () {
$('#has_id').show();
if ($('#select_person').val() == 'typeA') {
$("#has_id").append("<option>" + $("#typeA_has_id").val() + "</option>");
$("#has_id").append("<option>" + $("#typeA_has_no_id").val() + "</option>");
}
if ($('#select_person').val() == 'typeB') {
$("#has_id").append("<option>" + $("#typeB_has_id").val() + "</option>");
$("#has_id").append("<option>" + $("#typeB_has_no_id").val() + "</option>");
}
});
});
$(function () {
$('#has_id').change(function () {
$('.persons').hide();
$('#' + $(this).val()).show();
});
});
});
and html
<Select id="select_person">
<option value="0">Select person</option>
<option value="typeA">typeA</option>
<option value="typeB">typeB</option>
</Select>
<Select id="has_id" style="display:none"></Select>
<div id="person1" class="persons" style="display:none">
<div class="form-left">Type A has id *</div>
<input type="text" id="name" name="name" class="form-input"
/>
</div>
<div id="person1" class="persons" style="display:none">
<div class="form-left">Type A has No id *</div>
<input type="text" id="id" name="id" class="form-input"
/>
<input type="text" id="name" name="name" class="form-input"
/>
<input type="text" id="address" name="address" class="form-input"
/>
</div>
<div id="person2" class="persons" style="display:none">
<div class="form-left">Type B has id *</div>
<input type="text" id="nameB" name="nameB" class="form-input"
/>
</div>
<div id="person2" class="persons" style="display:none">
<div class="form-left">Type B has No id *</div>
<input type="text" id="idB" name="idB" class="form-input"
/>
<input type="text" id="nameB" name="nameB" class="form-input"
/>
<input type="text" id="addressB" name="addressB" class="form-input"
/>
</div>
but isnot working, could you help me out? here is the jsfiddle

you have extra }); at the end of the document...
you have two ids with a same name person1..which is invalid HTML markup.. either remove it..and use classes
updated from your comment
i have created this example fiddle..reading your comment not sure if this is what you want.. but i am sure this will get you started
fiddle here

See what is happening in your code and html markup:
Your markup is invalid since it used same ids for multiple elements on same page.
Its also not clear how would you determine to put values in $("#typeA_has_id").val().
and you had a }); extra closing at the end as mentioned in other answers as well.
and if you want to put some values in the option list of your $('#has_id') then you can try with this one.
$("<option/>").val('a').text('a').appendTo("#has_id");
Although i have done something if you would like to see:
FIDDLE
changed html:
<div id="person-A-withID" class="persons" style="display:none"></div>
<div id="person-A-withoutID" class="persons" style="display:none"></div>
<div id="person-B-withID" class="persons" style="display:none"></div>
<div id="person-B-withoutID" class="persons" style="display:none"></div>
jQuery:
$(function () {
$('#has_id').show();
$('#select_person').change(function () {
$('.persons').hide();
if ($('#select_person').val() == 'typeA') {
$("#has_id").html('');
$("<option/>").val('0').text('--Choose Type A--').appendTo("#has_id");
$("<option/>").val('person-A-withID').text('person-A-withID').appendTo("#has_id");
$("<option/>").val('person-A-withoutID').text('person-A-withoutID').appendTo("#has_id");
}
if ($('#select_person').val() == 'typeB') {
$("#has_id").html('');
$("<option/>").val('0').text('--Choose Type B--').appendTo("#has_id");
$("<option/>").val('person-B-withID').text('person-B-withID').appendTo("#has_id");
$("<option/>").val('person-B-withoutID').text('person-B-withoutID').appendTo("#has_id");
}
});
$('#has_id').change(function () {
$('.persons').hide();
$('#' + $(this).val()).show();
});
});

One minor mistake : }); extra
http://jsfiddle.net/LEfbX/1/
$(function () {
$('#has_id').change(function () {
$('.persons').hide();
$('#' + $(this).val()).show();
});