jQuery toggle change text input values

Question

I have this HMTL structure

.list, .list ul{
list-style-type: none;
}

<ul class="list">
    
    <li class="radioSettings">
    	<ul>
    		<li>
    			<span>
    				<input type="radio" value="white">
    			</span>
    		</li>
    
    		<li>
    			<span>
    				<input type="radio" value="dark">
    			</span>
    		</li>
    	</ul>
      
    </li>
    <li id="colors_body">
      <input type="text" value="ffffff" class="color">
    </li>
    <li id="colors_wrapper">
      <input type="text" value="000000" class="color">
    </li>
    <li id="colors_footer">
      <input type="text" value="575757" class="color">
    </li>
</ul>

Basically, A bunch of text input types that the values are HEX colors codes
and two of radio input types with "white" and "dark" values

Now with javascript i want to change each of the text input values to different color codes when i click on the "white" or "dark" radio types

For example, If i click on [value="white"]
for colors_body chnage value to FFFFFF
for colors_wrapper change the value to E6E6E6, and so on...

I did try on my own but no matter what i do i always get stuck on changing the the input values, Look in my code if i come close to what i want to accomplish and understand better what i want to do

var colorizer = {
    'white': {
        'colors_body': 'FFFFFF',
        'colors_wrapper': 'E6E6E6',
        'colors_footer': 'CCCCCC'
    },
    'dark': {
        'colors_body': 'EBEEF2',
        'colors_wrapper': 'B2B5B8',
        'colors_footer': '1A2758'
    },
};

$( '#radioSettings input[type="radio"]' ).change(function() {
    var val = $(this).val();
    if (colorizer[val]) {
        for (var i in colorizer[val]) {
            if ($( '#colors_' + i ).length) {
                //IM GETTING STUCK HERE to change each of the values accordingly 
            }
        }
    }

});

Will · Accepted Answer · 2017-06-19 22:34:33Z

Simplify:

var colorizer = {
  'white': {
    'colors_body': 'FFFFFF',
    'colors_wrapper': 'E6E6E6',
    'colors_footer': 'CCCCCC'
  },
  'dark': {
    'colors_body': 'EBEEF2',
    'colors_wrapper': 'B2B5B8',
    'colors_footer': '1A2758'
  },
};

$('[type="radio"]').change(function() {
  var val = $(this).val();
  if (colorizer[val]) {
    for (var i in colorizer[val]) {
      $('#'+i).val(colorizer[val][i]);
    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><input type="radio" name="color" value="white">White</label>
<label><input type="radio" name="color" value="dark">Dark</label>

<br><input type="text" placeholder="ffffff" id="colors_body">
<br><input type="text" placeholder="000000" id="colors_wrapper">
<br><input type="text" placeholder="575757" id="colors_footer">

joshmoto · Accepted Answer · 2017-06-20 13:50:47Z

2

A bit late to the party but try another method...

var colorizer = {}

colorizer['white'] = {
  'colors_body': 'FFFFFF',
  'colors_wrapper': 'E6E6E6',
  'colors_footer': 'CCCCCC'
}

colorizer['dark'] = {
  'colors_body': 'EBEEF2',
  'colors_wrapper': 'B2B5B8',
  'colors_footer': '1A2758'
}

$('input[name="colorizer"]').change(function() {
  var color = $(this).val();
  $.each(colorizer[color], function(i,v) {
    $('#'+i+' input').val(v);
  });
});

See working fiddle here: https://jsfiddle.net/joshmoto/po0zd43o/

edited Jun 20, 2017 at 13:50

answered Jun 19, 2017 at 23:35

joshmoto

5,2061 gold badge34 silver badges56 bronze badges

Comments

Ryan Tuosto · Accepted Answer · 2017-06-19 22:31:13Z

Several things need to be changed.

First the identifying attributes in HTML don't match what you're using in your jQuery: You need to select your toggle inputs with $(".radioSettings [type=radio]")

You also need to make sure your radio buttons have the same value for their name attribute so they cannot both be selected at the same time. In my answer code linked below I've used name="color".

Finally when you loop through the properties you need to correct the id of the element you're looking for because your property name when iterating i is colors_body for example so you're trying to select $("#colors_colors_body").

var colorizer = {
    'white': {
        'colors_body': 'FFFFFF',
        'colors_wrapper': 'E6E6E6',
        'colors_footer': 'CCCCCC'
    },
    'dark': {
        'colors_body': 'EBEEF2',
        'colors_wrapper': 'B2B5B8',
        'colors_footer': '1A2758'
    },
};

$( '.radioSettings [type="radio"]' ).change(function() {
    var val = $(this).val();
    if (colorizer[val]) {
        for (var i in colorizer[val]) {
            if ($( '#' + i ).length) {
                $('#' + i).find('input').val(colorizer[val][i]);
            }
        }
    }

});

.list, .list ul{
list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list">
    
    <li class="radioSettings">
    	<ul>
    		<li>
    			<span>
    				<input type="radio" name="color" value="white">
    			</span>
    		</li>
    
    		<li>
    			<span>
    				<input type="radio" name="color" value="dark">
    			</span>
    		</li>
    	</ul>
      
    </li>
    <li id="colors_body">
      <input type="text" value="ffffff" class="color">
    </li>
    <li id="colors_wrapper">
      <input type="text" value="000000" class="color">
    </li>
    <li id="colors_footer">
      <input type="text" value="575757" class="color">
    </li>
</ul>

Ozan · Accepted Answer · 2017-06-19 22:46:59Z

The solution I have come up with is this ;

$(this).val inside the function gets the current value of the radio input and then grabs the data from the object depending on it.

var colorizer = {
  'white': {
    'colors_body': 'FFFFFF',
    'colors_wrapper': 'E6E6E6',
    'colors_footer': 'CCCCCC'
  },
  'dark': {
    'colors_body': 'EBEEF2',
    'colors_wrapper': 'B2B5B8',
    'colors_footer': '1A2758'
  },
};

$('input:radio').on('click', function() {
  var currentValue = $(this).val();
  $('#colors_body input').val(colorizer[currentValue].colors_body);
  $('#colors_wrapper input').val(colorizer[currentValue].colors_wrapper);
  $('#colors_footer input').val(colorizer[currentValue].colors_footer);

});

.list,
.list ul {
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li class="radioSettings">
    <ul>
      <li>
        <span>
    				<input type="radio" value="white">
    			</span>
      </li>

      <li>
        <span>
    				<input type="radio" value="dark">
    			</span>
      </li>
    </ul>

  </li>
  <li id="colors_body">
    <input type="text" value="ffffff" class="color">
  </li>
  <li id="colors_wrapper">
    <input type="text" value="000000" class="color">
  </li>
  <li id="colors_footer">
    <input type="text" value="575757" class="color">
  </li>
</ul>

Collectives™ on Stack Overflow

jQuery toggle change text input values

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related