Milica Pavlovic Milica Pavlovic - 3 years ago 131
HTML Question

How to make one of three inputs type button requierd required

My problem is that I have one form with some fields and three inputs type button, they all represents one message. I want to make chooseing one of three messages required. My code is bellow:

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


Do you have any idea how can I solve this kind of problem?

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

I think you might want to use <input type="radio" /> instead. Example:

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

You can add required attributes to make them required. Also, adding checked attributes will make a radio button selected by default.

You can also use <label> with for attribute. When that label is clicked, it selects a radio button that it refers to by id in its for attribute.

Edit: I saw your comment that you don't want to use radio buttons because of the design. You can actually hide the radio buttons, and just use <label> with for attributes. Example:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download