檢查選擇了哪個單選選項並根據該選項顯示一個按鈕

Question

我有一個表格，其中包含一個免費選項和一個付費選項。

如果用戶選擇付費選項，我想顯示一個與他們按下免費選項不同的按鈕。

形式：

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

我想要的是這樣的：

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

我不確定如何在用戶填寫表格時實時實現這一點，我假設它的 Javascript，但我不確定如何實現？ 謝謝。

編輯：

12.99按鈕會將人帶到付款處理程序，而另一個人應該只是填寫/提交表格。

編輯2：

這是我使用的支付處理器：

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

所以真的我必須用上面的表格替換pay 12.99按鈕

Answer 1

您可以直接在 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

簡單地：

不需要幾個按鈕做同樣的事情，你可以直接改變文本

無需在第一個單選按鈕上重復所有單選按鈕所需的屬性就足夠了

使用無線電輸入的標簽，這使它們可以在無線電上起作用，復選框也是如此

表單的所有元素都與其表單具有層次結構鏈接，使用它們的名稱，如在 json 系統中直接訪問它，無需使用直接標識符（如此處的 myForm.btSubmit 和 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

這是答案：您可以在 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>

檢查“ .free -option”時，請應用styles ON“ .FREE-BTN”等等。

Answer 4

最明智的方法——盡管使用普通的 JavaScript 代替 jQuery——如下。 請注意，我為每個<button>元素添加了一個data-plan自定義data-*屬性，該屬性等於相關<input>元素的value 。

我還將<input>元素包裝在<label>中，以便將說明性文本與相關<input>相關聯，這允許單擊文本以檢查相關<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

你可以這樣做

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

我用過 Jquery 庫:)