 JavaScript / jQuery - Recognize Type of Form Input (i.e. radio button, text input, dropdown)
By : user2708414
Date : March 29 2020, 07:55 AM
I hope this helps . I wrote you a very basic validation function since you only have one question visible at a time. You may want to look into validation libraries as well but this should get you going on the right track: code :
function isValid() {
var $form = $('form:visible'),
$input = $form.find('input'),
$select = $form.find('select');
var type = $input.length ? 'input' : ($select.length ? 'select' : 'error');
if (type == 'error') {
alert('invalid input type found');
return false;
}
if ($form.find('input[type="radio"]').length) {
return $form.find('input[type="radio"]:checked').length;
}
var inputVal = $form.find(type).val();
return inputVal !== null && inputVal.length;
}
$("button").click(function () {
console.log('form is valid: ' + isValid());
if (!isValid()) {
alert("Please enter a response.");
} else {
...
|
how to enable/disable a submit button, only if two conditions are provided: checking input radio and filling input text
By : m. ria
Date : March 29 2020, 07:55 AM
wish helps you Try this: Updated fiddlecondition : select with 2 radio button & one text input. code :
//SUBMIT BUTTON VARIABLE DECLARED
var sbmtBtn = document.getElementById("SubmitButton");
sbmtBtn.disabled = true;
//INPUTS RADIO; CHECK OR UNCHECK
var prv;
var markIt = function(e) {
if (prv === this && this.checked) {
this.checked = false;
prv = null;
} else {
prv = this;
}
checkIfValid();
};
$(function() {
$('input.class_x').on('click', markIt);
$('input[type=text]').on('keyup', markIt);
});
//ENABLE OR DISABLE SUBMIT BUTTON CODE ACCORDING TO INPUT RADIO
function checkIfValid() {
var current = $('input.class_x').filter(':checked');
if ((current.length > 1) && ($('input[type=text]').val() != "")) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
};
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" method="post">
<input class="class_x" type="radio" name="name_1" value="value_1" id="id_1"/><br/>
<input class="class_x" type="radio" name="name_2" value="value_2" id="id_2"/><br/>
<input class="class_x" type="radio" name="name_3" value="value_3" id="id_3"/><br/>
<input id="input_id" type="text" name="input_name" value="" required/><br/>
<input type="submit" name="submit_name" value="OK" class="submit_class" id="SubmitButton"/>
</form>
|
HTML5 - JavaScript - Load Text Files to Radio Button and then Read Text File for Radio Button Selected
By : K.Jezova
Date : March 29 2020, 07:55 AM
will help you I made some changes just for clarity. I got rid of inline javascript and instead used event listeners. Changed the value of each radio button to its index so we could use it when we're looking through the file list to find out which one is selected. Removed the ID from the radio buttons because you shouldn't use the same ID on multiple elements. Added a label to each input that shows the file name. Put a name attribute on the radio buttons so only one is selected at a time. Your main issue was that in your Go function you were using the radio inputs as the fileInput variable and you were setting a change event on those radio inputs which didn't make sense since you were calling the Go function on button click. code :
document.getElementById("file").addEventListener("change", function(e) {
// this refers to the input. could also use e.target;
var input = this;
var output = document.getElementById("fileList");
// just using the index for the value of each radio button
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML +=
'<label><input type="radio" value="' + i + '" class="place" name="files">' + input.files.item(i).name +
"</label><br/>";
}
});
document.getElementById("button").addEventListener("click", function(e) {
var textType = /text.*/;
var fileInput = document.getElementById("file");
var fileDisplayArea = document.getElementById("fileDisplayArea");
// here we're finding the checked radio button and getting its value
// to use below as the index in our file list
var selectedRadioIndex = parseInt(
document.querySelector('input[name="files"]:checked').value
);
if (fileInput.files[selectedRadioIndex].type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
fileDisplayArea.innerText = reader.result;
};
reader.readAsText(fileInput.files[selectedRadioIndex]);
} else {
fileDisplayArea.innerText =
fileInput.files[selectedRadioIndex].name + " is not supported!";
}
});
<input type="file" name="file" id="file" multiple/>
<br/>Selected files:
<div id="fileDisplayArea"></div><div id="fileList"></div>
<button id="button">GO</button>
|
 Jquery Css unable to highlight input type button label text onclick radio button
By : Shivani
Date : March 29 2020, 07:55 AM
hop of those help? You are applying the click to only the label and the input checkbox is outside it and won't trigger the click, so simply put it inside the label like this : code :
$('label').click(function() {
$('label').removeClass('orangeBackground');
$(this).addClass('orangeBackground');
});
.orangeBackground {
color: #CE5A0B;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade listing-id" id="closeListingModal" role="dialog">
<div class="modal-dialog closelistingmodal-dialog">
<!-- Modal content-->
<div class="modal-content closelistingmodal-content">
<form class="closelisting-form form-horizontal" onsubmit="return false" role="form" data-listing-id="" action="">
<input type="hidden" name="listing_id">
<input type="hidden" name="listing_weight">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="closelistingmodal-body modal-top-padding">
<div class="col-sm-12 ">
<div class="col-md-12 col-xs-12 cell-no-padding">
<label for="rad1"> <input type="radio" name="reason-closing" value="1" id="rad1"> Rate Mismatch</label>
</div>
<div class="col-md-12 col-xs-12 cell-no-padding">
<label for="rad2"> <input type="radio" name="reason-closing" value="2" id="rad2"> Program Cancelled / Differed</label>
</div>
<div class="col-md-12 col-xs-12 cell-no-padding">
<label for="rad3"> <input type="radio" name="reason-closing" value="3" id="rad3">Vehicle Unavailable</label>
</div>
<div class="col-md-12 col-xs-12 cell-no-padding">
<label for="rad4"><input type="radio" name="reason-closing" value="4" id="rad4"> Listing Fulfilled By Party</label>
</div>
<div class="col-md-12 col-xs-12 cell-no-padding">
<label for="rad5"> <input type="radio" name="reason-closing" value="5" id="rad5">Payment Terms Mismatch</label>
</div>
<div class="col-md-12 col-xs-12 cell-no-padding">
<label for="rad6"><input type="radio" name="reason-closing" value="6" id="rad6"> Wrong Post</label>
</div>
</div>
<div class="form-group col-sm-12">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 ">
<label>Rate PMT:</label>
<input class=" form-control row-margin input-pmtftl-amount" type="text" id="closelistinginput-value" name="listing_pmt" value="" placeholder="Rate In PMT (₹)" / min="0">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-of-trucks">
<label>Weight (MT):</label>
<input class="no-of-trucks form-control " type="text" name="listing_weight_mt" value="" id="noOfTrucks" min="1" />
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 ">
<label>Rate FTL:</label>
<input class=" form-control input-pmtftl-amount" type="text" id="closelistingftl-input" name="listing_ftl" value="" placeholder="Rate In FTL (₹)" / min="0">
</div>
</div>
<div class="form-group col-sm-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-lg hidden-md hidden-sm">
<textarea type="text" class=" form-control row-margin" name="listing_notes" placeholder="Notes" /></textarea>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-xs">
<textarea type="text" class=" form-control row-margin" name="listing_notes" placeholder="Notes" /></textarea>
</div>
</div>
</div>
<div class="modal-footer ">
<button class="v2-button closing-submit-btn" name="closelisting-submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
|
 Disable submit button if both radio button and text input are blank
By : Will Strye
Date : March 29 2020, 07:55 AM
it helps some times Given a react form with multiple radio buttons and a text input that is visible only when the other option radio button is selected, I currently have the submit button disabled until a radio button is selected. However, if the other option is selected, the submit button will still work even if there is no text in the input field associated with it. How can I check the length of the input box if and only if the other option is selected? code :
disabled={
!this.state.reason.client_reason
||
(this.state.reason.client_reason === 'other' && !this.state.otherReasonText)
}
|
code :
Related Posts :