Question
Oh Man, I totally screwed up my last question...must have been sleepy or something :-) Let's try this again.
I am a 20 year HTML vet who never did much javascript-ing etc. but have found a need over the years. My coding is very elementary and mainly cut and paste then change it to make it work :-)
I'm creating a site where you can select the number of textfields with radio buttons. The textfields selected are shown and required dynamically and the rest are explicitly hidden and unrequired so a user can select say 3 names and then 2 names and the third name and higher will not block submission due to the requirement being released.
What I have now works, but is fugly to say the least. I'm calling changes on click for show, hide, required = true and required = false for all elements AND for each radio button. too much code!
I'd love some suggestions for turning this into 1 code snippet that handles everything...anyway on to the code!
https://stackoverflow.com/questions/21740785
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianbody,td,th {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: medium;
}
body form select {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: medium;
}
.submit {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: medium;
}
body form {
text-align: center;
margin-top: 10px;
}
.submission {
margin:0 auto 0 auto;
height:500px;
width:400px;
border:#000000 solid 3px;
float:left;
padding: 20px 0;
}
.center {
margin:0 auto;
width: 812px;
}
.left{
text-align:left;
}
.right{
float:;
}
.eighty{
width:80%;
}
.marg_20{
margin-left:20px;
}
.marg_40{
margin-left:40px;
}
.marg_60{
margin-left:60px;
}
.content{
display:none;
}
.up20{
margin-top:-20px;
}
.signMain{
width:200px;
height:100px;
background:WhiteSmoke ;
margin:20px auto 0;
}
.test{
width: 198px;
height: 20px;
margin-right: auto;
margin-left: auto;
float: left;
margin-bottom: 5px;
font-size:20px;
text-align:center;
}
.submitDiv {
height: 100px;
}
.signCreatorDiv {
height: 400px;
}
.namesColumn{
width:200px;
height:350px;
margin:0 auto;
}
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.NameRad1').click(function() {
$('div.NameImg.content:lt(1)').show();
$('div.NameImg.content:gt(0)').hide();
$('input#textBox.test:lt(1)').attr("required",true);
$('input#textBox.test:gt(0)').attr("required",false);
});
$('.NameRad2').click(function() {
$('div.NameImg.content:lt(2)').show();
$('div.NameImg.content:gt(1)').hide();
$('input#textBox.test:lt(2)').attr("required",true);
$('input#textBox.test:gt(1)').attr("required",false);
});
$('.NameRad3').click(function() {
$('div.NameImg.content:lt(3)').show();
$('div.NameImg.content:gt(2)').hide();
$('input#textBox.test:lt(3)').attr("required",true);
$('input#textBox.test:gt(2)').attr("required",false);
});
$('.NameRad4').click(function() {
$('div.NameImg.content:lt(4)').show();
$('div.NameImg.content:gt(3)').hide();
$('input#textBox.test:lt(4)').attr("required",true);
$('input#textBox.test:gt(3)').attr("required",false);
});
});//]]>
</script>
<body>
<form action="https://im-here.foxycart.com/cart" method="post" accept-charset="utf-8">
<div class="center">
<!--Begin leftSide-->
<div class="submission">
<!--Begin hiddenInputs-->
<input type="hidden" name="name" value="I'm Here Notification Sign" />
<input type="hidden" name="price" value="10" />
<!--End hiddenInputs-->
<!--Begin colorSelection-->
<div class="left eighty center">
<label>Color</label>
<br>
<select id="colorSelect" name="Color" tabindex="1" required >
<option value="" selected="selected" disabled>Choose A Color...</option>
<option value="Black">Black</option>
<option value="DarkGrey">Brushed Aluminum</option>
<option value="DarkKhaki">Brass</option>
</select>
</div>
<!--End colorSelection-->
<br>
<!--Begin nameSelection-->
<div class="left eighty center">
Number Of Names
<br>
<input type="radio" name="Names" value="1{p+100}" id="Names_1" class="NameRad1 trigger textBox1" tabindex="5" required />
One <br>
<input type="radio" name="Names" value="2{p+200}" id="Names_2" class="NameRad2 trigger textBox2" tabindex="6" />
Two <br>
<input type="radio" name="Names" value="3{p+300}" id="Names_3" class="NameRad3 trigger textBox3" tabindex="7" />
Three <br>
<input type="radio" name="Names" value="4{p+400}" id="Names_4" class="NameRad4 trigger textBox4" tabindex="8" />
Four <br>
</div>
<!--End nameSelection-->
<br>
<!--Begin columnSelection-->
<div class="left eighty center">
Number Of Columns
<br>
<input type="radio" name="Columns" value="1" id="Columns_0" class="ColumnRad1 " tabindex="3" required />
One
<br>
<input type="radio" name="Columns" value="2" id="Columns_1" class="ColumnRad2 " tabindex="4" />
Two
<br>
</div>
<!--End columnSelection-->
<br>
<!--Begin fontSelection-->
<div class="left eighty center">
<label>Font</label>
<br>
<select id="fontSelect" name="Font" tabindex="2" required>
<option value="" selected="selected" disabled>Choose A Font...</option>
<option value="Arial">Modern</option>
<option value="Times New Roman">Classic</option>
<option value="Impact">Vintage</option>
<option value="Verdana">Retro</option>
</select>
</div>
<!--End fontSelection-->
</div>
<!--End leftSide-->
<!--Begin rightSide-->
<div class="submission">
<div class="signCreatorDiv">
<div class="signMain"></div>
<div class="namesColumn">
<div class="NameImg content" >
<div class="NameTxt1 right test" >
<input class="test" type="text" name="name #1" id="textBox1" value="" placeholder="Name 1" tabindex="9" />
</div>
</div>
<div class="NameImg content" >
<div class="NameTxt2 right test " >
<input class="test" type="text" name="name #2" id="textBox2" value="" placeholder="Name 2" tabindex="10" />
</div>
</div>
<div class="NameImg content" >
<div class="NameTxt3 right test" >
<input class="test" type="text" name="name #3" id="textBox3" value="" placeholder="Name 3" tabindex="11" />
</div>
</div>
<div class="NameImg content" >
<div class="NameTxt4 right test" >
<input class="test" type="text" name="name #4" id="textBox4" value="" placeholder="Name 4" tabindex="12" />
</div>
</div>
</div>
<div class="submitDiv">
<input type="submit" name="x:productsubmit" id="productsubmit" value="Add My Sign" class="submit" tabindex="13"/>
</div>
</div>
</div>
<br>
<br>
<!--End rightSide-->
</div>
</form>
</body>
As you can see, the jQuery is fairly redundant and I know what I want it to say just not the syntax etc. I want: if selected indexN of radio buttons then show and require <=textBox indexN and hide and un-require >textBox indexN
I'd appreciate any help.
Thanks for reading!
so from user j08691 I got this code which is perfect for the problem above IN MY SPECIFIC page:
$('input[name="Names"]').click(function () {
var idx = $(this).index(':radio')
$('.namesColumn input:text').hide().prop("required", false);
$('.namesColumn .NameImg.content').show();
$('.namesColumn .NameImg.content:lt(' + (idx + 1) + ') input:text').show().prop("required", true);
})
it works perfectly. :-)
Solution
Try this:
$('input[name="Names"]').click(function () {
var idx = $(this).index(':radio')
$('.namesColumn input:text').hide().prop("required", false);
$('.namesColumn .NameImg.content').show();
$('.namesColumn .NameImg.content:lt(' + (idx + 1) + ') input:text').show().prop("required", true);
})
And remember that IDs must be unique and name attributes shouldn't contain spaces.
OTHER TIPS
For this specific example, one helper function would suffice. Something like:
function showHide(idx1, idx2){
$('div.NameImg.content:lt('+ idx1 +')').show();
$('div.NameImg.content:gt('+ idx2 +')').hide();
$('input#textBox.test:lt('+ idx1 +')').attr("required",true);
$('input#textBox.test:gt('+ idx2 +')').attr("required",false);
}
Called like this:
$('.NameRad1').click(function(){showHide(1,0)});
Demo: http://jsfiddle.net/ysPvd/
HOWEVER, if you know the structure of your markup won't change, then it's possible to actually use the element itself to determine what arguments to pass when calling your function. Something like this:
$(':radio').click(function(e){
var idx = $(this).index()
showHide(idx, idx+1);
});
