NotRocketScientist NotRocketScientist - 26 days ago 12
Javascript Question

in my form I checked input radio and image changes, but I fill input text and the image changes back

Okey, here goes my big problem:

I have this form, which has a submit button that only enables when you have checked and filled both inputs (there is no problem with that). If you follow these steps, you will realize where my problem is:


  1. Load this jsfiddle https://jsfiddle.net/ozLmdx4o/ don't pay to much attention to the code now, just look at the form: there is a default profile image, an empty input text, an unchecked input radio, and a disabled submit button.

  2. Test the form: fill the input text and check the input radio and observe how the default profile image changes to another image. Check and uncheck the input radio to observe how the image is linked to this input. This is the key of all this.

  3. But, what if your input text was filled wrong? so delete whatever you entered in the input text and start over again... but...what? The image has returned to the default profile image! even if it was linked to the input radio! why???



Why this happens?
Now you can check the code, because there must be somewhere something I have missed. Can anybody help me to keep the image linked to the input radio button?
input radio button unchecked = default profile image.
input radio button checked = special image.

//INPUT RADIO ON & OFF CODE
var prv1;
var markIt1 = function(e) {
if (prv1 === this && this.checked) {
this.checked = false;
prv1 = null;
} else {
prv1 = this;
}
checkIfValid();
if (!e.target.checked) {
var img = document.getElementById('theimage');
img.src = 'https://s17.postimg.org/7gc66bzu7/user.jpg';
}
};
//TURN ON AND OFF FUNCTIONS
$(function() {
$('input.whatever_class').on('click', markIt1);
$('input[type=text]').on('keyup', markIt1);
});
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
//CHANGE IMAGES
function changeImage(imgName) {
image = document.getElementById('theimage');
image.src = imgName;
}

function checkIfValid() {
var current = $('input[type=radio]:checked');
if ((current.length >= 1) && ($('input[type=text]').val() != "")) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
};


I would like the image to not change anytime I modify the input text.
Can anyone fix my code just the necessary to solve that problem?

Thanks!

Answer

Add this check:

if (!e.target.checked && !document.getElementById('whatever_id').checked) {
  var img = document.getElementById('theimage');
  img.src = 'https://s17.postimg.org/7gc66bzu7/user.jpg';
}

It is running the check function on input text and not getting checked and hence the problem. Hope it helps.

PS: I have kept e.target.checked but if not required then you can remove it.

Comments