We Keep Coding

Picture not changing when source changes

I hide input type and show only image which is used to choose file and on change of input I call a function :
function showpreview(file) {
var previewImg = $(file).parent().find('img').eq(0);
if (file.files && file.files[0]) {
console.log(window.URL.createObjectURL(file.files[0]));
previewImg.src = window.URL.createObjectURL(file.files[0]);
} else {
previewImg.src = "blankpreview.png";
}
console.log(previewImg.src);
console.log(previewImg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<label for="exampleFormControlFile2">
<img style="height:170px;" class="img-thumbnail" src="blankpreview.png" />
</label>
<input type="file" onchange="showpreview(this)" name="Screen_2" accept="image/jpeg, image/png" class="form-control-file d-none" id="exampleFormControlFile2" required />
</div>
This show correct source and element in console but image doesn't change

You can use .attr('src',yourimage) to set src of your image tag.
Demo Code :
function showpreview(file) {
var previewImg = $(file).parent().find('img') //no need of eq..
if (file.files && file.files[0]) {
console.log(window.URL.createObjectURL(file.files[0]));
previewImg.attr('src', window.URL.createObjectURL(file.files[0])); //use .attr here
} else {
previewImg.attr('src', "blankpreview.png");
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<label for="exampleFormControlFile2">
<img style="height:170px;" class="img-thumbnail" src="blankpreview.png" />
</label>
<input type="file" onchange="showpreview(this)" name="Screen_2" accept="image/jpeg, image/png" class="form-control-file d-none" id="exampleFormControlFile2" required />
</div>

Because you want to work with the raw DOM element, you need to grab that in your selector...
var previewImg = $(file).parent().find('.img-thumbnail').eq(0)[0];
Note the additional [0] at the end. Let's deal with it in steps below...
$(file).parent()
.find('.img-thumbnail') // find the thumbnail image
.eq(0) // "I only want the first one you find"
[0]; // Give me the DOM element that's inside the jQuery object
function showpreview(file) {
var previewImg = $(file).parent().find('.img-thumbnail').eq(0)[0];
if (file.files && file.files[0]) {
previewImg.src = window.URL.createObjectURL(file.files[0]);
} else {
previewImg.src = "blankpreview.png";
}
console.log(previewImg.src);
console.log(previewImg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<label for="exampleFormControlFile2">
<img style="height:170px;" class="img-thumbnail" src="blankpreview.png" />
</label>
<input type="file" onchange="showpreview(this)" name="Screen_2" accept="image/jpeg, image/png" class="form-control-file d-none" id="exampleFormControlFile2" required />
</div>

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

jQuery Sortable validation

I'm new to javascript & jquery but I'm attempting to get my head around how I would implement a validation form where when the user places/drags the images in the correct order the form can then be submitted. I have the images dragging in different orders and an alert box outputting the order in an array but how would I go about setting a value for the user to order the array of images in? I have the latest version of jQuery linked to the page and jQuery UI.
I'm trying to implement an if else statement in the code. I'm just not sure where I'm going wrong.
Heres what I got so far..
$(window).load(function(){
$(function() {
//$('#submit').on('click', function() {
//var valid = true,
//message = '';
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight",
cursor: 'crosshair',
update: function(event, ui) {
var order = $("#sortable").sortable("toArray");
$('#image_order').val(order.join(","));
alert($('#image_order').val());
}
});
$( "#sortable" ).disableSelection();
//if('#image_order').val { != [4,3,2,1];
//valid = false; }
//else {
//window.location.href = "http://google.com"
//}
});
});
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<form action="" method="post">
<input type="hidden" id="image_order" name="image_order" value="" />
<ul id="sortable" style="width: 524px;">
<li id="1" class="ui-state-default"><img src="http://placehold.it/100x90/ff0000/000000.png&text=1" /></li>
<li id="2" class="ui-state-default"><img src="http://placehold.it/100x90/ffff00/000000.png&text=2" /></li>
<li id="3" class="ui-state-default"><img src="http://placehold.it/100x90/00ff00/000000.png&text=3" /></li>
<li id="4" class="ui-state-default"><img src="http://placehold.it/100x90/00ffff/000000.png&text=4" /></li>
</ul>
<div style="clear:both;"></div>
<input name="Submit" value="RE-ORDER" type="submit" />
</form>

$(window).load(function(){
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight",
cursor: 'crosshair',
update: function(event, ui) {
var order = $("#sortable").sortable("toArray");
order = JSON.stringify(order);
correct = JSON.stringify(["4","3","2","1"]);
if (order==correct){
//ENABLE WHATEVER HERE
}
}
});
$( "#sortable" ).disableSelection();
});
});

You can add a validate() function that checks when you sort and when you submit the form.
<input name="Submit" value="RE-ORDER" type="submit" onclick="return validate();"/>
You can return a boolean for wheter the form is valid or not to stop the onClick function from propagating.
Just go through the fields and make sure the order is correct before allowing the user to proceed.
var expectedOrder = ["4", "3", "2", "1"];
var currentOrder = [];
window.validate = function() {
if ($('#username').val().trim() === '') {
return false;
}
if (!isEqual(currentOrder, expectedOrder)) {
return false;
}
return true;
}
$(document).ready(function () {
$('#sortable').sortable({
placeholder: 'ui-state-highlight',
cursor: 'crosshair',
update: function (event, ui) {
currentOrder = $("#sortable").sortable("toArray");
if (validate()) {
alert('Navigating to http://www.google.com...');
}
$('#sortable').disableSelection();
}
});
});
function isEqual(arr1, arr2) {
return arr1.join('').localeCompare(arr2.join('')) === 0;
}
body {
padding: 8px;
}
.req {
color: #FF0000;
font-weight: bold;
}
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<form action="" method="post">
<label>Username:<span class="req" title="Field Required">*</span></label>
<input id="username" name="username" type="text" />
<br />
<input type="hidden" id="image_order" name="image_order" value="" />
<ul id="sortable" style="width: 524px;">
<li id="1" class="ui-state-default">
<img src="http://placehold.it/100x90/ff0000/000000.png&text=1" />
</li>
<li id="2" class="ui-state-default">
<img src="http://placehold.it/100x90/ffff00/000000.png&text=2" />
</li>
<li id="3" class="ui-state-default">
<img src="http://placehold.it/100x90/00ff00/000000.png&text=3" />
</li>
<li id="4" class="ui-state-default">
<img src="http://placehold.it/100x90/00ffff/000000.png&text=4" />
</li>
</ul>
<div style="clear:both;"></div>
<input name="Submit" value="RE-ORDER" type="submit" onclick="return validate();"/>
</form>

jquery .prop('disabled', true) not working

I am attempting to toggle disabled = true|false on a <input type="text">, using a checkbox. I am able to get the value of the input, but I cannot set the input to disabled.
my jquery/js code
<script>
$(function () {
$('.date').datepicker();
$('body').on('change', '.housing', function () {
if ($(this).val() == 'dorms') {
$(this).parent().next(".dorms").show();
} else {
$(this).parent().siblings(".dorms").hide();
}
});
$('body').on('change', '.single', function () {
if ($(this).checked) {
$('#echo1').text($(this).prev(".roommate").val()); // this works
$(this).prev(".roommate").val(''); // does not empty the input
$(this).prev(".roommate").disabled = true; // does not set to disabled
$(this).prev(".roommate").prop('disabled', true); // does not set to disabled
$('#echo2').text($(this).prev(".roommate").prop('disabled')); // always says false
} else {
$('#echo1').text($(this).prev(".roommate").val()); // this works
$(this).prev(".roommate").disabled = false; // always stays false
$('#echo2').text($(this).prev(".roommate").prop('disabled')); // always says false
}
});
});
</script>
my html code
<div class="registration_housing particpant_0" data-sync="0">
<div>
<label class="particpant_0"></label>
</div>
<div>
<label>Off Campus (not included)</label>
<input type="radio" name="housing[0]" value="none" class="housing" />
</div>
<div>
<label>On Campus</label>
<input type="radio" name="housing[0]" value="dorms" class="housing" />
</div>
<div class="dorms" style="display:none;">
<div>
<label>Checkin:</label>
<input type="text" name="check_in[0]" class="date" />
</div>
<div>
<label>Checkout:</label>
<input type="text" name="check_out[0]" class="date" />
</div>
<div>
<label>Roommate:</label>
<input type="text" name="roommate[0]" class="roommate" />
<input type="checkbox" name="roommate_single[0]" value="single" class="single" />check for singe-occupancy</div>
</div>
<div class="line">
<hr size="1" />
</div>
</div>
<div>
<label id="echo1"></label>
</div>
<div>
<label id="echo2"></label>
</div>
you can see this at http://jsfiddle.net/78dQE/1/
Any idea why I can get the value of (".roommate") - ie. $(this).prev(".roommate").val()
but
$(this).prev(".roommate").disabled = true;
OR
$(this).prev(".roommate").prop('disabled', true);
will not set (".roommate") to disabled?

Your issue is mixing jquery with DOM element attributes
change if ($(this).checked) { to if (this.checked) {
With jquery you would do
$(this).is(':checked') // But you could just do this.checked
And
$(this).prev(".roommate").prop('disabled', false); // or $(this).prev(".roommate")[0].disabled = false;
instead of
$(this).prev(".roommate").disabled = false;
Fiddle
So you just probably need this:
$('body').on('change', '.single', function () {
$(this).prev(".roommate").prop('disabled', this.checked).val('');
});

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