I have a email address field and 3 radio buttons. You must click one radio button and it will redirect you to another page. I am testing here If I can get the value of radio button (Category.val).
Here is my code:
<aui:script>
AUI().use(
'aui-modal','liferay-portlet-url','aui-io-request','aui-base',
function(A) {
$('a.btn-resetpass').click(function() {
var validator = $(".pwdLength"),
Category = $(".1");
if (validator.val().length != 0) {
alert(Category.val());
if (Category.val() == 1) {
}
else if (Category.val() == 2) {
}
else if (Category.val() == 3) {
}
//$('.resetForm').submit();
}
else {
alert ("Please input a valid email");
}
$('.resetForm').submit();
});
});
</aui:script>
Please help.
Thank you in advance!
The problem here is the selector used for radio buttons. You are trying to get all elements with class 1, but if what you need is the selected radio so you have to use .1:checked.
Without the html it is difficult to form a proper selector, but assuming those are the only radio buttons in the page you can try
Category = $("input:radio:checked");
Update:
As per your update the class used by you is radioB so
Category = $(".radioB:checked");//no need to use `[type=radio]` if the class is only assigned to the radio elements
This is what I used:
Category = $(".radioB[type=radio]:checked");
Thanks for the help of #Arun P Johny. Thank you very much.
Related
I have a form which is split up into sections using pagination on each tag. (See Fiddle)
I however have required fields in each section, I'd like to validate it so that fields with the "required" attribute must not be blank before the user moves on to the next section.
http://jsfiddle.net/Azxjt/
I've tried to following but don't think I'm on the right tracks:
$(this).closest("article > :input").each(function() {
if($(this).val == null) {
con = 0;
}
});
if ( con == 0 ) {
alert("All fields must be filled in");
}
else {
}
Your help is appreciated :)
Text input will return a black value if no response has been entered. Try the following
In jQuery, the value is returned by val()
$(this).val() == ""
You could possibly enhance your jQuery selector to test only those input elements with a corresponding required label.
Use each function.
var isEmpty;
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
isEmpty= true;
}
});
I have a problem in populating or regarding the response of my javascript.
I have two different which is and . The div#individual represents the first form that has a a div#address. And I have my second div which is the div#group. My problem is when i choose the "individual" in the subtype combobox the div#address works perfectly but when it comes to the "group" in the subtype combobox it doesn't respond like the first one. I set the div#address with the same class. Didn't work.
How ca I solved this?
Note: Im just using .hide() and .show() for both div#individual and div#group. Thanks!
the inputs of address for individual and the inputs of address for group should use different id and name.
The below code is useful for u please try it?
<script id="main" type="text/javascript">
$(document).ready(function()
{
var val=$("#selectid option:selected").text();
if(val == "Internet")
{
$("#new1").show();
$("#new2").hide();
}
else if(val == "Media")
{
$("#new1").hide();
$("#new2").show();
}
$('#selectid').change(function()
{
var val=$(this).val();
$("#internet").val('');
$("#media").val('');
if(val == "Internet")
{
$("#new1").show();
$("#new2").hide();
}
if(val == "Media")
{
$("#new1").show();
$("#new2").hide();
}
val = "";
});
});
</script>
I have a site using input:text, select and select multiple elements that generate a text output on button click.
Having searched SO, I found examples of validation code that will alert the user when a select field returns an empty value-
// alert if a select box selection is not made
var selectEls = document.querySelectorAll('select'),
numSelects = selectEls.length;
for(var x=0;x<numSelects;x++) {
if (selectEls[x].value === '') {
alert('One or more required fields does not have a choice selected... please check your form');
return false;
$(this).addClass("highlight");
}
At the end, I tried to add a condition after the alert is dismissed, such that the offending select box will be highlighted by adding the 'highlight' class - but this doesn't do anything. My .highlight css is {border: 1px red solid;}
Any help here?
UPDATED WITH ANSWER - Thanks #Adam Rackis
This code works perfectly. I added a line to remove any added '.highlight' class for selects that did not cause an error after fixing
// alert if a select box selection is not made
var selectEls = document.querySelectorAll('select'),
numSelects = selectEls.length;
$('select').removeClass("highlight");//added this to clear formatting when fixed after alert
var anyInvalid = false;
for(var x=0;x<numSelects;x++) {
if (selectEls[x].value === '') {
$(selectEls[x]).addClass("highlight");
anyInvalid = true;
}}
if (anyInvalid) {
alert('One or more required fields does not have a choice selected... please check your form');
return false;
}
You were close. In your loop, this does not refer to each select that you're checking.
Also, you're returning false prior to the highlight class being added. You'll probably want to keep track of whether any select's are invalid, and return false at the very end after you're done with all validation.
Finally, consider moving your alert to the very bottom, so your user won't see multiple alerts.
var anyInvalid = false;
for(var x=0;x<numSelects;x++) {
if (selectEls[x].value === '') {
$(selectEls[x]).addClass("highlight");
anyInvalid = true;
}
}
if (anyInvalid) {
alert('One or more required fields does not have a choice selected... please check your form');
return false;
}
Also, since you're already using jQuery, why not take advantage of its features a bit more:
$('select').each(function(i, sel){
if (sel.value === '') {
$(el).addClass("highlight");
anyInvalid = true;
}
});
if (anyInvalid) {
alert('One or more required fields does not have a choice selected... please check your form');
return false;
}
I have a form having multiple radio buttons in different groups. e.g
category vehicle has two radio buttons
2 wheeler
4 wheeler
same as other categories have 2-2 radio buttons.
What i want to do is when i check 4 wheeler from 2 wheeler i show a warning message pop up, are u sure to switch, if yes then ok, but for no i want to check again 2 wheeler radio button. I can not do this from id as well coz i have to do this on other fields as well.
<input type="radio"/>
Your questions is not very clear but from what I understand I guess you want:
$(document).ready(function(){
$('#submit_button').click(function() {
if (!$("input[#name='radioName']:checked").val()) {
alert('Nothing is checked!');
return false;
}
else {
alert('One of the radio buttons is checked!');
}
});
});
And add the same name tag for all your radio inputs:
<input type="radio" name="radioName"/>
This might be what you're trying to achieve:
var old_input = $('input[name="wheeler"]:checked');
$('input[name="wheeler"]').change(function(e) {
console.log(e);
if (
old_input.next().text() == '2 Wheeler' &&
$(this).next().text() == '4 Wheeler'
) {
if (confirm('Are you sure you want to change?')) {
old_input = $(this);
}
else {
this.checked = 0;
old_input.get()[0].checked = 1;
}
}
else {
old_input = $(this);
}
});
http://jsfiddle.net/pQpk7/
I think you are looking for this http://jsfiddle.net/7rF3d/ When a radio button is checked for the first time nothing happens. When someone checked another he is first prompted for a confirmation. If the user cancels the old checked radio will be restored.
var lastChecked;
$("input[type=radio]").click(function() {
if(typeof(lastChecked) != "undefined" && !confirm("are you sure?")) {
$("input[type=radio]:checked").attr("checked", "false");
$(lastChecked).prop("checked", true);
} else {
lastChecked = $('input[type=radio]:checked');
}
});
Since jQuery isn't tagged in the question, here's a pure JS approach. Guys, seriously, try to quit suggesting jQuery solutions when it isn't even tagged in the question.
You can achieve this by using the click event and returning false if there is at least one radio button checked, then the answer to a window.confirm is false, which will prevent it to select the new one as expected.
var oneChecked=false;
var elem=document.getElementsByName("wheeler");
for (var i=0;i<elem.length;i++) {
elem[i].onclick=function(e) {
if (oneChecked && !window.confirm("Are you sure to switch?")) {
return false;
} else {
oneChecked=true;
}
}
}
FIDDLE
How do I disable and make the input field text to hidden when certain value is selected from select list? In my code, I need to disable and make the input text to hidden when "United States" is selected from my drop down.
My HTML:
JSFiddle Link
My Javascript:
document.getElementById('BillingCountryCode').onchange = function () {
if(this.value != '840') {
document.getElementById("BillingStateProvince").disabled = true;
document.getElementById("BillingStateProvince").style.display="none"
} else {
document.getElementById("BillingStateProvince").disabled = false;
document.getElementById("BillingStateProvince").style.display="block"
}
}
The problem with your fiddle is you have two elements with the same ID. You can do exactly what is already there, just change the ID on either the state dropdown or the text input. Updated code might look like this, if you simply name the text input the same with a 2:
document.getElementById('BillingCountryCode').onchange = function () {
if(this.value != '840') {
document.getElementById("BillingStateProvince").disabled = true;
document.getElementById("BillingStateProvince").style.display="none";
document.getElementById("BillingStateProvince2").disabled = false;
document.getElementById("BillingStateProvince2").style.display="block";
}
else {
document.getElementById("BillingStateProvince").disabled = false;
document.getElementById("BillingStateProvince").style.display="block";
document.getElementById("BillingStateProvince2").disabled = true;
document.getElementById("BillingStateProvince2").style.display="none";
}
}
If i got the question , simply invert the if condition like this :
if(this.value === "840") { ... }
here is the working fiddle : http://jsfiddle.net/antwonlee/cf4Sz/7/