set inputs within a targeted div to 'required' when a link is clicked jquery

Question

This is what I've got so far. Trying to have the inputs (and selects) set to 'required' when the links (/w radios) are clicked. Here's a link to the jsfiddle: http://jsfiddle.net/swdmedia/ZR3A7/1/

$(".persnl").click(function(){

  var myTab = $(this).find("a").attr("href");
  // alert(myTab);

  $(this).find(':radio').prop('checked',true);
  // alert('clicked');  

  $(myTab).each(function() {
    $('input[type=text]').prop("required", true);
  });
  return false;

});

Do you want this to be based on when they click the radio button or the link? — j08691, Jan 15 '14 at 22:26
There's no `` in your fiddle. Why are you doing that in `.each()` if you don't reference the iteration element? — Barmar, Jan 15 '14 at 22:26
The issue is presently, I'm unable to get the required to be placed on the desired elements (there are 2-3 divs for each instance of this), wanting this tied to the link being clicked - radio will be hidden (just need it's value passed along with the form). — geepers, Jan 15 '14 at 22:46
Instead of changing required dynamically you should change the disabled property of your elements. This way you can use other HTML5 validation like pattern or type="email" or leave some controls optional. See also this: http://jsfiddle.net/trixta/K8EPm/ — alexander farkas, Jan 17 '14 at 22:24
alexander: thanks for pointing that out. on the production site, the form options for each 'personalization' are 'hidden' until it's clicked on, so it's less confusing from a ux standpoint. — geepers, Jan 20 '14 at 23:53

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

To validate the select values, give it a value="" (where you show "--Please Select--"). and add to select class="required".

Credits: Validate select box

Also, remember to remove the required attribute of the other tabs, when you check a different radiobutton.

EDIT: your click event triggers if you click on the button or the link, but when you click on the button it doesn't stay clicked. So, you should change the selector to $(".persnl>a") (however, it looks weird changing a radiobutton clicking on a link, so you might want to change that).

edited May 23 '17 at 10:25

Community

1
1

answered Jan 15 '14 at 22:32

Hugo Sousa

1,904
2
15
28

the radio is a secondary item, and will not be visible. I just need to send a value for 'personalization' with the form depending on which tab is selected. – geepers Jan 15 '14 at 22:48
Apart from that, your question was answered? (setting the selected to required?) – Hugo Sousa Jan 15 '14 at 22:52
Not quite, no. html part is easy enough, but, when one link is clicked, any inputs/selects that are already marked as required will be cleared (removing 'required'), and the corresponding div for the link that is clicked will then be marked as 'required' dynamically. – geepers Jan 15 '14 at 23:15
I'm only looking to resolve adding 'required' dynamically at this point. Once that's sorted, I should be able to get the other's removed. – geepers Jan 15 '14 at 23:16

geepers · Answer 2 · 2014-01-17T20:31:20.667

This was what I ended up coming up with with. There's a fair bit more going on as there are multiple sets of this tabs/divs within separate containers on any given page. The solution is for a Shopify account where the shop sells monogrammed items, hence the reliance on javascript for doing this.

$(".persnl").click(function(){

  var myTab = $(this).find("a").attr("href");
  // alert(myTab);

  var parId = $(".persnl").closest("div").attr("id");
  // alert(parId);

  $(this).find(':radio').prop('checked',true);
  // alert('clicked');

  $('input[type=text]').val('');
  $('option').prop("selected", false);
  $('input[type=text], select').prop("required", false);
  $(myTab).find('input[type=text], select').prop("required", true);

  return false;

});

Below is the html that goes with it:

<form action="">

<div>
  <h3>Select your personalization type</h3>
</div>

<div id="tabs" class="ui-tabs">
  <ul class="ui-tabs-nav clearfix">
    <li class="persnl"><a href="#tabs-1" class="button">No Personalization</a><input type="radio" name="properties[Personalization]" class="hidden" value="No Personalization" checked /></li>
    <li class="persnl"><a href="#tabs-2" class="button">Single Initial</a><input type="radio" name="properties[Personalization]" class="hidden" value="Single Initial"/></li> 
    <li class="persnl"><a href="#tabs-3" class="button">3 Initials</a><input type="radio" name="properties[Personalization]" class="hidden" value="3 Initials"/></li>
    <li class="persnl"><a href="#tabs-4" class="button">Text</a><input type="radio" name="properties[Personalization]" class="hidden" value="Text"/></li>
  </ul>

  <hr/>

  <div id="tabs-1" class="ui-tabs-panel">
    <p>No personalization options.</p>
  </div><!--/.tabs-1-->

  <div id="tabs-2" class="ui-tabs-panel">
    <h4>Single Initial Options</h4>
    <div class="clearfix">
      <label for="sFonts" class="label">Font:</label> 
      <select id="sFonts" name="properties[Single Font]" class="inline">
        <option value="">--Please Select--</option>
        <option value="Blackboard" selected>Blackboard</option>
        <option value="Classic">Classic</option>
      </select>
      <div><a href="#pop-fonts" class="fancybox">&raquo; View Fonts</a></div>
    </div>
    <div class="clearfix">
  <label for="single" class="label">Single Letter:</label> <input type="text" id="single" class="inline uppercase single" name="properties[Single]" maxlength="1" size="1" />
    </div>  
    <div class="clearfix">
      <label for="sThread" class="label">Thread Color:</label>
      <select id="sThread" name="properties[Single Thread]" class="inline">
        <option value="">--Please Select--</option>  
        <option value="Aqua Blue">Aqua Blue</option>
        <option value="Black">Black</option>   
        <option value="Brown">Brown</option>  
      </select>
      <div><a href="#pop-thread" class="fancybox">&raquo; View Thread Colors</a></div>
    </div>
 </div><!--/#tabs-2-->
 <div id="tabs-3" class="ui-tabs-panel">
   <h4>3 Initials Options</h4>
   <div class="clearfix">
     <label for="tFonts" class="label">Font:</label> 
     <select id="tFonts" name="properties[Initials Font]" class="inline">
       <option value="">--Please Select--</option>
       <option value="Blackboard">Blackboard</option>
       <option value="Circle">Circle</option>
       <option value="Classic">Classic</option>
      </select>
      <div><a href="#pop-fonts" class="fancybox">&raquo; View Fonts</a></div>
    </div>
    <div class="clearfix">
      <label for="monogram1" class="label">First Name Initial:</label> <input type="text" class="inline uppercase single" id="monogram1" name="properties[Initials1]" maxlength="1" size="1" /><br/>
      <label for="monogram2" class="label">Midle Name Initial:</label> <input type="text" class="inline uppercase single" id="monogram2" name="properties[Initials2]" maxlength="1" size="1" /><br/>
      <label for="monogram3" class="label">Last Name Initial:</label> <input type="text" class="inline uppercase single" id="monogram3" name="properties[Initials3]" maxlength="1" size="1" />
    </div>
    <div class="clearfix">
      <label for="monoFormat" class="label">Monogram Format:</label>
      <select id="monoFormat" name="properties[Monogram Format]" class="inline">
    <option value="">--Please Select--</option>
        <option value="Female">Female (First, Last, Middle) Order</option>
        <option value="Male">Male (First, Middle, Last) Order</option>
      </select>
    </div>
    <div class="clearfix">
      <label for="monoThread" class="label">Thread Color:</label>
      <select id="monoThread" name="properties[Initials Thread]" class="inline">
        <option value="">--Please Select--</option>
        <option value="Aqua Blue">Aqua Blue</option>
        <option value="Black">Black</option>
        <option value="Brown">Brown</option>
      </select>
      <div><a href="#pop-thread" class="fancybox">&raquo; View Thread Colors</a></div>
    </div>
    </div><!--/.tabs-3-->
    <div id="tabs-4" class="ui-tabs-panel">
      <h4>Text Options</h4>
      <div class="clearfix">
        <label for="textFonts" class="label">Font:</label> 
        <select id="textFonts" name="properties[Text Font]" class="inline">
          <option value="">--Please Select--</option>
          <option value="Blackboard">Blackboard</option>
          <option value="Classic">Classic</option>
          <option value="Cottilion">Cottilion</option>
        </select>
        <div><a href="#pop-fonts" class="fancybox">&raquo; View Fonts</a></div>
      </div>
      <div class="clearfix">
    <label for="word" class="label">Text:</label> <input type="text" id="word" name="properties[Word]" maxlength="18" size="18" class="inline" /> <em>(18 character limit)</em>
      </div>
      <div class="clearfix">
        <label for="textThread" class="label">Thread Color:</label>
        <select id="textThread" name="properties[Text Thread]" class="inline">
          <option value="">--Please Select--</option>
          <option value="Aqua Blue">Aqua Blue</option>
          <option value="Black">Black</option>
          <option value="Brown">Brown</option>
          <option value="Yellow">Yellow</option>
        </select>
        <div><a href="#pop-thread" class="fancybox">&raquo; View Thread Colors</a></div>
      </div>
    </div><!--/.tabs-4-->
</div><!--/#tabs-->

set inputs within a targeted div to 'required' when a link is clicked jquery

2 Answers2