I have been trying to generate value to selection all I have been able to get the single value of the single selection.

I want to know how can I combine two selections and generate one value example:

If the person has selected private and half-day I want the value to be a private half-day

if the person has selected private and full-day I want the value to be private full-day

If the person has selected shared and half-day I want the value to be a shared half-day

if the person has selected shared and full-day I want the value to be shared full-day

(function() {
    var stripe = Stripe('pktest');
    var location = document.querySelector('#location');
    
    var btn = document.getElementById('btn');
    
  
    btn.addEventListener('click', async (e) => {
      var occupancy = $('input:radio[name=occupancy]:checked').val();
      var atv = $('input:radio[name=atv]:checked').val();
      e.preventDefault();
      fetch('/checkout_sessions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          occupancy: occupancy,
          atv: atv,
          location: location.value,
        }),
      })
      .then((response) => response.json())
      .then((session) => {
        stripe.redirectToCheckout({ sessionId: session.id });
      })
      .catch((error) => {
        console.error('Error:', error);
      });
    });
  })();

<div style="display: flex; width: 100%">
  <input type="radio" name="occupancy" id="private" value="private" checked="checked">
  <label for="private">Private</label>
  <input type="radio" name="occupancy" id="shared" value="shared">
  <label for="shared">Shared</label>
</div>
<div style="display: flex; width:100%">
  <input type="radio" name="atv" id="full-day" value="Full-Day" checked="checked">
  <label for="full-day">Full Day</label>
  <input type="radio" name="atv" id="half-day" value="Half-Day">
  <label for="half-day">Half Day</label>
</div>
<div ><input id="location" type="text" placeholder="location" onfocus="this.placeholder = ''" onblur="this.placeholder = 'location'"> </div>

CodePudding user response：

1. Can't you concatenate your occupancy and atv variables into a new unique variable before using fetch()?
2. As a side note, you should avoid using var so widely in your code. let and const are by far better ways of managing your variables without polluting the global scope.