I've searched a couple of questions on this site but couldn't find a helpfull one, the problem which I have is:
I have 2 radio form boxes, which are called 'Youtube' and 'Picture',I want this: When I click on the radio box of Youtube a text form shows up, I can't fix this and thats why I hope you do guys!
thank you for you time!
my Javascript:
<SCRIPT LANGUAGE="JavaScript">
$("input[type='radio']").change(function(){
if($(this).val()=="youtube")
if($(this).val()=="pic")
{
$("#youtube").show();
}
else
{
$("#youtube").hide();
}
});
</script>
My form:
echo '
<form action="post.php" method="post">
title: <input name="title" type="text" id="title"><br />';
//Picture link: <input name="pic" type="text" SIZE="80" id="pic"><br />
//Youtube link: <input name="youtube" type="text" SIZE="80" id="youtube"><br />';
echo '
<input type="radio" name="youtube" value="youtube">Youtube <input style="display: none;" type="text" name="youtube" id="youtube"/> | <input type="radio" name="pic" value="pic">Picture <input style="display: none;" type="text" name="pic" id="pic"/><br />
Category game:
<select name="cat">';
while($row=mysql_fetch_array($query2)){
echo '
<option value="'.$row["nameID"].'">'.$row["name"].'</option> // here is the problem
'; }
echo '
</select>
<input type="submit" name="submit" value="submit">
</form>
';
Maybe you don't need to do the actual test. Just show the text field next to that input field.
Here's a sample:
http://jsfiddle.net/joeSaad/CTFJh/
$('input[type="radio"]').change(function(){
$('input[type="text"]').hide();
$(this).next('label').next('input[type="text"]').show(); });
Hope this helps.
I think you need do this..
$("input[type='radio']").change(function(){
if($(this).val()=="youtube")
{
$("#youtube").show();
$("#pic").hide();
}
if($(this).val()=="pic")
{
$("#pic").show();
$("#youtube").hide();
}
});
this will work fine, but you must be carefully >>look at this mate:
<input type="radio" name="youtube" value="youtube">Youtube <input style="display: none;" type="text" name="youtube" id="youtube"/>
Picture
when you set a radio name, set the name of radio same..like youtube, youtube ...
also, look at a nother name in form, you use a same name for multiple elements, and this wrong mate, give another element defferant name .. to can get it on php side, without any error ...
good luck
You nested the if statements. The code would only be used if they are both true.
Your input type='radio' tags are not "closed" they should end with a slash as in:
input type="radio" name="something" value="something"/>
The text form that you complain about is already in your HTML code as
input style="display: none;" type="text" name="youtube"
id="youtube"/>
and
input style="display: none;" type="text" name="pic" id="pic"/>
By default it is not displayed hence style="display: none",
when your if statement evaluates as true, the display: none will be removed
Simplify, and un-nest your if statements as follows:
if($(this).val()=="youtube")
$("#youtube").show();
} else {
$("#youtube").hide();
}
This simply says if the radio button is the YouTube button, then show the youtube input, otherwise hide it.
Related
How do I validate that the input text corresponding to the radio option is checked?
For example, using the image above:
If Contact 1's E-Mail radio option is selected, Contact 1's E-Mail text field cannot be blank, but Contact 1's Phone and US Mail text fields are still permitted.
If Contact 2's US Mail radio option is selected, Contact 2's US Mail text field cannot be blank, but Contact 2's Phone and E-Mail text fields are still permitted.
I have built the form above using the HTML below, but you can play with my Fiddle here: fiddle.
BEGIN UPDATE: I have a newer fiddle with better code here:
fiddle2
It has more instructions in the HTML and a closer attempt at my jQuery. For some reason, though, it still does not seem to be doing anything.
END UPDATE
I have tried naming the fields so that my jQuery can parse them, but that does not mean there is not a better way.
<body>
<form name="jp2code" action="#" method="POST">
<fieldset>
<legend>Contact 1</legend>
<span>
<input type="radio" id="group1_PhoneRadio" name="group1"/>
<label for="group1_PhoneText">Phone:</label>
<input type="text" id="group1_PhoneText" name="group1_PhoneText"/>
<br/>
<input type="radio" id="group1_EMailRadio" name="group1"/>
<label for="group1_EMailText">E-Mail:</label>
<input type="text" id="group1_EMailText" name="group1_EMailText"/>
<br/>
<input type="radio" id="group1_USMailRadio" name="group1"/>
<label for="group1_USMailText">US Mail:</label>
<input type="text" id="group1_USMailText" name="group1_USMailText"/>
</span>
</fieldset>
<fieldset>
<legend>Contact 2</legend>
<span>
<input type="radio" id="group2_PhoneRadio" name="group2"/>
<label for="group2_PhoneText">Phone:</label>
<input type="text" id="group2_PhoneText" name="group2_PhoneText"/>
<br/>
<input type="radio" id="group2_EMailRadio" name="group2"/>
<label for="group2_EMailText">E-Mail:</label>
<input type="text" id="group2_EMailText" name="group2_EMaiText"/>
<br/>
<input type="radio" id="group2_USMailRadio" name="group2"/>
<label for="group2_USMailText">US Mail:</label>
<input type="text" id="group2_USMailText" name="group2_USMailText"/>
</span>
</fieldset>
<div>
<input type="submit" name="submit" value="submit" />
</div>
</form>
</body>
What is the best way to write the jQuery?
I am new to jQuery, but I attempted my hand at it based on some Show/hide examples.
What I created below does not work, but hopefully indicates what I am trying to accomplish.
$(function() {
$("input[type='radio']").change(function() { // when a radio button in the group changes
var id = $(this).id;
var index = id.indexOf('group');
if (index == 0) { // is there a better way to do this?
var groupN_Len = 7; // Length of 'groupN_'
var radio_Len = 5; // Length of 'radio'
var preStr = id.substring(0, groupN_Len);
$"input[name*='preStr']".validate = null; // clear validation for all text inputs in the group
var postStr = id.substring(groupN_Len + 1, id.Length() + 1 - radio_Len); // extract Phone, EMail, or USMail
$(preStr+postStr+'Text').validate({ rules: { name: { required: true } } });
}
});
});
To make sure that the radiobutton is checked for each field, add attribute required="" in one of the radiobuttons for each fieldset.
demo
OK, whatever radio button is selected in the Contact Group's Contact Preferences, that corresponding text field is required.
Here is where I am so far on my jQuery checking:
EDIT:
Modified with tilda's important detail about adding '.' to the class name.
Added Required Attribute: how to dynamically add REQUIRED attribute to textarea tag using jquery?
Removed Required Attribute: jquery removing html5 required attribute
Final code works and looks like this:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script type="text/javascript">
$(function() {
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$("input[type='radio']").change(function() {
$('.'+$(this).attr('name')).each(function(index) {
$(this).removeAttr('required');
});
if($(this).is(':checked')) {
$('.'+$(this).attr('id')).each(function(index) {
$(this).prop('required',true);
});
}
});
$('#submit').click(function() {
$(this).validate();
});
});
Back to the HTML of the document: I did a lot of subtle editing to the text by creating specific ids and names for the radio buttons that matched up with the class names for the text controls.
Here is that end result:
<body>
<form name="jp2code" action="#" method="POST">
<div>For each field below, provide the Phone Number, E-Mail Address, and Street Address. <b>Indicate the preferred contact method using the radio button.</b></div>
<fieldset>
<legend>Contact 1</legend>
<span>
<input type="radio" id="group1_Phone" name="group1"/>
<label for="group1_Phone">Phone:</label>
<input type="text" name="group1_PhoneText" class="group1 group1_Phone" />
<br/>
<input type="radio" id="group1_EMail" name="group1"/>
<label for="group1_EMail">E-Mail:</label>
<input type="text" name="group1_EMailText" class="group1 group1_EMail" />
<br/>
<input type="radio" id="group1_USMail" name="group1"/>
<label for="group1_USMail">US Mail:</label>
<input type="text" name="group1_USMailText" class="group1 group1_USMail" />
</span>
</fieldset>
<fieldset>
<legend>Contact 2</legend>
<span>
<input type="radio" id="group2_Phone" name="group2"/>
<label for="group2_Phone">Phone:</label>
<input type="text" name="group2_PhoneText" class="group2 group2_Phone" />
<br/>
<input type="radio" id="group2_EMail" name="group2"/>
<label for="group2_EMail">E-Mail:</label>
<input type="text" name="group2_EMailText" class="group2 group2_EMail" />
<br/>
<input type="radio" id="group2_USMail" name="group2"/>
<label for="group2_USMail">US Mail:</label>
<input type="text" name="group2_USMailText" class="group2 group2_USMail" />
</span>
</fieldset>
<div>
<input type="submit" value="Send" id="submit"/>
</div>
</form>
</body>
Let me explain what is going on in the jQuery, using the HTML above:
When a radio button's checked state changes, each control with a class name that matches the radio button's name attribute has the required property removed.
If a radio button is checked (i.e. checked=true), then each control with a class name that matches the radio button's id attribute has the required property added.
Finally, the validator seems to have to be run on a single form control (not on individual text controls like I was doing).
Here is the sample Fiddle that I ended with: Fiddle v8
At tilda: You didn't say much, but what you did say helped a lot!
Basically what I want to do is show a div if a keyword has been entered in the search box. For example I type "Television" into the box and it will show a div an ID of Television, but I want to do this for about 5 results. Is this possible to be done with Javascript?
This is all I've got:
HTML:
<form class="pure-form">
<legend></legend>
<input type="text" placeholder="Example: Television" class="pure-input-rounded">
<button type="button" name="answer" onclick="showDiv()" class="pure-button">Search</button>
<div id="noresults" style="display:none; font:'proxima-nova'; color:#BA2E31;" class="results" >No Results were found! :(</div>
Javascript:
function showDiv() {
document.getElementById('noresults').style.display = "block";
}
jsFiddle
Live site
You can use the onkeypress attribute to compare your text box value with predefined strings.
<form class="pure-form">
<legend></legend>
<input type="text" placeholder="Example: Television" class="pure-input-rounded" onkeypress="checkMatch(this)">
<button type="button" name="answer" onclick="showDiv()" class="pure-button">Search</button>
function checkMatch(obj) {
/* get obj text and compare is to some other string */
}
Sure. your code would look something like this:
<form class="pure-form">
<legend></legend>
<input type="text" placeholder="Example: Television" class="pure-input-rounded" onkeyup="showDiv(this.value)">
<button type="button" name="answer" class="pure-button">Search</button>
</form> <script>
function showDiv(value) {
if (value.charAt(value.length - 1) == ' ')
document.getElementById('noresults').style.display = "block";
else
document.getElementById('noresults').style.display = "none";
}
</script>
<div id="noresults" style="display:none; font:'proxima-nova'; color:#BA2E31;" class="results" >No Results were found! :(</div>
So, as Tsikon has already answered You need to have an event defined for your text field and a JS function associated (showdiv()) with it
For eg: Onkeypress/Onchange and length of the field >0
You can probably think of displaying the div only when atleast 3 characters are entered by when you probably know what to display in div.
I am working on a system where users are allowed to add books to their library. I am using a jquery UI dialog box and have inserted about 20 rows into the database using the first half of this script.
However, as I was adding in the second half all of a sudden the post information is not showing up on the posted page and I am completely lost as to why.
This was supposed to be a quick addition that's turned into a headache.
FORM:
<form id="addbookform" action="../models/Books/addBook_submit.cfm" method="POST">
<div style="display: none;" id="addBook" title="Add a Book to Your Library">
<input type="hidden" id="InputType" name="InputType" value="Add"/>
<input type="hidden" id="bookempID" name="bookempID"/>
<label class="labelstyle" >ISBN:</label>
<input type="text" maxlength="17" id="ISBN" name="ISBN">
<label class="labelstyle" >Title:</label>
<input type="text" maxlength="100" size="50" id="Title" name="Title">*
<label class="labelstyle">Author's First Name: </label>
<input type="text" maxlength="50" id="AFName" name="AFName">
<label class="labelstyle">Author's Middle Name:</label>
<input type="text" maxlength="50" id="AMName" name="AMName">
<label class="labelstyle">Author's Last Name:</label>
<input type="text" maxlength="50" id="ALName" name="ALName">*
<label class="labelstyle">Date Read:</label>
<input type="text" id="DateRead" name="DateRead">
</div>
</form>
Javascript:
function addBook() {
$("#addBook").dialog({
autoOpen: true,
width: ($(document).width()*.55),
height: ($(document).height()*.7),
modal: true,
buttons: {
"Add Book": function() {
//checkBook();
$('#addbookform').submit();
},
Cancel: function() { $(this).dialog("close"); }
}
});
}
The above piece was working before I started building checkBook(). However, now it's no longer working.
Edit:
The form is initiated by:
<input type="button" class="buttonstyle" value="Add Book" onclick="addBook()" />
(this works)
I think your form must be "visible" in order for the elements to be posted. jQuery can certainly see and access all of the elements regardless of css Display type, but I believe the "submit" action requires the elements that are getting posted to the server be visible. I noticed all the form elements you are attempting to submit are inside of a DIV element with the css property of Display:none;
It seems to me that you are binding a submit event to the form somewhere else in the code.
So, you can try submitting the form without jQuery.
$('#addbookform')[0].submit();
Or unbind any event that might be in the form.
$('#addbookform').off().submit();
I'm trying to figure out how to disable the following link until a series of 4 or 5 checkboxes have been selected.
<input type="image" src="/wp-content/themes/happy/images/add-to-cart.png" name="Buy" class="wpsc_buy_button" id="product_<?php echo wpsc_the_product_id(); ?>_submit_button" onclick="window.location='http://example.com/store/checkout/';"/>
Thanks!
I'm also kind of retarded when it comes to js and jquery, so the simpler the better, please. I would like to have all the code right there near the element, and not off in a different location, even though that might be the "preferred" method.
Thanks a lot.
You can do something like this
<input type="image" src="/wp-content/themes/happy/images/add-to-cart.png" name="Buy" class="wpsc_buy_button" id="product_<?php echo wpsc_the_product_id(); ?>_submit_button" onclick="if($(this).data("enabled")){window.location='http://example.com/store/checkout/';}"/>
And on check box click do this
$("input").click(function(){
//Here check for this checkbox and all other series of checkbox, if they are checked then
$("img[name=Buy]").data("enabled", true);
//else
$("img[name=Buy]").data("enabled", false);
});
Assuming you have jquery referenced, change your onclick method to something like;
onclick="if($('.checkboxClass').not(':checked').length > 0) window.location='http://example.com/store/checkout/'; else {alert('please tick all the checkboxes'); return 0};
Then add the "checkboxClass" (or whatever class you choose) to all of your checkboxes
<input type="checkbox" class="checkboxClass" value="1" />
<input type="checkbox" class="checkboxClass" value="2" />
And so on.
If you have the following form:
<form method="post" action="" class="my-form">
<p>
<input type="checkbox" /> First item
</p>
<p>
<input type="checkbox" /> Second item
</p>
<p>
<input type="image" src="..." />
</p>
</form>
Use jQuery to check on form submit
$(function() {
$(".my-form").submit(function() {
if ($(".my-form input[type=checkbox]:checked").length < 1)
{
alert("You must select at least one checkbox to proceed.");
return false;
}
}
}
I have a textarea in a DIV that I can not modify.
I need to add an element, an input checkbox, just after the text area with javascript.
This is the code :
<div id="msgrapidosinick"><p class="msguser">My Wall</p>
<form method="post" id="messaggioajaxd" name="frm2">
<textarea class="areamsgnoava" name="messaggio"></textarea>
<input type="hidden" value="1" name="invia" id="invia">
<input type="hidden" value="1" name="riceve" id="riceve">
<input type="hidden" value="/assyrian" name="pagina" id="pagina">
<input type="submit" value="Share" class="submsg" name="senda2" style="display: none;">
</form>
</div>
So just after the textarea I need to add an element, that is a input checkbox, when the textarea is clicked.
How do I do that?
Please help me.
Just to let you know my site loads also jQuery 1.3.2
Thank you
You can use the aptly-named after() method:
$("textarea[name=messaggio]").click(function() {
$(this).after("<input type='checkbox' name='yourCheckBoxName' />");
});
If you want to avoid creating the check box if it already exists, you can do something like:
$("textarea[name=messaggio]").click(function() {
var $this = $(this);
if (!$this.next(":checkbox").length) {
$this.after("<input type='checkbox' name='yourCheckBoxName' />");
}
});
Presuming you only want the checkbox created on the first click to the textarea, you could do something like this:
$("#messaggioajaxd textarea").click(function(){
if ($('#createdCheckbox').length==0){
$('<input />').attr('type','checkbox').attr('id','createdCheckbox').insertAfter($(this));
}
});
Example on jsfiddle
Niklas beat me to it but here is what I was going to suggest...
Demo: http://jsfiddle.net/wdm954/ppnzf/1/
$('textarea.areamsgnoava').click(function() {
if ($('input.new').length == 0) {
$(this).after('<input type="checkbox" class="new" />');
}
});
I think that some IE version will not like that you add a field dynamically. If you can add an element to the form, may be you could change the form totally, and inject it as a new form instead, using div.innerHTML or using the DOM.
And add the checkbox in the original HTML as hidden, and show it if the textarea is clicked.
eg:
<div id="msgrapidosinick"><p class="msguser">My Wall</p>
<form method="post" id="messaggioajaxd" name="frm2">
<textarea class="areamsgnoava" name="messaggio"></textarea>
<input type="checkbox" name="checkBox" id="checkBox" style="display:none">
<input type="hidden" value="1" name="invia" id="invia">
<input type="hidden" value="1" name="riceve" id="riceve">
<input type="hidden" value="/assyrian" name="pagina" id="pagina">
<input type="submit" value="Share" class="submsg" name="senda2" style="display: none;">
</form>
</div>
Then if you have the reference of the textarea DOM node:
textarea.onfocus = function(ev){
var ta = ev.target || ev.srcElement;
ta.form.checkBox.removeAttribute('style');
}
Or using jQuery and focus.