asked on

Populate closest text input field with radio button value on click using Javascript / jQuery

I'm trying to apply a minor customization to a WordPress admin screen, and would like to figure out how to populate the closest text input field with radio button value on click using Javascript / jQuery.

The HTML that I currently have in place is as follows:

 <div class="rwmb-input">

  <input size="30" type="text" class="rwmb-text" id="fave_plan_title" name="floor_plans[0][fave_plan_title]">

  <div class="floor-plan-titles">

      <input class="plan-title" type="radio" name="plan-title" id="plan-title1" value="First Floor">First Floor 
      <input class="plan-title" type="radio" name="plan-title" id="plan-title2" value="Second Floor">Second Floor
      <input class="plan-title" type="radio" name="plan-title" id="plan-title3" value="">Custom

  </div>

</div>

Open in new window

To clarify .. I'd like to have it so that when you click on one of the 3 different radio buttons, I'd like for the text input field that's above them to be populated with that radio button's value (ie: either "First Floor", "Second Floor", or "" .... nothing / clear the field).

I'd normally do this by using the text input field's unique ID attribute selector .. but these text input fields are being generated dynamically, so I'd prefer to just traverse the DOM somehow and to just populate the text input field that's above the radio buttons.

Also .. note that I need to implement this using jQuery's noconflict mode (which uses "jQuery" prefixes instead of "$").

Would someone here be so kind as to provide me with a Javascript function that would allow me to accomplish this?

Thanks!
- Yvan

egoselfaxis

ASKER

I've tried all of these so far .. but I can't seem to get any of them to work:

jQuery(document).ready(function( $ ) {

    $(".plan-title").click(function() {
      
    	// $(this).closest("input[type=text]").val($(this).val());      

      // $(this).closest("input[type=\'text\']").val($(this).val());
      
      // $(this).closest("input.rwmb-text").val($(this).val());
      
  	});  
	
});

Open in new window

Jim Riddles

As long as your HTML structure will stay the same, this solution should work for you:

HTML

<div class="rwmb-input">
  <input size="30" type="text" class="rwmb-text" id="fave_plan_title" name="floor_plans[0][fave_plan_title]">
  <div class="floor-plan-titles">
    <input class="plan-title" type="radio" name="plan-title" id="plan-title1" value="First Floor">First Floor
    <input class="plan-title" type="radio" name="plan-title" id="plan-title2" value="Second Floor">Second Floor
    <input class="plan-title" type="radio" name="plan-title" id="plan-title3" value="">Custom
  </div>
</div>

Open in new window

JavaScript

$(".plan-title").click(function() {
  //get the current value from the radio selection
  var cur_val = this.value;
  //get the "parent" div
  var parent_div = $(this).parent().parent();
  //set the first input in the "parent" div to the value from the radio box
  $("input:first-of-type", parent_div).val(cur_val);
});

Open in new window

Here is a link to a JSFiddle:

egoselfaxis

ASKER

This isn't working correctly. The "Second Floor" and "" radio buttons are working .. but the "First Floor" one is not (???).

Also .. this doesn't work at all when I add one or more additional sets of fields. This WordPress module uses a repeater, ... where the additionaly added text input fields get named as follows:

name="floor_plans[1][fave_plan_title]
name="floor_plans[2][fave_plan_title]
name="floor_plans[1][fave_plan_title]

Open in new window

Here's my actual rendered HTML code again .. with a couple of additional elements that I purposefully omitted before thinking that they weren't relevant:

<div class="rwmb-input ui-sortable">

<input size="30" class="rwmb-text" id="fave_plan_title" name="floor_plans[0][fave_plan_title]" type="text">

<p id="fave_plan_title_description" class="description"></p>

<div class="floor-plan-titles">

<input class="plan-title" name="plan-title" id="plan-title1" value="Second Floor" type="radio">First Floor &nbsp; <input class="plan-title" name="plan-title" id="plan-title2" value="Second Floor" type="radio">Second Floor &nbsp; <input class="plan-title" name="plan-title" id="plan-title3" value="" checked="checked" type="radio">Custom

</div>

<p></p>

</div>

Open in new window

Any ideas as to why this isn't working as expected?

Jim Riddles

Now that was odd. Somehow, it was setting the value of the first radio box to "Second Floor" or "" depending if you clicked one of those choices. I changed it to target the input by class name. Check this JSFiddle out.

HTML

<div class="rwmb-input ui-sortable">
  <input size="30" class="rwmb-text" id="fave_plan_title" name="floor_plans[0][fave_plan_title]" type="text">
  <p id="fave_plan_title_description" class="description"></p>
  <div class="floor-plan-titles">
    <input class="plan-title" name="plan-title" id="plan-title1" value="First Floor" type="radio">First Floor &nbsp;
    <input class="plan-title" name="plan-title" id="plan-title2" value="Second Floor" type="radio">Second Floor &nbsp;
    <input class="plan-title" name="plan-title" id="plan-title3" value="" checked="checked" type="radio">Custom
  </div>
  <p></p>
</div>

Open in new window

JavaScript

$("input.plan-title").click(function() {
  //get the current value from the radio selection
  var cur_val = this.value;
  console.log(cur_val);
  //get the "parent" div
  var parent_div = $(this).parent().parent();
  //console.log(parent_div);
  //set the first input in the "parent" div with a class of "rwmb-text" to the value from the radio box
  $("input.rwmb-text:first-of-type", parent_div).val(cur_val);
});

Open in new window

egoselfaxis

ASKER

This one works better .. meaning that it works perfectly with the first set of fields. But it stops working when I add additional fields using the repeater ( ie: name="floor_plans[1][fave_plan_title] ) .

- Yvan

Jim Riddles

Any chance I can see some markup with additional fields?

egoselfaxis

ASKER

No problem! And thanks so much for your help. I've attached an HTML file that contains 1 section of fields. You'll notice that there's an "+ Add more" link down at the bottom. Clicking that appends additional sets of fields that are have different name attributes like I explained earlier:

name="floor_plans[1][fave_plan_title]
name="floor_plans[2][fave_plan_title]
name="floor_plans[1][fave_plan_title]

Open in new window

Note that I tried copying and pasting the underlying source code after adding the additional sections .. but they apparently didn't actually exist, as adding the additional fields apparently only modifies the DOM on the fly.

Thanks!
- Yvan
code.html

ASKER CERTIFIED SOLUTION

Jim Riddles

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

egoselfaxis

ASKER

This works perfectly -- thanks Jim!

- Yvan

Jim Riddles

Excellent. Please accept the post as the answer to close this question. Have a great day!

egoselfaxis

ASKER

Sorry - I thought I had already accepted the answer and awarded the points! They should probably do away with that "Next" button that appears at the bottom of the page when you click on the "Best Solution" button, as it really isn't necessary.

- Yvan