I have many radio buttons with different name attribute and I am facing one problem. Every time I click on each radio button, I can select all. I am using the radio buttons for redirecting to other pages.
I don't want to have multiple selection just only one. I am using twitter bootstrap tabs for showing multiple content on one page just by switching the tabs if that has something to do with the prob. Can someone help me out?
php
<?php
if (isset($_POST['submit'])) {
if (isset($_POST['cleat']) && !empty($_POST['cleat'])) {
header("location: sporting_goods");
exit();
}
if (isset($_POST['cell']) && !empty($_POST['cell'])) {
header("location: cellphones");
exit();
}
}
?>
css
.radto{vertical-align:top;}
.sell_ali{display:inline-block;}
html
<form action="" method="post">
<div class="tabbable tabs-left" style="margin-bottom: 18px;">
<ul class="nav nav-tabs">
<li class="active">Electronics</li>
<li>Sporting Goods</li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane" id="tab2">
<div class="sell-ali">
<li><input type="radio" class="radto" name="camera"/> Cameras</li>
<li><input type="radio" class="radto" name="cell"/> Cell Phones</li>
<li><input type="radio" class="radto" name="cell_cover"/> Cell Phone Covers</li>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="sell-ali">
<li><input type="radio" class="radto" name="ball"> Balls</li>
<li><input type="radio" class="radto" name="cleat"> Cleats</li>
<li><input type="radio" class="radto" name="jersey"> Jersey</li>
</div>
</div>
</div>
<input type="submit" value="next" name="submit">
</form>
Give then the same name. That is how you create a radio button group.
Use the value for the piece of data that the user is picking from that group.
If you want to allow just one choice you should give them same name buddy. then set the value you want to send to server for each one.
Related
Hy all,
I am new programming on php. Basically in my school project I am sending to my navbar all the names of cities from my database as "city". Those cities are linked to a "name" that send to a respective webpage. For each city you can go for two different page by a toggle button, I mean if the button is on you go for namerent.php, if the button is off you go for name.php. As I see in my code when I click on the toggle button it is going to only one way.
<div class="navbar">
<ul>
<li class="current">Home</li>
<li><a>Location</a>
<ul>
<li><?php while($row2 = mysqli_fetch_array($result2) and $row3 = mysqli_fetch_array($result3)) {?><a href="<?php echo utf8_encode($row2["name"]);?>
Here when the togBtn changes it should set the correct end of the name of the webpage.
<?php if(isset($_POST['togBtn']) AND isset($_POST['on'])){echo "rent.php";}else{ echo ".php";}?>">
<?php echo utf8_encode($row3["city"]);?><?php }?></a></li>
</ul>
</li>
</ul>
</div>
Form for a Rounded switch
<form method="post" action="index.php">
<label class="switch">
<input type="checkbox" id="togBtn" class="togBtn" method="post">
<div class="slider round" id="btn">
<span class="on" name="on" id="on" value="on">rent</span>
<span class="off" name="off" id="off" value="off">sell</span>
</div>
</label>
</form>
If you are trying to Create A button to switch between 2 pages try this. No need for PHP with this.
Page1
<body>
<form method="post" action="page2.php">
<input type="submit" name="submit" value="rent">
</form>
sale page Content
</body>
Page2
<body>
<form method="post" action="page1.php">
<input type="submit" name="submitb" value="sale">
</form>
rent page content.
</body>
I've been trying to find a way to render the Submit button on a dynamic quiz useless until a user has selected an answer to every question. I could simply insert "required" before the answer's closing tags, but I have three different types of answers - including questions that require users to choose any number of checkboxes.
The solution appears to be a jQuery script that requires a selection for each question. But I can't get anything to work. I think maybe I'm just not getting my scripts properly associated with my form.
This is an example of my test code:
<div class="Answer">
<label class="Wide" for="q'.$QID.'-'.$Value.'"><div class="Radio"><input type="radio" name="q'.$QID.'[]" id="q'.$QID.'-'.$Value.'" value="'.$Value.'" style="display: none;"> '.$Value.'. '.$QA.'</div></label></div>
This is what the HTML looks like:
<li id="q7">
<div class="Question">Media that pretend to be opposed to the mainstream media are called...</div>
<div class="Answer">
<label class="Wide" for="q7-A"><div class="Radio"><input type="radio" name="q7[]" id="q7-A" value="A" style="display: none;"> A. alternative media</div></label></div>
<div class="Answer">
<label class="Wide" for="q7-B"><div class="Radio"><input type="radio" name="q7[]" id="q7-B" value="B" style="display: none;"> B. soapboxes</div></label></div>
<div class="Answer">
<label class="Wide" for="q7-C"><div class="Radio"><input type="radio" name="q7[]" id="q7-C" value="C" style="display: none;"> C. underground media</div></label></div>
<div class="Answer">
<label class="Wide" for="q7-D"><div class="Radio"><input type="radio" name="q7[]" id="q7-D" value="D" style="display: none;"> D. yellow journalism</div></label></div>
</li>
And this is the form that processes everything:
<div id="quiz2" rel="key" style="margin-top: 50px;">
<form action="grade.php" method="post" id="quiz">
<ol>
<li style="display: none;">
<?php
echo join ($Base, '');
?>
</li>
</ol>
<input type="hidden" name="PreviousURL" value="<?php echo $MyURL; ?>" id="url" />
<input type="hidden" name="user_token" value="<?php echo isset($_POST['user_token']) ? $_POST['user_token'] : '' ; ?>" />
<input type="submit" value="Submit Quiz" />
</form>
</div><!-- quiz-container -->
So what do I have to do to make the following jQuery work with the above? I changed the ID number to quiz, matching my form. I don't understand what "index" means, but I've tried replacing "value" with a number of variables. Nothing works.
<script>
var inputs = $('#quiz :input');
inputs.each(function(index, value) {
if ($(value).val() == '') { //check if the input is empty
//return the error
echo 'ERROR!';
}
});
</script>
Here's another script that looks interesting, but I don't know how to associate it with my form:
<script>
function checkInput() {
var inputs = $("input");
check = 0;
for (var i = 0; i < inputs.size(); i++) {
var iVal = $(inputs[i]).val();
if (iVal !== '' && iVal !== null) {
$(inputs[i]).removeClass('input-error');
} else {
$(inputs[i]).addClass('input-error');
$(inputs[i]).focus(function() {
$("input").removeClass('input-error');
$(inputs[i]).off('focus');
});
check++;
}
}
if (check > 0) {
return false;
} else {
return true;
}
}
checkInput()
</script>
I've been playing with both scripts, manipulating various variables, but every time I click the Submit button without answering a question, it forwards me to the next page.
I want to check all the check boxes which are in div tag
My code is as below.
<div id="cBoxes">
<li><input class="radio" name="list" id="list" type="checkbox"
value="<?php echo $resultPages['id'];?>"></li>
</div>
I have put this whole code in for loop with php tag.
Is there any way to accomplish this task.
Set the checked attribute of checkbox. w3.org has complete documentation.
See the checked attribute:
<div id="cBoxes">
<ul>
<li><input class="radio" name="list" id="list" type="checkbox"
value="<?php echo $resultPages['id'];?>" checked="checked"/></li>
</ul>
</div>
I've created a option list with radio buttons and it looks like this:
<div class="option_list" style="width:150px; display:none; margin-top:0px;">
<form id="formSales">
<ul>
<li><input type="radio" value="2012" name="YEAR" /></li>
<li><input type="radio" value="2011" name="YEAR" /></li>
<li><input type="radio" value="2010" name="YEAR" /></li>
<li><input type="radio" value="2009" name="YEAR" /></li>
</ul>
<input type="hidden" value="1" name="SALES" />
</form>
</div>
<div class="table_content_results">
<div class="results"></div>
</div>
With jquery I post the form and I want to get that result in the div with the class results
underneath the div with class option_list
$(".option_list ul li").click(function() {
$.ajax({
type: "POST",
url: "data.php",
data: $(this).parent('form').serialize(),
complete: function(data) {
$(this).siblings('.results').html(data.responseText);
}
});
$(this).parent(".option_list").slideToggle(200);
var value = $('input[name="YEAR"]:checked').val();
$("#yearValue").text(value);
});
I use the class in jQuery because i want to duplicate the same option_list for another form on the same page.
The problem is to get the results of data.php in the div with class results.
I hope somebody has an answer for me.
Thanks in advance!
Change
$(this).siblings('.results').html(data.responseText);
to
$(this).parents('div').next().children('.results').html(data.responseText);
$(this) is a li so you need to find the parent div before finding the next child with the class results
Cut down version - but working example -> http://jsfiddle.net/bFHJc/
Updated
Following discussions in chat it seems the markup in the question was incorrect .. here is the full markup :
<div class="table_settings">
<div class="stats_options" style="width:130px;">
<div style="float:left">Boekjaar: <span id="getYearPurchase">2012</span></div>
<div style="float:right; margin-top:11px;"></div>
<div class="clear"></div>
</div>
<div class="option_list" style="width:150px; margin-top:0px;">
<form id="formSales">
<ul>
<li>one</li>
<li>two</li>
</ul>
<input type="hidden" value="1" name="SALES" />
</form>
</div>
</div>
<div class="table_content_results">
<div class="results"></div>
</div>
And this is the JavaScript 'locator' used to post to the results div:
$(this).parents('.table_settings').siblings('.table_content_results').children('.results').html();
Here is an example -> http://jsfiddle.net/9YWmW/3/
Try this:
$(this).siblings('.results').html(data);
instead of
$(this).siblings('.results').html(data.responseText);
in jquery you need not write responseText,It is needed in javascript ajax
or you can just write
$('div.results').html(data);
i'm trying to do a poll but i designed it without any radio box in it. So i decided to make the selection being highlighted with a different background color, all is done with jquery.
I set the display of the radio box to none so that it wouldn't show, gave each a unique ID. Here's the script.
<form action="v_poll.php" method="post">
<ul class="voting">
<li class="voting votetext"><input type="radio" name="voting" value="a1" style="display:none;" id="a1"><a onClick="vote('a1')"Answer 1</a></li>
<li class="voting votetext"><input type="radio" name="voting" value="a2" style="display:none;" id="a2"><a onClick="vote('a2')">Answer 2</a></li>
<li class="voting votetext"><input type="radio" name="voting" value="a3" style="display:none;" id="a3"><a onClick="vote('a3')">Answer 3</a></li>
<input type="hidden" value="1" name="id" />
<input type="submit" value="submit">
</ul>
</form>
<script type="text/javascript">
function vote(TheValue) {
GetElementById(TheValue).checked=true;
}
</script>
But when i checked the value of the radio box with $_POST['voting'], it is blank. Not the value assigned to the radio box. Anything i'm doing wrong?
Please help. Thanks.
You can do this without javascript as well, using a <label> with for="id" instead of <a>, like this:
<li class="voting votetext">
<input type="radio" name="voting" value="a1" style="display:none;" id="a1">
<label for="a1">Answer 1</label>
</li>
This is nothing new/HTML5 or anything, any browser IE6+, and probably older will support this.
GetElementById(TheValue).checked=true;
should instead be:
document.getElementById(TheValue).checked=true;