CODEWITHSUNDEEP
javascriptphphtmlcss
sandy sharma
sandy sharma

Reputation: 101

how to put form text exactly in front of radio button

I want to put 'email me' & 'call me' text exactly in front radio button. In code it comes under radio button. Can anybody suggest me how to do this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
$('#emailbtn').on('click',function(){


    if($('#callbtn').prop('checked'))
       {
       $('#callbtn').prop('checked','');       
       }
});


$('#callbtn').on('click',function(){


    if($('#emailbtn').prop('checked'))
       {
       $('#emailbtn').prop('checked','');       
       }
});
</script>
</head>

html code is

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form name="form1" method="post" style="padding-left:8%;">
    <input type="radio" value="email" name="select" id="emailbtn" onclick="showemail()" />
Email me :<span id="emailhide" style="display:none"><input type="text" size="50" name="email" id="email_id" placeholder="*************" /><input type="submit" name="email" value="email" id="emailbtn" style="font-size:16px;" onclick="return validation1()" /></span>
<span id="emailid"></span>
</form>
<form name="form2" method="post" style="padding-left:8%;">   
    <input type="radio" value="call" name="select" id="callbtn" onclick="showphn()" />
Call Me :<span id="phonehide" style="display:none"><input type="text" size="50" name="phn" id="call" placeholder="*************" /><input type="submit" name="submit" value="call" id="callbtn" onclick="return validation2()" /></span>
<span id="phoneno"></span>
</form>
<input type="radio" value="chat" name="select" id="chatbtn" onclick="showchat()" />
Chat with me<span id="chathide"><a href="valency-networks-chat.html"><input style="display:none" type="submit" name="chat" id="chat" value="Go"/></a></span>

Upvotes: 1

Views: 1366

Answers (2)

Dhaval
Dhaval

Reputation: 2379

$(document).on('ready',function(){$('#emailbtn').on('click',function(){
 

    if($('#callbtn').prop('checked'))
       {
       $('#callbtn').prop('checked','');       
       }
});


$('#callbtn').on('click',function(){


    if($('#emailbtn').prop('checked'))
       {
       $('#emailbtn').prop('checked','');       
       }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form name="form1" method="post" style="padding-left:8%;">
    <input type="radio" value="email" name="select" id="emailbtn" onclick="showemail()" />
Email me :<span id="emailhide" style="display:none"><input type="text" size="50" name="email" id="email_id" placeholder="*************" /><input type="submit" name="email" value="email" id="emailbtn" style="font-size:16px;" onclick="return validation1()" /></span>
<span id="emailid"></span></form>

<form name="form2" method="post" style="padding-left:8%;">   
    <input type="radio" value="call" name="select" id="callbtn" onclick="showphn()" />
Call Me :<span id="phonehide" style="display:none"><input type="text" size="50" name="phn" id="call" placeholder="*************" /><input type="submit" name="submit" value="call" id="callbtn" onclick="return validation2()" /></span>
<span id="phoneno"></span>
</form>

Upvotes: 0

Aditya
Aditya

Reputation: 1261

Add the radio buttons in the forms: FIDDLE

<form name="form1" method="post" style="padding-left:8%;">
    <input type="radio" value="email" name="select" id="emailbtn" onclick="showemail()" />Email me :<span id="emailhide" style="display:none">
    <input type="text" size="50" name="email" id="email_id" placeholder="*************" />
    <input type="submit" name="email" value="email" id="emailbtn" style="font-size:16px;" onclick="return validation1()" />
    <span id="emailid"></span>
</form>

<form name="form2" method="post" style="padding-left:8%;">
    <input type="radio" value="call" name="select" id="callbtn" onclick="showphn()" />Call Me :<span id="phonehide" style="display:none">
    <input type="text" size="50" name="phn" id="call" placeholder="*************" />
    <input type="submit" name="submit" value="call" id="callbtn" onclick="return validation2()" />
    <span id="phoneno"></span>
</form>

Upvotes: 1

Related Questions