JQuery :: Show Hide Multiple Other HTML Input Fields
Mar 1, 2010
I am having some jQuery troubles whereby I have some jQuery that toggles an 'Other' HTML input field and associated label when a user selects the value Other from a HTML select drop down. I have this working for one field but the application I am building has increased in scope whereby there may be multiple instances of members on one page so the Other option will be there multiple times. At the moment if a user selects Other from one drop down all Other input fields show. How do I make this exclusive without repeating the jQuery for the separate instances?
// Show/Hide 'Other'
$(document).ready(function() {
$('.jOther').hide();
$('.jTitle').change(function() {
var $index = $('.jTitle').index(this);
alert($index);
if($('.jTitle').val() != 'Other') {
$('.jOther').hide();
} else {
$('.jOther').show();
window.location.hash = 'Other' + $index;
}});
});
<td>
<select id="title" class="inlineSpace jTitle">
<option value="Please select">Please select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Other">Other</option>
</select>
<label for="other" class="inlineSpace jOther">Other</label>
<input type="text" class="text jOther" name="other" id="other" maxlength="6" />
</td>
View 1 Replies
ADVERTISEMENT
Jul 29, 2009
For example I have this sort code:
for ($i=0;$i<$db;$i++) {
$t1="toggleh$i";
echo "<div class='c'>Test<input name='$t1' type='image' id='$t1' src='test.png'/></div> <br>";
}
I try to make clear the screen for users, so I use hide & show to hide some row on screen what users actually don't need...
The JS part of code is something like this:
$('#toggleh0').click( function() {
$('div.showhide').toggle(400);
});
$('#toggleh1').click( function() {
$('div.showhide').toggle(400);
});
$('#toggleh3').click( function() {
$('div.showhide').toggle(400);
});
.
.
.
I dont know how can do this dynamic. So if "$i=6;" then I need toggle 0-6 function...
View 12 Replies
View Related
Jun 26, 2009
I am using the following script on one of my pages (script comes from [url]:
Code:
The script works great, BUT I need to use it in 2 different areas of the same form. It only works on an id="selectMenu" and of course I cannot have more that 1 id.
How can I get this script to work in multiple select fields? (at least more than 1)
View 4 Replies
View Related
Sep 27, 2010
I am using jquery with the cookie plugin and I have multiple image buttons that can hide/show multiple elements. My question is how can I add a cookie to this code to remember whether each separate element is opened or closed?
The code,
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='<div class="expanddown"></div>';
var hideText='<div class="expandup"></div>';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append('<a href="#" class="togglelink">'+hideText+'</a>');
// capture clicks on the toggle links
$('a.togglelink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? hideText : showText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').slideToggle('fast');
// return false so any link destination is not followed
return false;
});
});
HTML,
<a class="togglelink" href="#"></a>
<div class="toggle">
Content
</div>
View 6 Replies
View Related
May 4, 2011
I'm trying to use jquery to hide some contents in a for statement but is not working. Here is the code
if( $total_attachments > 0 ) {
for ($i=0; $i < $total_attachments; $i++) {
//output div and image in it
echo '<div class="pictures_entry">';
echo '<a href="'.$attachments[$i]["location"].'" title="'.$attachments[$i]["title"].'" rel="prettyPhoto[gallery]"><img src="'.$attachments[$i]["location"].'" width="128" height="120" alt="'.get_the_title().'" /></a>';
echo '<div id="pictures_entry_name_'.$i.'">';
echo '<h6>'.$attachments[$i]["title"].'</h6></div>';
echo '</div>';
}}?>
I want to hide the pictures_entry_name_'.$i. and when a user clicks on a picture <a href="'.$attachments[$i]["location"].'" title="'.$attachments[$i]["title"].'" rel="prettyPhoto[gallery]"><img src="'.$attachments[$i]["location"].'" width="128" height="120" alt="'.get_the_title().'" /></a>,
I want to slide down the pictures_entry_name_'.$i of this picture.
View 5 Replies
View Related
Mar 17, 2011
I am trying to design a web page with multiple input fields to use the keypad, but I also want the prompt to change with each field
View 1 Replies
View Related
Mar 23, 2011
I have a drop down selection where it shows and hides form inputs depending on selection. When the page loads it shows the drop down selections with no form inputs. After user selects drop down it shows the form fields. It works great but I want it to show the same form fields after the user hits the submit button which submits the page to itself. It currenlty goes back to the default selection list and doesnt show any of the form fields. Basically it hides all the form fields after the user hits submit button. How do I make it keep the last shown form fields after the user hits the submit button?
test3.html looks like this:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide</title>
<script type="text/javascript">
[Code]...
View 17 Replies
View Related
Mar 1, 2011
I have a set of input fields that can be dynamically duplicated/cloned or removed and submitted. I'm looking for a ways to configure the form for easy processing without having to loop through each input field inside the divs:
<form action="dummy.php" method="post">
<div id="customer1">
Name: <input type="text" name="name1">
[code]....
View 2 Replies
View Related
Nov 9, 2010
adding my show and hide behavior across various classes, so the message shown will be unique to the class.
My J-Query looks like this;
<script type="text/javascript">
$(document).ready(function() {
$('#One').hide(); /
$('.col2').hover(
[Code]....
I have include a demo that should make it clearer, as to what I want to achieve. Ideally, each box will show a unique overlayed message as the user's mouse enters the box and hide once the mouse leaves.
View 2 Replies
View Related
Dec 15, 2011
I have a UL group with multiple LI items, and each LI has a DL with a DT and DD inside. What I am trying to do is show EACH LI's DT, but not the DD. The DD will only show once the DT has been clicked (except for the first, which should be visible on page load.here is the structure code ... I am struggling to make this work using jQuery show/hide functionailty.
<!-- LIST -->
<ul class="examples">
<!-- ITEM #1 -->
[code]....
View 1 Replies
View Related
Mar 25, 2011
I have a jquery function that will show or hide a div id="hide1" based on the result of a select id="ticket1"
$(document).ready(function(){
$('#hide1').hide();
$('#ticket1').change(function(){
if(this.value == 'adult'){$('#hide1').hide();}
[Code]....
It works well! But my script actually clones elements of the form so a user could be selecting adult or child for a number of tickets - ticket1,ticket2,ticket3....
How can I adapt that script so that it will show/hide for each ticket
View 4 Replies
View Related
Jul 11, 2011
I have a little issue with trying to hide / show multiple divs on my page. I am using a class name for the divs but the name is generated by a field have set in my database. So for example
<div class="General">Ttitle 1</div>
<div class="General">Ttitle 2</div>
<div class="General">Ttitle 3</div>
<!-- and my link is -->
<a href="#" class="toggle" title="General">Toggle 1</a>
And then say I have
<div class="Questions">Ttitle 1</div>
<div class="
Questions ">Ttitle 2</div>
<div class="
Questions ">Ttitle 3</div>
<!-- and my link is --><a href="#" class="toggle" title="
Questions ">Toggle 2</a>
What would be the easiest way or the best way to code out the jquery to hide / show all the divs with the same name as the links title i can do code jquery to toggle 1 div but not sure how to code it so that it will hide / show all the divs with the same class name.
View 5 Replies
View Related
Mar 28, 2010
Is there a way I can simplify my code below? I want to be able to have just one iteration of the code and have it automatically switch out the IDs without have to add a new bit of JavaScript with each new div that is added. Here's my Javascript:
$(document).ready(function() {
// toggles the personnel window on clicking the image/header
$('div.title'+'#one').click(function() {
[code]....
View 2 Replies
View Related
Dec 5, 2009
I am new to jquery and need some help with this I have the following simplified html
[Code]...
View 2 Replies
View Related
Mar 22, 2011
I am getting to know jquery a little, and I am trying hide and show a div when a link is clicked.I have a page setup that has a flash video in a div on the main page. Then when a link is clicked, a lightbox window opens and plays another video. I am trying to get the video on the main page to hide while the lightbox video is playing. Then when a user closes the lightbox window, the div with the main video on the page is shown and starts playing again.So far I can get this to work with one link. But I cannot get the main video div to hide when a second link is clicked.
View 1 Replies
View Related
Jul 3, 2010
I have a jquery script for showing and hiding the content inside, between two divs,controlled with radiobuttons. I like to use the same jquery script for another group of divs and radiobuttons so I'm trying to create a loop are so inside jQuery.
<!----------------- my script ---------------------->
showhide.js
jQuery(function() {
[code]....
View 9 Replies
View Related
May 3, 2011
I've got an issue with the attached file.
I have 3 buttons & 3 divs.
I would like to hide/show the relevant divs (into a container) based upon the button pressed. If no div was open, then it would simply open the relevant div, however if say div 2 was open and div 3 was pressed, div 2 would toggle closed then div 3 would toggle open.
I've got each individual div opening and closing, but I'm stuck at the next point (checking if a div is open/toggling etc).
View 5 Replies
View Related
Feb 21, 2011
[code]My problem is simply that i have say 5 columns in the database placing the jquery script in that section allows that to be on each and every post. That works fine. the problem is though only the first one works the rest do not. It simply just doesn't have any action while the first one works fine.
View 1 Replies
View Related
Feb 15, 2011
I have a form with a shipping address area and a billing address area. Right now I have a checkbox that fills in the billing address information if its the same as shipping information. Instead of having that so the form isnt so long when people first look at it I would like for the billing address fields to be hidden when you first come onto the page, and only if the address's are different the person will click the check box and the billing address section will appear. I know this has to be done in javascript but I have never done it
View 14 Replies
View Related
Mar 4, 2010
I'm trying to get the two followup questions underneath the checkbox to show up only if someone places a check there, but for some reason the way I've got it set up now it's simply hiding the area I want to show up altogether, and the checkbox has no effect on it.
Rather than waste tons of space pasting it here, here's the pastebin: [url]
Alternatively here is the live version:[url]
I'd prefer to have the form collapse when the additional questions are hidden, though if i can get this working at all.
View 2 Replies
View Related
Oct 18, 2009
For some security reasons I would like to show an email field in a form ONLY if the 4 checkbox are checked.I don't want to use server side coding so I need to use javascript.I have this code, showing an alert if the 4 checkboxes are checked:
<html>
<head><script>
var conta=0;
function ctr(quale)
[code]...
It works but I nedd to ask for an email instead of showing an alert.
View 3 Replies
View Related
May 29, 2005
How to show and hide form fields depending on a selected radio button.
View 14 Replies
View Related
Jan 28, 2011
I made this function to duplicate form elements with a little html-code surrounding the input fields. First i clone the html of the first child found (always gets rendered by php). Then, everytime the add-button is pushed, i append a cloned piece of that stored html. It's working fine except for the delete button.
It's seems that whenever a cloned html is removed, the other cloned elements aren't recognized anymore by the delete buttons (although the delete buttons are in them)
View 1 Replies
View Related
Jul 28, 2011
Here my script :
<script>
$(document).ready(function(){
$('#test1_invalidation_comment__row').hide();
if($('#test1_invalidation_comment').val())
[Code].....
My script work each two submit can't figure why.
View 1 Replies
View Related
Sep 20, 2011
I've tried many many thing to make this autocomplete work with multiple input fields.. please , can any one tell me how to do it? the full script attached , also the html source code is here.This is the html code with javascript that I need to add another input fields on [code]
View 4 Replies
View Related
Jun 22, 2010
Let me start by saying I'm a noob to JavaScript. What I'm trying to do for my website is have a select menu that shows the number of div's that's selected. I found a JS that I could do that with, but it only toggles, not change specifically what's selected. So if you click the wrong one, it doesn't work right.
[Code]...
View 2 Replies
View Related