检查选择了哪个单选选项并根据该选项显示一个按钮

Question

I have a form, which contains a free option and a paid option.

If the user selects a paid option, I want to display a different button than if they press the free option.

form:

<form method=POST>
    <input type="radio" name="plan" value="1days" required="required"> 1 day (free) &nbsp;
    <input type="radio" name="plan" value="7days" required="required"> 7 days  (£12.99)</p>
    <button type="submit" class="link button" display:block">Submit</button>
 </form>

What I want is something like:

  <form method=POST>
    <input type="radio" name="plan" value="1days" required="required"> 1 day (free) &nbsp;
    <input type="radio" name="plan" value="7days" required="required"> 7 days  ($12.99)</p>
     // if radio value == "7days":
     <button type="submit" display:block">Pay 12.99 now </button>
     // else:
     <button type="submit" display:block">Submit</button>
 </form>

I am not sure how to achieve this in real time while the user is completing the form, I'm assuming its Javascript, but im not sure how to implement? Thanks.

EDIT:

The 12.99 button will take the person to a payment handler, whereas the other one should just complete/submit the form.

EDIT2:

This is the payment processor that I use:

<form action="{% url 'charge' %}" method="post">
  {% csrf_token %}
  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
          data-key="{{ key }}"
          data-description="Website Purchase"
          data-currency=usd
          data-amount="{{ price }}"
          data-locale="auto"></script>

    <button type="submit" class="link button" style="margin:auto;">COMPLETE THIS ORDER</button>
</form>

So really I will have to replace the pay 12.99 button with the above form

Answer 1

you can do that directly in the onclick function:

  <form method=POST>
    <input type="radio" name="plan" value="1days" required="required" onclick="document.getElementById('s2').style.display ='none';document.getElementById('s1').style.display =''"> 1 day (free) &nbsp;
    <input type="radio" name="plan" value="7days" required="required" onclick="document.getElementById('s1').style.display ='none';document.getElementById('s2').style.display =''"> 7 days  ($12.99)</p>
     <button type="submit" display:block" id='s1'>Pay 12.99 now </button>
     <button type="submit" display:block" id='s2'>Submit</button>
 </form>

Answer 2

simply:

no need to have several buttons doing the same thing, you can directly change the text

no need to repeat the required attribute on all radio buttons just on the first one is sufficient

use the labels for the radio inputs, this makes them active to act on the radio, it's the same for the checkboxes

all the elements of a form have a hierarchical link with their form, use their name, as in a json system to access it directly, without needing to use a direct identifier (as here for myForm.btSubmit and myForm.plan )

 const myForm = document.getElementById('my-form'), day7 = '7days' myForm.oninput = evt => { if (evt.target.name == 'plan') { myForm.btSubmit.removeAttribute('style') myForm.btSubmit.textContent = (myForm.plan.value === day7)? 'Pay 12.99 now': 'Submit' } } myForm.onsubmit = evt => { evt.preventDefault() // disable submit?for testing if (myForm.plan.value === day7 ) { // do special stuf for this case console.clear() console.log('7 days case') } else { // do normal stuff for other case console.clear() console.log('not 7 days case') } }

 label, button { display: block; float: left; clear: both; margin: .5em; }

 <form method="POST" id="my-form" > <label> <input type="radio" name="plan" value="1days" required > 1 day (free) &nbsp; </label> <label> <input type="radio" name="plan" value="7days" > 7 days ($12.99)</label> <button type="submit" name="btSubmit" style="visibility: hidden;">Submit</button> </form>

Answer 3

here is the answer: you can use "checked" selector in css

<form method=POST>
    <input class="free-option" type="radio" name="plan" value="1days" required="required"> 1 day (free) &nbsp;
    <input class="paid-option" type="radio" name="plan" value="7days" required="required"> 7 days  ($12.99)</p>
     // if radio value == "7days":
     <button class="paid-btn" type="submit" display:block">Pay 12.99 now </button>
     // else:
     <button class="free-btn" type="submit" display:block">Submit</button>
 </form>

<style>
.free-option:checked, .free-btn {
   display: inline;
}
.paid-option:checked, .paid-btn {
   display: inline;
}
}
</style>

when ".free-option" checked, apply styles on ".free-btn" and so on.

Answer 4

The most sensible approach – albeit using plain JavaScript in place of jQuery – is the following. Please note that I've added a data-plan custom data-* attribute to each of the <button> elements which is equal to the value of the relevant <input> elements.

I've also wrapped the <input> elements in a <label> , in order to associate the explanatory text with the relevant <input> , which allows clicking on the text to check the relevant <input> :

 // a named function to handle the toggling, we're // using an Arrow function (since we have no need to use // or update the 'this' within the function), and passing // in the Event Object, which is supplied automatically // by EventTarget.addEventListener() method: const toggleButton = (event) => { // the <input> that fires the 'change' event (see the // EventTarget.addEventListener() call later) is the // event.target, so here we get a reference to that // changed <input>: let changed = event.target, // interactive form elements (<input>, <select>, // <button>...) all have a form property which // identifies the <form> element they belong to; // we use that to find all <button> elements // within the same <form>: buttons = changed.form.querySelectorAll('button'); // we then iterate over that NodeList using // NodeList.prototype.forEach(), using an anonymous // (unnamed) Arrow function expression: buttons.forEach( // the 'button' argument is a reference to the current // Node of the NodeList over which we're iterating; // here we use a conditional operator (ternary) to // update the display of the current <button> node. // If the buttons 'data-plan' attribute is exactly // equal to the changed <input> element's 'value' // property/attribute then we set the display to // 'initial', otherwise if not an exact match we // return 'none': (button) => button.style.display = button.dataset.plan === changed.value? 'initial': 'none' ); } // here we bind an anonymous function to the 'DOMContentLoaded' // event of the Window Object: window.addEventListener('DOMContentLoaded', () => { // we get the <form> element: const form = document.querySelector('form'), // we retrieve the <input type="radio"> elements // within the <form>: radios = form.querySelectorAll('input[type=radio]'); // and use an anonymous arrow function as the callback, // here we iterate over each <input> and bind the // toggleButton() function (note the deliberate lack of // parentheses) as the 'change' event-handler: radios.forEach( (el) => el.addEventListener('change', toggleButton) ); });

 *, ::before, ::after { box-sizing: border-box; font-size: 1rem; line-height: 1.5; margin: 0; padding: 0; } label { display: block; cursor: pointer; } button { display: none; }

 <form method="POST"> <.-- wrapping each <input> with a <label> to improve user experience --> <label> <input type="radio" name="plan" value="1days" required="required"> 1 day (free) </label> <label> <input type="radio" name="plan" value="7days" required="required"> 7 days ($12;99) </label> <:-- if radio value == "7days". also we add the custom data-plan attribute to reflect the value of the relevant <input>: --> <button data-plan="7days" type="submit">Pay 12.99 now </button> <!-- else: --> <button data-plan="1days" type="submit">Submit</button> </form>

Answer 5

you can do like this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <form method=POST>
        <input type="radio" id="radio-seven" name="plan" value="7days" required="required"> 7 days  (£12.99)
        <input type="radio" id="radio-one" name="plan" value="1days" required="required"> 1 day (free) &nbsp;
        <input type="submit" id="btn" value="submit" class="link button" display:block">
     </form>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script>
         $('#radio-one').click(()=>{
            // $('#btn').prop('value',$('#radio-one').val())
            /* or like this */
            $('#btn').prop('value','Submit')
         })
         $('#radio-seven').click(()=>{
            // $('#btn').prop('value',$('#radio-seven').val())
            /* or like this */
            $('#btn').prop('value','Pay 12.99 now')
         })
     </script>

</body>
</html>

i have used Jquery-library:)