Как заставить один из трех типов ввода кнопки запрашивать

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 нажимается, он выбирает переключатель, на который ссылается id в его for приписывать.

Изменить: я видел ваш комментарий, что вы не хотите использовать радио-кнопки из-за дизайна. Вы можете на самом деле скрыть переключатели и просто использовать <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>