Wie man eine von drei Eingaben macht type button requierd erforderlich

Question

Mein Problem ist, dass ich ein Formular mit einigen Feldern und drei Eingaben Typ Knopf habe, sie alle repräsentieren eine Nachricht. Ich möchte eine von drei erforderlichen Nachrichten auswählen. Mein Code ist:

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

Haben Sie eine Idee, wie kann ich diese Art von Problem lösen?

<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

Ich denke, Sie möchten stattdessen <input type="radio" /> verwenden. Beispiel:

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

Sie hinzufügen können required Attribute sie erforderlich zu machen. Durch das Hinzufügen von checked Attributen wird außerdem ein Optionsfeld ausgewählt, das durch Standard ausgewählt wird. Sie können auch <label> mit for Attribut verwenden. Wenn das label angeklickt wird, wählt es ein Optionsfeld aus, auf das es sich id in seinem for Attribut bezieht.

Bearbeiten: Ich sah Ihren Kommentar, dass Sie Radio-Buttons wegen des Designs nicht verwenden möchten. Sie können die Optionsfelder ausblenden und einfach <label> mit for Attributen verwenden. Beispiel:

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