3つの入力のいずれかを作成する方法requierdが必要です

Question

私の問題は、いくつかのフィールドと3つの入力の種類のボタンがあり、それらはすべて1つのメッセージを表します。私は3つのメッセージのうち1つを選択する必要があります。私のコードは以下の通りです：

<input id="poruka1" type="button" class="hm_datumibtn poruka" name="poruka1" value="Pored mene, sve želje " > 


<input id="poruka2" type="button" class="hm_datumibtn poruka" name="poruka2" value="Pored sebe, sve želje " > 




<input id="poruka3" type="button" class="hm_datumibtn poruka" name="poruka3" value="Pored tebe, sve želje " > 

このような問題をどのように解決できますか？

<script> 


      function upis(){ 

       //var datum = $(this).find('.datum').val(); 
       //var poruka = $(this).find('.poruka').val(); 
       //var poruka = $(this).attr('value'); 
       if (poruka_forma.poruka1.value == '' && poruka_forma.poruka2.value == ''&& poruka_forma.poruka3.value == '') { 
        alert('You have to choose message.'); 
        return false; 
       } 
       else { 
        myForm.submit(); 
       } 

       var ime = document.getElementById("ime").value; 
       var ime_slavljenik = document.getElementById("ime_slavljenik").value; 
       var elementsdate = document.getElementsByClassName("selected_date"); 
       var datum = elementsdate[0].value; 
       var elements = document.getElementsByClassName("selected"); 
       var poruka = elements[0].value; 

       //var poruka = document.getElementById("poruka").value; 


       //var datum = document.getElementById("datum").value; 
       //var poruka = document.getElementById("poruka").value; 
       //var email = document.getElementById("email").value; 
       //var dataString = "ime="+encodeURIComponent(ime)+"&ime_slavljenik="+encodeURIComponent(ime_slavljenik); 

      $.ajax({ 

        type:"post", 
        url: "upis.php", 
        cashe: false, 
        //data: dataString+'&datum='+datum+'&poruka='+poruka, 
        data: {ime:ime,ime_slavljenik:ime_slavljenik,datum:datum, poruka:poruka}, 
        success: function(data){ 
         //window.alert(data); 
         document.getElementById("placefortableanketa").innerHTML = data; 
        }, 
        error: function (req, status, err) { 
       console.log('Something went wrong', status, err); 
       } 
       }) 
       return false; 
     } 
     </script> 

Answer 1

代わりに<input type="radio" />を使用します。例：

<form> 
 
    <input type="radio" id="radio_btn_1" name="radio_btn" value="choice_1" required="required" checked="checked" /><label for="radio_btn_1">Choice 1</label><br /> 
 
    <input type="radio" id="radio_btn_2" name="radio_btn" value="choice_2" required="required" /><label for="radio_btn_2">Choice 2</label><br /> 
 
    <input type="radio" id="radio_btn_3" name="radio_btn" value="choice_3" required="required" /><label for="radio_btn_3">Choice 3</label><br /> 
 
</form>

あなたは彼らがを必要とするためにrequired属性を追加することができます。また、checked属性を追加すると、のラジオボタンがデフォルトので選択されます。

<label>とforという属性を使用することもできます。そのlabelがクリックされると、for属性のidが参照するラジオボタンが選択されます。

を編集します。デザインのためにラジオボタンを使用したくないというあなたのコメントを見ました。実際にラジオボタンを隠すことができ、<label>にはforの属性を使用します。例：

<style> 
 
    #radio_btn_1:checked + label{background-color:red;} 
 
    #radio_btn_2:checked + label{background-color:red;} 
 
    #radio_btn_3:checked + label{background-color:red;} 
 
</style> 
 
<form> 
 
    <input style="display:none;" type="radio" id="radio_btn_1" name="radio_btn" value="choice_1" required="required" checked="checked" /><label for="radio_btn_1">Choice 1</label><br /> 
 
    <input style="display:none;" type="radio" id="radio_btn_2" name="radio_btn" value="choice_2" required="required" /><label for="radio_btn_2">Choice 2</label><br /> 
 
    <input style="display:none;" type="radio" id="radio_btn_3" name="radio_btn" value="choice_3" required="required" /><label for="radio_btn_3">Choice 3</label><br /> 
 
</form>