Using Jquery to hide form elements based on selected dropdown option - javascript

I have a form that has a dropdown menu, a few text fields and a text area. I would like the form to hide the text area if one of the options from the dropdown menu is selected.
Here is my code:
<form id="contact" name="contact" action="" method="post">
<select name='select-question'>
<option value="member-request">Become a member</option>
<option value="question">Send us your questions / comments</option>
</select>
Name:
<input type="text" name="last-name"></input>
Comments/questions:</br>
<textarea id="comments" name="questions-field" rows="5" cols="27"></textarea>
<br />
<input type="submit" name="submit" value="Submit"></input>
$(document).ready(function () {
$('#contact select[name="select-question"]').change(function () {
if ($('#contact select[name="select-question"]').val() == 'question') {
$('#comments').show();
} else {
$('#comments').hide();
}
});
});
I have also posted to JS fiddle: http://jsfiddle.net/7wzUG/5/
I'm very new to JQuery, and I am not sure why this does not work.
Thanks for any help.

Include jQuery AND add "option:selected" to your selector:
$(document).ready(function () {
$('#contact select[name="select-question"]').change(function () {
if ($('#contact select[name="select-question"] option:selected').val() == 'question') {
$('#comments').show();
} else {
$('#comments').hide();
}
});
});
You also need to hide the comments on load via CSS style and place the label inside the comments div container, so that also the label is invisible when appropriate.
Here's the working fiddle:
http://jsfiddle.net/7wzUG/9/

you just have to include jQuery
Here's the corrected one:
http://jsfiddle.net/edgarinvillegas/7wzUG/7/
Cheers

Here is the same code that Simon Steinberger & Edgar Villegas Alvarado but with the ternary operator
http://jsfiddle.net/4uj2fhoh/
$(document).ready(function () {
$('#contact select[name="select-question"]').change(function () {
$('#contact select[name="select-question"]').val() == 'question' ? $('#comments').show() : $('#comments').hide()
});
});
As others said, add JQuery.
What you could, also, do is add a class that will hide the comments text area, and then toggle it on/off based on dropdown selection.

Related

How to make multiple working on this case

Javascript
$(".show").change(function(){
if ($(this).val() == "1") {
$(".text_area").show();
}
else {
$(".text_area").hide();
}
});
I want to use this code for all element with this class but, when i select option with "value 1" that make effect to all elements. Please help. Thank you.
Here is demo Click here
use $(this).next():
$(".show").change(function () {
if ($(this).val() == "1") {
$(this).next(".text_area").show();
} else {
$(this).next(".text_area").hide();
}
});
You have to make use of keyword this. $(this) works within the event of context of your selector.
As you have class name as a selector, so you should note that it returns a collection. It means if you have more than one element then it will refer to all and this refers to the event applied on the current selector in the collection.
If you happen to change the order of the html, for example place text area before the select box, it would not work. So as an alternative for the previous answer, you can wrap your groups into a div:
<div class="container">
<select class="show">
<option value="0">NO</option>
<option value="1">YES</option>
</select>
<textarea class="form-control text_area" type="text" name="text_area" placeholder="Write something" rows="5" cols="50"></textarea>
</div>
and when you are going to display/hide the text areas, you can do:
$(this).closest('.container').find('.text_area').show();
or
$(this).closest('.container').find('.text_area').hide();
Here is a demo: http://jsfiddle.net/n1fjo6qu/13/

Checkboxs disabled with jquery not working as intended

i have some checkboxes that are displayed by doing a select in database that represents tables of a restaurant. Those tables that are already reserved i add them an disabled attribute. The problem with my script is that i only want to select three tables max and that means i need to add disabled atribute to the other to block them. and when i want to deselect those 3 already selected i need to remove the disabled attribute. Problem is that it removes the attribute from all tables even those that are reserved and selected from database.
Here is my script:
JSFIDDLE HERE
<script type="text/javascript">
var $checks = $(".table").change(function () {
if ($checks.filter(":checked").length<3)
{
$(".formular").toggle($checks.filter(":checked").length>0);
$checks.not(":checked").removeAttr("disabled");
}
else
{
$checks.not(":checked").attr("disabled", "disabled");
}
});
</script>
Added a class .ignore to the input disabled from start and in js binding change event only to checkboxes without the ignore class as mentioned by #lolka_bolka
HTML
<input type="checkbox" class="bowling ignore" disabled/>
<input type="checkbox" class="bowling ignore" disabled/>
<input type="checkbox" class="bowling"/>
<input type="checkbox" class="bowling"/>
JS
var $checks = $(".bowling:not(.ignore)").change(function () {
if ($checks.filter(":checked").length < 3) {
$(".formular").toggle($checks.filter(":checked").length > 0);
$checks.not(":checked").removeAttr("disabled");
} else {
$checks.not(":checked").attr("disabled", "disabled");
}
});
:not(foo){} will match anything that isn't foo, including html and
body. Source
Demo

JQuery validation on blur

I have a form that I want to validate using JQuery.
When the user leaves the form field without entering anything the class of that input changes to show an error by becoming red.
I have created a jsfiddle file
http://jsfiddle.net/mTCvk/
The problem I am having is that the it will only work on the first text input and the other text inputs will adjust according to the state of the first input.
The JQuery
$(document).ready(function(){
$('.text-input').focusout(function () {
if ($(":text").val().length == 0) {
$(this).removeClass("text-input").addClass("text-input-error");
} else {
$(this).removeClass("text-input-error").addClass("text-input");
}
});
});
Here is the HTML for the form
<form method="post" action="">
<div class="text-input">
<img src="images/name.png">
<input type="text" name="name" placeholder="*Name:">
</div>
<div class="text-input">
<img src="images/mail.png">
<input type="text" name="email" placeholder="*Email:">
</div>
<div class="text-input">
<img src="images/pencil.png">
<input type="text" name="subject" placeholder="*Subject:">
</div>
<div class="text-input">
<img src="images/phone.png">
<input type="text" name="phone" placeholder="Phone Number:">
</div>
<textarea name="message" placeholder="*Message:"></textarea>
<input type="submit" value="Send" class="submit">
It's a DOM issue. It needs to check the :text child for that specific element
$(document).ready(function(){
$('.text-input').focusout(function () {
if ($(this).find(":text").val().length == 0) {
$(this).removeClass("text-input").addClass("text-input-error");
} else {
$(this).removeClass("text-input-error").addClass("text-input");
}
});
});
Updated Fiddle http://jsfiddle.net/mTCvk/2/
It's easy, you have selected the first input type text found : $(":text").val().. You must select the input type type on the .text-input blured :
$(":text", $(this)).val()... // First :text, on $(this) parent
http://jsfiddle.net/mTCvk/1/
PS : for your class management, don't delete .text-input juste add and remove an other class .text-input-error when you have an error
You can use this:
$(":text").focusout(function () {
if ($(this).val().length == 0) {
$(this).parent().removeClass("text-input").addClass("text-input-error");
} else {
$(this).parent().removeClass("text-input-error").addClass("text-input");
}
});
Use following code....
$('.text-input, .text-input-error').focusout(function () {
if ($(this).find(':text').val().length == 0) {
$(this).removeClass("text-input").addClass("text-input-error");
} else {
$(this).removeClass("text-input-error").addClass("text-input");
}
});
I changed your code to use the .on method, and gave it the event blur. Then we create a variable for the closest text-input class (which would be its parent text-input div). Rather than checking the .length, we just check to see if it is an empty string. You would also need to wrap your textarea in the save text-input div for this to work properly.
http://jsfiddle.net/43e2Q/
$('input, textarea').on('blur', function () {
var $closestParent = $(this).parent();
if ($(this).val() == '') {
$closestParent.removeClass("text-input").addClass("text-input-error");
console.log('error');
} else {
$closestParent.removeClass("text-input-error").addClass("text-input");
console.log('valid');
}
});

Change textbox to textarea on click

How do I convert a simple text box to text area when the user clicks on it. I'm using EXT JS.
Are you doing it just for visual appearance? Or is there a valid reason for converting it from input to textarea?
If you are doing it just for the visuals of it you can get a long way with just setting the height of your textarea and in the focus event increase the height.
Ext.onReady(function(){
new Ext.form.TextArea({
renderTo: Ext.getBody(),
name: 'myTextArea',
width: 200,
height: 22,
listeners: {
focus: function(textarea){
textarea.setHeight(200);
},
blur: function(textarea){
textarea.setHeight(22);
}
}
});
});
EDIT: These stopped working:
Try it here: http://jsfiddle.net/chrisramakers/9FjGv/2/
You can even quite easily animate it for some extra fancy visualy fancy pancy.
http://jsfiddle.net/chrisramakers/9FjGv/3/
You can't change a textbox to a textarea because they are two different types of elements. You can however hide one and display the other.
<input type='text' id='myTextBox' />
<textarea id='myTextArea' />
With some function that could swap them on whatever event you want:
function swapTexts() {
var tb = document.getElementById('myTextBox');
var ta = document.getElementById('myTextArea');
if (tb.style.display !== 'none') {
tb.style.display = 'none';
ta.style.display = '';
} else {
tb.style.display = '';
ta.style.display = 'none';
}
}
show and hide is nice technic. but., u can use innerHTML property also like this...
<div id='test'> <input type="text" name="text1" id="text1" onclick="test()"/></div>
<script type="text/javascript">
function test()
{
document.getElementById('test').innerHTML = "<textarea></textarea>"
}
</script>
if u want to change again, give some condition or any event.. this may help u i think..
have a good day.....
You can have two separate controls of TextBox and TextArea in the same div (or table) and then show the TextArea on click of TextBox
<input type='text' onclick='document.getElementById("txtArId").style.display = ""' />
<TextArea id='txtArId' />
Here's an example done in jQuery.
HTML:
<tr>
<td>
<input name="textInputComment" type="text" value="">
<textarea name="textAreaComment" style="display: none;"></textarea>
</td>
</tr>
jQuery:
$(document).ready(function()
$(document).on('focusin', 'input[name=textInputComment]', function () {
$(this).hide();
textarea = $(this).closest('tr').find('textarea[name=textAreaComment]');
textarea.show().focus().val($(this).val());//show, focus and get value from input
});
$(document).on('focusout', 'textarea[name=textAreaComment]', function () {
$(this).hide();
textarea = $(this).closest('tr').find('input[name=textInputComment]');
textarea.show().val($(this).val());//get value from textarea
});
});

How do I remove the default Google Search Value from Google Search box?

I am trying to use a little jQuery to "hide" the initial value in a Google Search box when you click in the box and I am missing something.
Here is the search box code:
<div id="search_box">
<form action="http://mfrp.ehclients.com/search_results" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="017425724926122041548:1ccj3d-e1-s" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" id="q" name="q" value="Search..." size="31" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
</div>
Here is the jQuery:
<script type="text/javascript">
$('#q').click(function() {
if($(this).val() == 'Search...')
$(this).val('');
});
</script>
Only problem is, it doesn't work. Here is the page.
I would appreciate some help sorting this out.
Thanks,
Forrest
When your code it needs to run when the DOM elements available to find, so $("#q") finds the id="q" elements to bind to. This means your script either needs to run after the elements it needs in the page (e.g. end of the <body>), or when the DOM is completely ready, like this:
$(function() {
$('#q').click(function() {
if($(this).val() == 'Search...')
$(this).val('');
});
});
If you're not doing this, and the $("#q") selector doesn't find any elements...there's just nothing to run .click() on, which binds that handler.
I think what you'll want is the reverse as well, which would look like this:
$(function() {
$('#q').focus(function() {
if($(this).val() == 'Search...') $(this).val('');
}).blur(function() {
if($(this).val() == '') $(this).val('Search...');
});
});
This will put "Search..." back in the box if it's empty and someone clicks outside, by relying on .focus() and .blur() instead of .click().
demo
You've been faked by google... the textbox has a background which look as if there was value... you should have checked that on the dev tools..
so just try to remove it on blur...
$('#q').blur(function(){
$(this).css('background','none');
if(this.value == '') {
this.value = this.defaultValue;
}
}).focus(function() {
if(this.value == this.defaultValue) {
this.value = '';
}
});​

Categories

Resources