CODEWITHSUNDEEP
javascriptjqueryhtml
Nippledisaster
Nippledisaster

Reputation: 298

jQuery toggle change text input values

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 
            }
        }
    }

});

Upvotes: 0

Views: 155

Answers (4)

joshmoto
joshmoto

Reputation: 5088

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/

Upvotes: 2

Ozan
Ozan

Reputation: 1762

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>

Upvotes: 1

Will
Will

Reputation: 3241

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">

Upvotes: 2

Ryan Tuosto
Ryan Tuosto

Reputation: 1951

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>

Upvotes: 1

Related Questions