CODEWITHSUNDEEP
jqueryformsobject
zuk1
zuk1

Reputation: 18399

jQuery Form Handling

I have a product selection page where you choose a phone and a plan using radio buttons and I need jQuery to display the "current selection". For example I have 2 phones with two plans:

Nokia N95 and Nokia N96, $35/month and $50/month

Each of these 'options' has it's own radio button. When N95 and the $50/month plan are selected I need to display this information in a div:

Your Current Order
Phone: Nokia N95
Plan: $50/month

Any help would be greatly appreciated! :)

Upvotes: 1

Views: 1859

Answers (2)

Parrots
Parrots

Reputation: 26902

This should be pretty flexible. It will allow you to not have to define all the combination ahead of time, it will adapt to whatever options you put in the radio boxes. It will show the summary as soon as either option is picked (plan/phone). You'll want to clean this up a bit, perhaps not using the value of the radio item to get the string to display (recommend a label), but gets the idea across:

$(document).ready(function() {
  $("input[name=plan]").click(function() {
    $("#plan_details").html($(this).val());
    $("#summary").show();
  });
  $("input[name=phone]").click(function() {
    $("#phone_details").html($(this).val());
    $("#summary").show();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="summary" style="display: none;">
  <strong>Phone:</strong><span id="phone_details">None Selected</span><br />
  <strong>Plan:</strong><span id="plan_details">None Selected</span>
</div>

<strong>Select Your Plan:</strong><br />
<input type="radio" name="plan" value="$35/month" />$35/month<br />
<input type="radio" name="plan" value="$50/month" />$50/month<br />

<strong>Select Your Phone:</strong><br />
<input type="radio" name="phone" value="Nokia N95" />Nokia N95<br />
<input type="radio" name="phone" value="Nokia N96" />Nokia N96<br />

Upvotes: 1

Chad Grant
Chad Grant

Reputation: 45422

$(document).ready(function() {
  $("div.plan").hide();

  $("input[type=radio]").click(function() {
    $("div.plan").hide();
    $("div[planid=" + $(this).val() + "]").show();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="radio" name="plan" value="1" /> Plan 1 <br />
<input type="radio" name="plan" value="2" /> Plan 2 <br />
<input type="radio" name="plan" value="3" /> Plan 3 <br />

<div class="plan" planid="1">Plan 1 details</div>
<div class="plan" planid="2">Plan 2 details</div>
<div class="plan" planid="3">Plan 3 details</div>

Upvotes: 3

Related Questions