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>
Related
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.
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 am using this simple code to filter through a search form with many text inputs and see if they have a value and then add a class.
Works perfectly in Chrome, safari and Firefox but not in IE9.
$('input[type="text"]').filter(function() {
if ($(this).val() !== '') {
$(this).addClass('used');
}
});
Please advice, thanks in advance!
EDIT
Change to each but doesn't solve the issue... Here it is with the event that triggers the function...
$(document).on('event-ajax-form-is-loaded', function() {
$('input[type="text"]').each(function() {
if ($(this).val() !== '') {
$(this).addClass('used');
}
});
});
From the limited information you shared, this is how you should be doing this:
$('input[type="text"]').filter(function() {
return $(this).val() !== '';
}).addClass('used');
.filter() is supposed to reduce a set of matched elements so its filter function should always return a bool instead of manipulating the DOM.
Edit: Based on your updated code snippet and the page link you shared in the comments, if you are using jQuery in WordPress, then its always safer to wrap the code like so:
(function($) {
/* jQuery Code using $ object */
})(jQuery);
enter code hereIn JS you can check the element value by getting their tag name
for (var i = 0; i < document.getElementsByTagName('input').length; i++){
if (document.getElementsByTagName('input')[i].value == "")
{
alert("The value of textbox at " + i + " is empty");
}
}
Working Demo
Or like what other people suggest, use a .each in JQuery
$('input[type="text"]').each(function(i){
if ($(this).val() == "") {
alert("The value of textbox at " + i + " is empty");
}
});
anohter Working Demo
If you insist to use filter and here you go
$('input[type="text"]').filter(function()
{ return $( this ).val() != ""; }).addClass("used");
Last Working Demo
and jquery filter reference
i have 2 select elements
producttype and voip_type
<script type="text/javascript">
$(document).ready(function(){
$("#producttype").hide();
});
$('#voip_type').on('change',function(){
if( $(this).val()==="no"){
$("#producttype").show()
}
if( $(this).val()==="storage"){
}
else
{
$("#producttype").hide()
}
});
</script>
I want to show producttype if voip_type === 'no' (This works)
I want to select a certain option on producttype if voip_type === 'storage'
Else just to show producttype and select a certain option
im not sure what to put in the javascript for if( $(this).val()==="storage"){
here is a fiddle with the HTML too: http://jsfiddle.net/nBDfX/
Something like this ?
$(document).ready(function(){
$("#producttype").hide();
});
$('#voip_type').on('change',function(){
var val = $(this).val();
if( val ==="no"){
$("#producttype").show()
}
else if( val ==="extension")
{
$("#producttype").val("Offsite Backup").show()
}
else {
$("#producttype").val("PC Maintenance").show()
}
});
JsFiddle - Click here
Im not sure about youre asking, but if you want to select any option on $('#producttype') just do this:
$('#producttype').val('Broadband');
I have a selected box with 5 values. I'm trying to fadeIn inputs of what is selected in the box. For example: If input1 is selected, fade in input1 on click.
Here is what I'm trying to do:
$(document).ready(function(){
$('.btn').click(function() {
if($("#selectbox").value == 'Input1') {
$(".input1").show();
} else if($("#selectbox").value == 'Input2') {
$(".input2").show();
} else if($("#selectbox").value == 'Input3') {
$(".input3").show();
} else if($("#selectbox").value == 'Input4') {
$(".input4").show();
} else if($("#selectbox").value == 'Input5') {
$(".input5").show();
}
}
});
And here is a NOT working fiddle:
http://jsfiddle.net/rzMHJ/
Your code have two errors and that's why its not working.
$("#selectbox").value should be $("#selectbox").val()
you have not closed your click event with );
Also its much better to use switch case in this example.
Working Demo: http://jsfiddle.net/naveen/Zn2yy/
Update (based on Nick Cravers comment)
For this particular scenario you could simplify code a lot like this.
Demo: http://jsfiddle.net/nick_craver/BWacA/
There are two problems with your code that is causing it to fail.
First, replace .value with the jQuery function val().
Second, add ); to the second to last } at the end.
Here is working refactored code:
$(document).ready(function() {
$('.btn').click(function() {
var show = "." + $("#selectbox").val().toLowerCase();
$(show).fadeIn();
});
});