Develop Reference

jQuery check if Checkboxes are on page

I have a form that loads via ajax. Depending on the parameters sent to fetch the form, the form may have no checkboxes or it may have one or more check boxes.
I want to check if a checkbox is present on the page and if yes prompt the user to select one during validation if not selected.
If present, the checkboxes have the same class and a different ID.
<input type="checkbox" name="associatedClass"
value="$associatedClsNumVal" class="getAssociatedClass"
id="$associatedClsNumVal" />
What is the best approach? Can jquery "sense" if there are checkboxes on a page/in a form?
Thanks.
Thanks for the help on my previous post. I am adding to this one as it's the same type problem.
I now have a page where there are one or more groups of checkboxes and I need to ensure that only one checkbox is checked in each group.
Since I do not know how many groups there are until the page loads, what is the best approach to check this?
Thanks!

The easiest way is to check if there are any inputs of the type checkbox on the page. With jQuery you can use CSS selectors such as input[type="checkbox"] to find elements in the DOM. Combine that with .length and you can get how many there are on the page. The complete jQuery code for this would be
if ( $('input[type="checkbox"]').length ) {
// Validate checkboxes
}
If there could be other checkboxes on the page that you wouldn't want validated then you can limit your search to a particular element. For example, if you only wanted to validate checkboxes within a specific form with an ID of myForm then you can select the form and use .find() to search for checkboxes within and only within that form.
if ( $('#myForm').find('input[type="checkbox"]').length )
{
// Validate checkboxes
}
However with the validation you probably want to check each input individually and so instead of just checking the length to make sure there is at least one checkbox on the page we can use .each to find all checkboxes and then process them one at a time.
$('input[type="checkbox"]').each(function () {
// Validate this checkbox
});
The advantage of that is if there are none on the page it won't try and validate anything and it's perfectly valid, so we don't need to check to see if there are any before our validation.

$(':checkbox').length
will get you a count of all checkboxes on the page. You can narrow this down by giving them a common class if you need to be more specific.
For example, to just count the checkboxes with class 'section1':
var $checks = $('.section1:checkbox');
console.log('There are ' + $checks.length + ' checkboxes');
https://jsbin.com/bowasi/edit?html,js,console,output

if ( $( "#myElement" ).length ) {
// Your code here
}

Add collection field to a form, that can render multiple 'prototypes'

I have my code setup like in this example: http://symfony.com/doc/current/cookbook/form/form_collections.html
The only thing that differs, is that I add tag fields through the change event of a select box (which holds a few tag types) instead of clicking the 'add tag' link.
What I like to add, is the option to add different form fields, according to the tag-type that is selected. (that is why I'm working with the change event instead of the add-tag link)
For example:
If I select tag-type 'simple', one form field should be rendered, being 'fieldName'
If I select tag-type 'advanced', two form fields should be rendered, being 'fieldName1' and 'fieldName2'
How can I do this? Should I define multiple prototypes? Or is there a more clever way?

I solved it like this:
When I change the value of the select box, an ajax call is made of type "post".
That call executes an action in my controller. The action will build that same form again.
A PRE_SET_DATA event listener will take care of adding a form-field to the main form through a form-modifier function (based on the chosen value in the select box).
Last but not least: the POST_SUBMIT event listener that calls that same form-modifier function to avoid the "form can not contain any extra fields" error.

Append 1 Form to Another Form - Then Submit

I have 2 forms, 1 in my content and one in the sidebar of my website. I submit them via $_GET, but I want to submit the form when any of the selects are changed. Since they're in 2 different locations and wrapped in 2 separate form tags I need to append #form1 to #form2 then submit #form2. I've looked through the SO questions and everything deals with :input and clone() but according to the documentation clone() does not work with select boxes. It reads: .clone() Documentation
Note: For performance reasons, the dynamic state of certain form elements (e.g., user data typed into textarea and user selections made
to a select) is not copied to the cloned elements. When cloning input
elements, the dynamic state of the element (e.g., user data typed into
text inputs and user selections made to a checkbox) is retained in the
cloned elements.
So how do I append a form of select to a separate form?
Here's what I've tried so far:
jQuery('#form1 select, #form2 select').change(function(){
// Tried this
jQuery('#form1 select[name="select_name"]').append('#form2');
// Tried this before the research
jQuery('#form1 select').clone().hide().append('#form2');
// Form submission works without the above code
jQuery('#form2').submit();
});
Neither of the above worked, nor do I get any errors in my console. Worst comes to worst I can loop through and append the values as hidden inputs but I was hoping to avoid that.

In your first attempt
jQuery('#form1 select[name="select_name"]').append('#form2');
will attempt to append #form2 to #form1 select[name="select_name"]
Thinking about it... how can you append a form to a select element?
If your intention is to append the select options from form1 to form2 then you just have to switch around those statements.
jQuery('#form2').append('#form1 select[name="select_name"]'); This will append the select options from form1 to form2

You can serialize the forms, append the result and issue a POST:
$.post( url, $("#form1").serialize() + "&" + $("#form2").serialize() );

how to duplicate the value of one form field in another in jquery

I have a form where a user can chose the applications he has access to? and when he the applications he wants access to, he is presented with more options. One of them is notification email address. if the user choses two applications, he gets two notification email address fields to fill. But both of them are stored in the same column in the database.
There are multiple fields like user authorisation level, user branch etc which are uniform accross all applications.
i am trying to replicate the value of one field in the other with jquery. i tried the below which obviously fails. Can anyone suggest how to acheive the replication?
$("#email").val().change(function() {
$("#email1").val($("#email").val());
});
Edit: I have drop down fields as well as text boxes.

.val() returns a string which cannot have a change event. You need to use
$("#email").change(function() {
$("#email1").val($(this).val());
});
You will want to bind the change event using on or live depending on your version of jquery, if you haven't wrapped this piece of code in a ready block.:
$("#email").on("change",function() {
$("#email1").val($(this).val());
});
This fiddle shows setting a <select> tags value using .val() http://jsfiddle.net/8UG9x/

It is an often asked question:
Copy another textbox value in real time Jquery
depending on when you need this action to execute, but if live
$(document).ready(function() {
$('#proname').live('keyup',function() {
var pronameval = $(this).val();
$('#provarname').val(pronameval.replace(/ /g, '-').toLowerCase());
});
});
http://jsfiddle.net/KBanC/
another one, basically same:
JQUERY copy contents of a textbox to a field while typing

How to create login field properties depending on which radio button is checked

I have a login page with 2 radio buttons "new account" and "existing user". when "new account" is selected the "User" field auto populates with the text "New Account" and the "Password" field remains blank. I need to grey out the fields so that they are uneditable when the "new account" radio button is selected, but still pass along the information in the fields because it is used to gain access to the database. I can disable the fields to get the desired uneditable greyed out fields, but the information does not get passed along to the database.
I have tried to fix this by creating two hidden fields (which auto populate with the needed information for database access) to take the place of the "user" and "password" field which allows me to disable the visible fields while "new account" radio button is clicked and which still passes along the new user login info that never changes. This works fine until I try to login as an existing user, in which case my two hidden fields do not auto populate with the users input for their existing account information.
There may be a much simpler approach to fixing this problem, but all of my research and trials have not been successful yet. I have been reluctant to ask this question as it seems so simple and frequently used approach for a login page, but all of my searching has not yielded any thing that has worked yet. I appreciate any input or navigation in the right direction.

I'm pretty sure the correct and painless solution for your problem is to use two different form tags (take care to not nest them) and show/hide the form depending on the selected radio button.
And for the convenience of your user you should copy the username from one form to the other if he has already filled the user field and switches to the other version later.
EDIT
The complete solution:
HTML
<label><input class="formSwitcher" type="radio" name="formSwitch" data-form="#divForm1"> Form 1</label>
<label><input class="formSwitcher" type="radio" name="formSwitch" data-form="#divForm2"> Form 2</label>
<hr>
<div class="hiddenForm" id="divForm1">Put form 1 in here</div>
<div class="hiddenForm" id="divForm2">Put form 2 in here</div>
​​​​​​​​​​​​​​JS
// if someone clicks on one radio button
$('.formSwitcher')​​​​.change(function(){
// get the form id we want to show (from the "data-form" attribute)
var formIdToChange = $(this).data('form');
// hide all forms first
$('.hiddenForm').hide();
// show the specific form
$(formIdToChange).show();
});
​// initially hide all forms
$('.hiddenForm').hide();
// initially call the change method if one radio is already selected on page load
$('.formSwitcher:checked').change();​

Are you saying that you need to change the existing user fields because they will grant access to the database? I think what you want to do is to change the properties of fields depending on what is selected. For example if you need the auto populate fields to be set when the user clicks new user then write something like
document.form.AutoPopUser.value="required value"
and when the person clicks on the existing user you can do
document.form.AutoPopUser.value=""
or if even having that part exist will mess up the existing user log in then you could delete that entire section by putting it inside a div and creating or destroying it depending on the selected option. I feel like I'm not being very clear but I think what you need is a clever set of onClick functions to get rid of things you dont need and add in the ones you do need. If you could post some code to go with this that would be awesome.