如何使三个输入类型按钮之一成为必需

Question

我的问题是我有一个表单，其中包含一些字段和三个输入类型按钮，它们都代表一条消息。我想选择所需的三个消息之一。我的代码如下：

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

如何使三个输入类型按钮之一成为必需

How to make one of three inputs type button requierd required

javascript

jquery

html

validation

required