We Keep Coding

Change input with an input?

Is it possible to change the color and text of an input by clicking on a different input?.
In short it is: when clicking ferrari by css raises change the background-color to red What I would like was to also change the word Available to Unavailable. is it possible to do this?
here I make the change of the color onclick.
input{
display: none
}
input:checked+label>.choices {
background-color: red !important;
}
In the other block I have the following Script
<script language="JavaScript" type="text/javascript">
function insereInput() {
if ( document.getElementById('btn').innerHTML == 'Disponivel' ) {
document.getElementById('btn').innerHTML = '<marquee>Em Serviço</marquee>';
document.getElementById('inputprogram').innerHTML = '<marquee>Em Serviço</marquee>';
} else {
document.getElementById('btn').innerHTML = 'Disponivel';
document.getElementById('btn').innerHTML = 'Disponivel';
}
}
</script>
which changes the status by clicking between "Available" and "In service".
My short code is:
<td>
<div class="btn-wrap">
<input type="checkbox" id="veiculos1" /><label for="veiculos1"><div class="choices">FERRARI</div></label>
<input type="checkbox" id="filtro" /><label for="filtro1"><div class="choices3"><span id="btn" onclick="insereInput()">Disponivel</span></div></label>
</div>
I really appreciate your help.

<script>
function mytest() {
var x = document.getElementById("btn");
if (x.innerHTML === "Disponivel") {
x.innerHTML = "Em Serviço";
} else {
x.innerHTML = "Disponivel";
}
}
</script>

Make Anchor tag work conditionally using Javascript

I have a Radio button. I want to implement a validation on "Submit" Anchor tag that displays an error if no selection is made on the radio button and redirects to the URL provided in the href attribute if the radio button selection is made.
Below is the code for radio button -
<div>
<input required="" type="radio" id="group02-0" name="group02" value="Yes" onclick="yesnoCheck();">
<label for="group02-0" >Yes</label>
<input type="radio" id="group02-1" name="group02" value="No" onclick="yesnoCheck();">
<label for="group02-1">No</label>
</div>
<script>
var radio_value = "";
function yesnoCheck() {
radio_value = document.querySelector('input[name="group02"]:checked').value;
}
</script>
In the same HTML file, I have code for the Submit Anchor tag -
<span>Submit</span>
<script>
function submitCheck() {
if (radio_value === "") {
//Display an error. The user should not be taken to the next page
return false;
} else {
//User should be taken to the URL in the href attribute
return true;
}
}
</script>
Irrespective of whether I make a selection on the radio button, the anchor tag always takes me to the next page. Please help!

You don't need two radio buttons. Only one Checkbox.
Use Event.preventDefault() to prevent default browser navigation
Use the input element's checked state to determine the outcome
Finally use document.location to navigate to a EL_submitBtn.getAttribute('href')
PS: Don't use inline JavaScript (in HTML). JS should be in one place and that's your JS file or inside a <script> tag. It's easier to debug and maintain.
Single checkbox
const EL_submitBtn = document.querySelector('#submitBtn');
const EL_acceptCkb = document.querySelector('[name="accept"]');
function submitCheck(ev) {
ev.preventDefault(); // prevent follow link
if (!EL_acceptCkb.checked) { // Unchecked
alert("You will not get a better UX");
} else { // Checked
alert("Yes! Buckle up!")
document.location = EL_submitBtn.getAttribute('href');
}
}
EL_submitBtn.addEventListener('click', submitCheck);
<div>
<h3>Would you like a better UX?</h3>
<label>
<input type="checkbox" name="accept"> Yes I do
</label>
</div>
<a id="submitBtn" href="https://www.google.com">Submit</a>
Two radio buttons
Use document.querySelector('[name="accept"]:checked') to get the checked one, if any.
const EL_submitBtn = document.querySelector('#submitBtn');
function submitCheck(ev) {
ev.preventDefault(); // prevent follow link
const EL_acceptCkd = document.querySelector('[name="accept"]:checked');
if (!EL_acceptCkd) { // None checked
alert("You must select Yes or No.");
} else if (EL_acceptCkd.value === 'no') { // "NO" checked
alert("You will not get a better UX");
} else { // "YES" checked
alert("Yes! Buckle up!")
document.location = EL_submitBtn.getAttribute('href');
}
}
EL_submitBtn.addEventListener('click', submitCheck);
<div>
<h3>Would you like a better UX?</h3>
<label>
<input type="radio" name="accept" value="yes"> Yes
</label>
<label>
<input type="radio" name="accept" value="no"> No
</label>
</div>
<a id="submitBtn" href="https://www.google.com">Submit</a>

use css pointer-events: none; -> https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
If you absolutely want to use button radios (even if it's a bit twisted as an idea) here is the code:
const aHrefGoogle = document.getElementById('aHrefGoogle');
document.querySelectorAll('input[name=group02]').forEach(el=>
{
el.onchange=_=>{ if (el.checked) setLinkOnOff(el.value) }
})
function setLinkOnOff(val)
{
if (val==='yes') { aHrefGoogle.classList.remove('adisableHref') }
else { aHrefGoogle.classList.add('adisableHref') }
}
.adisableHref {
color: grey;
pointer-events: none;
cursor: default;
text-decoration-line: none;
}
make link Google active ?
<label ><input type="radio" name="group02" value="yes">Yes </label>
<label ><input type="radio" name="group02" value="no" checked>No! </label>
<br><br>
<span> Google </span>
for memo here is the initial code with a checkbox :
const yesnoCheck = document.getElementById('yesnoCheck')
, aHrefGoogle = document.getElementById('aHrefGoogle')
;
// init
yesnoCheck.checked = false
aHrefGoogle.classList.add('adisableHref')
yesnoCheck.oninput =_=>
{
if (yesnoCheck.checked) { aHrefGoogle.classList.remove('adisableHref') }
else { aHrefGoogle.classList.add('adisableHref') }
}
#yesnoCheck { display: none; }
#yesnoCheck + label { display: inline-block; background: #cd3c3c; color: white; padding: .17em .2em; cursor: pointer; }
#yesnoCheck:checked + label { background: #378b2c; }
#yesnoCheck + label::before { content: 'NO'; display: inline-block; width:2.6em; text-align: center; }
#yesnoCheck + label::after { content: ''; display: inline-block; width:0; text-align: center; }
#yesnoCheck:checked + label::before { content: ''; width:0; }
#yesnoCheck:checked + label::after { content: 'YES'; width:2.6em; }
.adisableHref {
color: grey;
pointer-events: none;
cursor: default;
text-decoration-line: none;
}
make link Google active ?
<input type="checkbox" id="yesnoCheck"><label for="yesnoCheck">▉</label>
<br><br>
<span> Google </span>

dymanic forms fields based on radio boxes

I want to make a dynamic form. I am basing this on the post here
How To Show And Hide Input Fields Based On Radio Button Selection which has an updated jsfiddle here http://jsfiddle.net/QAaHP/16/
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.display = 'block';
}
else document.getElementById('ifYes').style.display = 'none';
}
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"/>
No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"/>
<br>
<div id="ifYes" style="visibility:hidden">
If yes, explain:
<input type='text' id='yes' name='yes'/>
<br>What can we do to accommodate you?
<input type='text' id='acc' name='acc'/>
</div>
other 3 <input type='text' id='other3' name='other3'><br>
other 4 <input type='text' id='other4' name='other4'><br>
Not being a big fan of javascript, I tried to modify this in a new jsfiddle here for detection of 'ifno' condition as well
http://jsfiddle.net/35nxgw8o/
My goal is to detect both the 'no' and 'yes' conditions so that I am making this an 'either/or, never 'both' condition but having little luck doing so. Maybe I am goiing about it all wrong?

#Stevish Indeed onchage does it.
I am posting what I used here as is so others may find it useful. It is PHP and Javascript. It allws me to set the pre-determined variable in the URL (GET) , then depending on which way it was loaded,(hideshow or showhide) Javascript handles it from there.
echo '><span style="color:#666; font-weight:bold; line-height: 300%"> Yes</span><input type="radio" name="mppdf" value="yes" onChange="getValue(this)"';
if ($_GET['mppdf']!='yes')
{
$showhide=' style="display: none "';
$hideshow=' style="display: block "';
echo ' checked';
}
else
{
}
if (($_GET['pdf']=='yes') || ($_GET['mppdf']=='yes') || (isset($_GET['pdfname'])))
{
$hideshow=' style="display:none; "';
$showhide=' style="display: block "';
echo ' checked';
}
else
{
echo '><div id="yourfield1" '.$showhide.'>';
echo'<input style="width: 120px; height: 16px; color:#666; background-color: #DDD; font-weight:bold" type="text" value="'.$_GET['pdfname'].'" placeholder="'.$name.'" id="pdfname" name="pdfname"';
echo' <div id="yourfield2" '.$hideshow.'"> ';
echo'
<span style="color:#666; font-weight:bold; line-height: 300%"> jpg</span>
<input type="radio" name="jpgpdf" value="no" id="JPG"';
if (($_GET['pdf']!='yes') && ($_GET['mppdf']!='yes') && (!isset($_GET['pdfname'])))
{
echo ' checked';
}
else
{
}
echo '><span style="color:#666; font-weight:bold; line-height: 300%"> pdf</span><input type="radio" name="jpgpdf" value="no" id="PDF"';
if (($_GET['pdf']=='yes') || ($_GET['mppdf']=='yes') ||(isset($_GET['pdfname'])))
{
echo ' checked';
}
else
{
}
echo'>
</div>';
<script type="text/javascript">
function getValue(x) {
if(x.value == 'No'){
document.getElementById("yourfield1").style.display = 'none'; // you need a identifier for changes
document.getElementById("yourfield2").style.display = 'block'; // you need a identifier for changes
}
else{
document.getElementById("yourfield1").style.display = 'block'; // you need a identifier for changes
document.getElementById("yourfield2").style.display = 'none'; // you need a identifier for changes
}
}
</script>

When use backspace or delete button submit button color not changes

I have an HTML form where submit button is disabled when input value is less than 10. The button changes its color when input value becomes greater than 10.
Problem comes when I use backspace or delete button to remove input value, submit button color does not change to disabled button until I refresh the page.
setInterval(function () {
if ($('#tot2').val() >= 10){
$("#submit").removeAttr("disabled");
$("#submit").css({"background-color": "blue", "color": "white"});
} else {
$("#submit").attr("disabled", "disabled");
}
}, 10);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post" >
<input type="text" name="balance" id="tot2" value="" />
<input type="submit" id="submit" name="submit" disabled="disabled" />
</form>

You change the colors once the value reaches 10, but you never change them back. You can set them to an empty string ("") to get back to the original colors before you set them. (See jQuery - remove style added with .css() function).
Fixed code below:
setInterval(function () {
if ($('#tot2').val() >= 10){
$("#submit").removeAttr("disabled");
$("#submit").css({"background-color": "blue", "color": "white"});
} else {
$("#submit").attr("disabled", "disabled");
// Remove the custom colors we added.
$('#submit').css({"background-color": "", "color": ""});
}
}, 10);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post" >
<input type="text" name="balance" id="tot2" value="" />
<input type="submit" id="submit" name="submit" disabled="disabled" />
</form>
(Note that, as others point out, it's better to monitor the input for changes rather than use a timer.)

Here you go with a solution
$('#tot2').keyup(function(){
if(parseInt($(this).val()) < 10 || $(this).val().length === 0) {
$('#submit')
.attr('disabled', 'disabled')
.removeClass('active');
} else {
$('#submit')
.removeAttr('disabled')
.addClass('active');
}
});
.active {
background: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post" >
<input type="text" name="balance" id="tot2" value="" />
<input type="submit" id="submit" name="submit" disabled="disabled" />
</form>

Try keyup event. Use class for styling and toggle it.
$("#tot2").on("keyup", function() {
var elem = $(this);
if (elem.val() >= 10) {
$("#submit").removeAttr("disabled").addClass("active");
} else {
$("#submit").attr("disabled", "disabled").removeClass("active");
}
});
CSS:
active {
background-color: blue;
color: white
}
Demo: http://jsfiddle.net/GCu2D/2207/

You should use keyup or keypress function, and instead of set inline style use addClass like this:
$('#tot2').keyup(function() {
var val = $(this).val();
if (val >= 10) {
$("#submit").removeAttr("disabled");
$("#submit").addClass('NewSub');
} else {
$("#submit").attr("disabled", "disabled");
$("#submit").removeClass('NewSub');
}
});
.NewSub {
background: blue;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post">
<input type="text" name="balance" id="tot2" value="" />
<input type="submit" id="submit" name="submit" disabled="disabled" />
</form>

Rather than using time interval, you can simply do it like this:
$('#tot2').on('change', function(){
if($('#tot2').val() < 10)
$('#submit').attr('disabled', 'disabled');
else $('#submit').removeAttr('disabled');
});

If I check 2 input radio the disabled Submit button enables, but if I uncheck them...the Submit button doesn't disable back

I just need a little help with this code.
var prv3;
var markIt3 = function(e) {
if (prv3 === this && this.checked) {
this.checked = false;
prv3 = null;
} else {
prv3 = this;
}
};
$(function() {
$('input.class_x').on('click', markIt3);
});
$('input[type=radio]').on('change', function() {
var current = $('input.class_x').filter(':checked');
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
if (current.length > 1) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
}).change();
My request is the following:
can anybody just FIX what is missing in order for the form Submit button to go back to be disabled as it is supposed to be, because this form only enables it when 2 input type radio have been checked?
This form previous description is the main idea of everything:
A form, with several input type radios. Check at least 2 and the Submit button enables. But if you uncheck any of them, the Submit button should disable back, but I cannot manage to achieve this PART.
I just need a little HELP with IT, nothing else.
Please, DON'T change my code too much!Can it be done?
Check the fiddle right here: https://jsfiddle.net/Suiberu/70tkgk5t/13/
Thanks!

Actually problem is deselecting radio button not detected as a change. How about this
var prv3;
var markIt3 = function(e) {
if (prv3 === this && this.checked) {
this.checked = false;
prv3 = null;
} else {
prv3 = this;
}
checkIfValid();
};
$(function() {
$('input.class_x').on('click', markIt3);
});
function checkIfValid() {
var current = $('input.class_x').filter(':checked');
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
if (current.length > 1) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
};
input {
display: block;
margin: 0.5em 0;
}
input[type='submit']:disabled {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myform" autocomplete="off" method="post">
<input class="class_x" type="radio" name="name_1" value="value_1" id="id_1" />
<input class="class_x" type="radio" name="name_2" value="value_2" id="id_2" />
<input class="class_x" type="radio" name="name_3" value="value_3" id="id_3" />
<input type="submit" name="name_submit" value="OK" class="class_submit" id="SubmitButton" required/>
</form>

Or you can change the type of your inputs to checkBoxes and it will simply do the magic.
Here is the JSFiddle link.
var prv3;
var markIt3 = function (e) {
if (prv3 === this && this.checked) {
this.checked = false;
prv3 = null;
} else {
prv3 = this;
}
};
$(function () {
$('input.class_x').on('click', markIt3);
});
$('input[type=checkbox]').on('change', function () {
var current = $('input.class_x').filter(':checked');
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled=true;
if (current.length > 1) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
}).change();
input {
display: block;
margin: 0.5em 0;
}
input[type='submit']:disabled {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myform" autocomplete="off" method="post">
<input class="class_x" type="checkbox" name="name_1" value="value_1" id="id_1" />
<input class="class_x" type="checkbox" name="name_2" value="value_2" id="id_2" />
<input class="class_x" type="checkbox" name="name_3" value="value_3" id="id_3" />
<input type="submit" name="name_submit" value="OK" class="class_submit" id="SubmitButton" required />
</form>
Only the type has been changed from radio button to checkbox.

this.checked = false
..does not fire the change event, so the change code doesn't get fired when a radio button is unchecked.
Add the following line of code after that line:
$(this).change();
That will fire the change code.

Try using .prop() function instead
$('input[type=radio]').on('change', function() {
var current = $('input.class_x').filter(':checked');
var $sbmtBtn = $('#SubmitButton');
$sbmtBtn.prop('disabled', true);
if (current.length > 1) {
$sbmtBtn.prop('disabled', false);
} else {
$sbmtBtn.prop('disabled', true);
}
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" class="class_x">
<input type="radio" class="class_x">
<input id="SubmitButton" type="submit">
</form>
.prop() documentation