Menu
Why do my radio buttons not work? I must press to the left of the button to select it. Why?
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>jQuery Validation Error Placement for Semantic-UI</title>
<link href="/static/css/generic_in.css?newsvgindia.393932601812558191" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"
type="text/css">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Customer Service</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right" enctype="application/x-www-form-urlencoded"
action="/account/do_login" method="post">
<div class="form-group">
<input type="text" name="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" name="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="center jumbotron">
<div class="container" style="margin-top:20px; width: 75%">
<!--
<div class="ui grid">
<div class="row">
<div class="twelve wide column">
<div class="ui menu">
<a class="item" href="/">
HOME
</a>
<a class="header item" style="color:black;;font-size:14px;" href="/ai">
INSERT AD
</a>
<a class="item" style="color:black;;font-size:14px;"
href="/">
SEARCH FOR ADS
</a>
<a class="item" style="color:black;;font-size:14px;" href="/customer_service.htm">
CUSTOMER
SERVICE</a>
</div>
<div class="ui ignored positive icon message">
<i class="edit icon"></i>
<div class="content">
<h3 class="header">Insert Ad</h3>
Your ad will be reviewed according to the rules of our site. After approval, it will be
published
for a period
of 60 days. Thanks for using our site!
</div>
</div>
</div>
</div>
</div>
-->
<div class="ui text container">
<div class="ui menu">
<a class="item" href="/">
HOME
</a>
<a class="header item" style="color:black;;font-size:14px;" href="/ai">
INSERT AD
</a>
<a class="item" style="color:black;;font-size:14px;"
href="/">
SEARCH FOR ADS
</a>
<a class="item" style="color:black;;font-size:14px;" href="/customer_service.htm">
CUSTOMER
SERVICE</a>
</div>
<div class="ui ignored positive icon message">
<i class="edit icon"></i>
<div class="content">
<h3 class="header">Insert Ad</h3>
Your ad will be reviewed according to the rules of our site. After approval, it will be
published
for a period
of 60 days. Thanks for using our site!
</div>
</div>
<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgIYJDA" name="formular" class="ui form">
<div class="ui grid">
<div class="four wide column required field">
<label>Type</label>
</div>
<div class="twelve wide column">
<div class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="c_ad" name="company_ad" value="0">
<label>Private</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="c_ad2" name="company_ad" value="1">
<label>Company</label>
</div>
</div>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Email</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Email">
</div>
</div>
<div class="ui grid">
<div class="four wide column">
<label>Phone</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column">
</div>
<div class="twelve wide column">
<div class="ui checkbox">
<input id="example-id" type="checkbox" checked>
<label for="example-id">Display my phone number on site</label>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Place</label>
</div>
<div class="twelve wide column">
<select class="ui dropdown"
onchange="cities(this);document.getElementById('area').display='';"
name="region" id="region">
<option value="">«Choose state»</option>
<option value="7089183">
Alabama
</option>
</select>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<div class="required field">
<label>City</label>
</div>
</div>
<div class="twelve wide column">
<div id="cities" class="column field">
<select class="ui dropdown"
onchange="cities(this);document.getElementById('area').display='';"
name="region" id="region">
<option value="">«Choose city»</option>
</select>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Category</label>
</div>
<div class="twelve wide column">
<select class="ui dropdown" name="category_group" id="category_group" sel_id="">
<option value="0" selected="selected">«All categories
»
</option>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Type</label>
</div>
<div class="twelve wide column">
<div id="type_container" class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" checked="checked">
<label>For sale</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>Wanted</label>
</div>
</div>
</div>
</div>
</div>
<div class="ui grid" id="category_contents">
<div class="four wide column required field">
<label>Title</label>
</div>
<div class="twelve wide column">
<input type="text" name="title" placeholder="Last Name">
</div>
<div class="four wide column required field">
<label><label for="text">Ad text</label></label>
</div>
<div class="twelve wide column">
<textarea cols="45" id="text" name="text" placeholder="Please describe the product or service in a few simple sentences" rows="10"></textarea>
</div>
<div class="four wide column ">
<label> Price</label>
</div>
<div class="twelve wide column">
<div class="input-group">
<span class="input-group-addon">
Rs
</span>
<input type="text" name="price" class="form-control"
aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.
00</span>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image1" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image2a" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image3" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image4" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image5" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Terms</label>
</div>
<div class="twelve wide column">
<div class="ui checkbox">
<input id="terms" type="checkbox" checked>
<label for="terms">I agree to the Terms and Conditions</label>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
</div>
<div class="twelve wide column">
<div class="ui error message"></div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
</div>
<div class="twelve wide column">
<div id="loading" class="progressBar">
<div class="ui active inline loader"></div>
Waiting for response<span id="loading_dots"></span></div>
<button name="validate" type="submit" class="btn btn-success btn-lg"
onclick="showProgressBar();">
Continue
</button>
</div>
</div>
<!-- <button class="ui button" type="submit">Submit</button> -->
</form>
</div>
v>
</body>
</html>
894
Your radio buttons do not work as you have hidden the radios to use a label as a styled radio button. In order for these to work, you need to associate the label with the radio it is for by doing the following:
<label for="id_of_radio">text</label>
so in the example of the private radio button, you would change your label to be:
<label for="c_ad">Private</label>
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>jQuery Validation Error Placement for Semantic-UI</title>
<link href="/static/css/generic_in.css?newsvgindia.393932601812558191" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Customer Service</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right" enctype="application/x-www-form-urlencoded" action="/account/do_login" method="post">
<div class="form-group">
<input type="text" name="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" name="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="center jumbotron">
<div class="container" style="margin-top:20px; width: 75%">
<!--
<div class="ui grid">
<div class="row">
<div class="twelve wide column">
<div class="ui menu">
<a class="item" href="/">
HOME
</a>
<a class="header item" style="color:black;;font-size:14px;" href="/ai">
INSERT AD
</a>
<a class="item" style="color:black;;font-size:14px;"
href="/">
SEARCH FOR ADS
</a>
<a class="item" style="color:black;;font-size:14px;" href="/customer_service.htm">
CUSTOMER
SERVICE</a>
</div>
<div class="ui ignored positive icon message">
<i class="edit icon"></i>
<div class="content">
<h3 class="header">Insert Ad</h3>
Your ad will be reviewed according to the rules of our site. After approval, it will be
published
for a period
of 60 days. Thanks for using our site!
</div>
</div>
</div>
</div>
</div>
-->
<div class="ui text container">
<div class="ui menu">
<a class="item" href="/">
HOME
</a>
<a class="header item" style="color:black;;font-size:14px;" href="/ai">
INSERT AD
</a>
<a class="item" style="color:black;;font-size:14px;" href="/">
SEARCH FOR ADS
</a>
<a class="item" style="color:black;;font-size:14px;" href="/customer_service.htm">
CUSTOMER
SERVICE</a>
</div>
<div class="ui ignored positive icon message">
<i class="edit icon"></i>
<div class="content">
<h3 class="header">Insert Ad</h3>
Your ad will be reviewed according to the rules of our site. After approval, it will be published for a period of 60 days. Thanks for using our site!
</div>
</div>
<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgIYJDA" name="formular" class="ui form">
<div class="ui grid">
<div class="four wide column required field">
<label>Type</label>
</div>
<div class="twelve wide column">
<div class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="c_ad" name="company_ad" value="0">
<label for="c_ad">Private</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="c_ad2" name="company_ad" value="1">
<label for="c_ad2">Company</label>
</div>
</div>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Email</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Email">
</div>
</div>
<div class="ui grid">
<div class="four wide column">
<label>Phone</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column">
</div>
<div class="twelve wide column">
<div class="ui checkbox">
<input id="example-id" type="checkbox" checked>
<label for="example-id">Display my phone number on site</label>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Place</label>
</div>
<div class="twelve wide column">
<select class="ui dropdown" onchange="cities(this);document.getElementById('area').display='';" name="region" id="region">
<option value="">«Choose state»</option>
<option value="7089183">
Alabama
</option>
</select>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<div class="required field">
<label>City</label>
</div>
</div>
<div class="twelve wide column">
<div id="cities" class="column field">
<select class="ui dropdown" onchange="cities(this);document.getElementById('area').display='';" name="region" id="region">
<option value="">«Choose city»</option>
</select>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Category</label>
</div>
<div class="twelve wide column">
<select class="ui dropdown" name="category_group" id="category_group" sel_id="">
<option value="0" selected="selected">«All categories »
</option>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Type</label>
</div>
<div class="twelve wide column">
<div id="type_container" class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" checked="checked">
<label>For sale</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>Wanted</label>
</div>
</div>
</div>
</div>
</div>
<div class="ui grid" id="category_contents">
<div class="four wide column required field">
<label>Title</label>
</div>
<div class="twelve wide column">
<input type="text" name="title" placeholder="Last Name">
</div>
<div class="four wide column required field">
<label>
<label for="text">Ad text</label>
</label>
</div>
<div class="twelve wide column">
<textarea cols="45" id="text" name="text" placeholder="Please describe the product or service in a few simple sentences" rows="10"></textarea>
</div>
<div class="four wide column ">
<label>Price</label>
</div>
<div class="twelve wide column">
<div class="input-group">
<span class="input-group-addon">
Rs
</span>
<input type="text" name="price" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.
00</span>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image1" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image2a" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image3" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image4" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image5" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Terms</label>
</div>
<div class="twelve wide column">
<div class="ui checkbox">
<input id="terms" type="checkbox" checked>
<label for="terms">I agree to the Terms and Conditions</label>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
</div>
<div class="twelve wide column">
<div class="ui error message"></div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
</div>
<div class="twelve wide column">
<div id="loading" class="progressBar">
<div class="ui active inline loader"></div>
Waiting for response<span id="loading_dots"></span>
</div>
<button name="validate" type="submit" class="btn btn-success btn-lg" onclick="showProgressBar();">
Continue
</button>
</div>
</div>
<!-- <button class="ui button" type="submit">Submit</button> -->
</form>
</div>
v>
</body>
</html>If you do this with all your labels (associate them to their corresponding inputs) it will mean when you click on the label, it will focus on the input
146
Your markup for the radio buttons seems off. You should try this:
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
More examples here: http://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
