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);
Related
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 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.
I am trying to create a multi step form by getting questions and answer alternatives from a mysql database through php/ajax (No page reload is necessary). I do however seem to have problems submitting the data if a .php page generates all the divs(at least that is a theory as to why it won't work). The way I am trying to do it seems to work fine if I write it all directly in HTML, but that would not be dynamic and therefore useless for this particular task. Is it possible to create a form like psuedo-coded underneath?
<div>
<div id="stepone" class="section"> </div>
<div id="steptwo" class="section"> </div>
<div id="stepthree" class="section"> </div>
<div id="stepfour" class="section"> </div>
</div>
And then have a PHP site generate the input tags and assign it to the correct div, so that the divs are created in HTML/JS but the inputs like checkboxes and textareas are generated dynamically through PHP. I can't seem to think of a good way to do this?
Worth mentioning that this page is made in JQM (jQuery Mobile) so I think the different div-roles can appear problematic for this task.
A generated question in my PHP script will be something like this:
<form id="eval_form">
<h3>Hva tenkte du om møtet?</h3>
<fieldset data-role="controlgroup" data-type="vertical" data-mini="true" id="2">
<input type="checkbox" name="res[2][1]" id="2_1" value="1"><label for="2_1">asd1</label>
<input type="checkbox" name="res[2][2]" id="2_2" value="2"><label for="2_2">asd2</label>
<input type="checkbox" name="res[2][3]" id="2_3" value="3"><label for="2_3">asd3</label>
</fieldset>
<h3>Hva følte du om møtet?</h3>
<fieldset data-role="controlgroup" data-type="vertical" data-mini="true" id="3">
<input type="checkbox" name="res[3][1]" id="3_1" value="1"><label for="3_1">test1</label>
<input type="checkbox" name="res[3][2]" id="3_2" value="2"><label for="3_2">test2</label>
<input type="checkbox" name="res[3][3]" id="3_3" value="3"><label for="3_3">test3</label>
<input type="checkbox" name="res[3][4]" id="3_4" value="4"><label for="3_4">test4</label>
</fieldset>
<input type="button" id="submit" value="Submit" class="submit-btn">
</form>
The code for my demo program looks like this, and it has no problems being posted:
<form id="eval_form">
<!-- STEP 1-->
<div data-role="content" id="form1" class="section">
<input type="text" name="answer[1]" placeholder="Write something..." class="required"></input><p/>
<input type="text" name="answer[2]" placeholder="Write something..." class="required"></input><p/>
<input type="button" name="next1" value="Next" id="next1" onClick="toggleVisibility('form2')" class="next-btn"/>
</div>
<!-- STEP 2-->
<div data-role="content" id="form2" class="section">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<input type="radio" name="answer[4]" id="1" value="1" class="required"/><label for="1">Value 1</label>
<input type="radio" name="answer[4]" id="2" value="2" class="required"/><label for="2">Value 2</label>
<input type="radio" name="answer[4]" id="3" value="3" class="required"/><label for="3">Value 3</label>
</fieldset>
<input type="button" id="back2" value="Back" onClick="toggleVisibility('form1')" class="back-btn">
<input type="button" name="next2" value="Next" id="next2" onClick="toggleVisibility('form3')" class="next-btn"/>
</div>
<!-- STEP 3-->
<div data-role="content" id="form3" class="section">
<fieldset data-role="controlgroup" data-type="vertical" data-mini="true" class="required">
<input type="checkbox" name="answer[5][1]" id="1" value="1"/><label for="1">Testie</label>
<input type="checkbox" name="answer[5][2]" id="2" value="2"/><label for="2">Testoe</label>
<input type="checkbox" name="answer[5][3]" id="3" value="3"/><label for="3">Tester</label>
</fieldset>
<input type="text" name="answer[3]" placeholder="Write something..." class="required"></input><p/>
<input type="button" id="back3" value="Back" class="back-btn" onClick="toggleVisibility('form2')">
<input type="button" id="submit" value="Submit" class="submit-btn"/>
</div>
</form>
Ajax function to send the data:
$(document).ready(function()
{
$("#submit").click(function()
{
var data_string = $('#eval_form').serialize();
$.ajax(
{
type:'POST',
url:'add.php',
data:data_string,
success:function(response)
{
$("#eval").html(response);
}
});
})
});
The way id do it is just have a single div to contain your steps
<div id="stepContainer" >
<input type="text" id="step1Input" />
</div>
Something like that.
The ajax query will take any elements within the step container and submit them appropriatley via GET/POST to your php/asp whatever page does your server logic. When it returns it can return some confirmation or the html required for the next step.
Once you have this returned html or built the new html in javascript based on the response from the server you can replace the contents of the stepContainer with the new html. This will then act as step 2.
You may want to have a hidden div or some counter in javascript to keep track of which is your current step.
It may even be wise to use json return from the server which can allow you to pass more information across (well more easily anyway), allowing you to have error messages, confirmations, html etc embedded in the single response.
I'm having an issue with radio buttons showing one div and hiding the rest. I have my code which I'll post below (tested and working in jsfiddle but not when I put it onto my page).
To give you an idea of what I'm after, I am making a registration page. The radio buttons will control a div that has the form placed inside it, so radio 1 checked, div 1 is selected, and the rest hidden and so on.
Here's my jquery:
<script type="text/javascript">
$('#accountchoice').change(function() {
if ($('#personalfan').attr('checked')) {
$('#personalfan1').show();
$('#soloartist1').hide();
$('#band1').hide();
$('#venue1').hide();
$('#business1').hide();
$('#service1').hide();
} else if ($('#soloartist').attr('checked')) {
$('#soloartist1').show();
$('#personalfan1').hide();
$('#band1').hide();
$('#venue1').hide();
$('#business1').hide();
$('#service1').hide();
} else if ($('#band').attr('checked')) {
$('#band1').show();
$('#personalfan1').hide();
$('#soloartist1').hide();
$('#venue1').hide();
$('#business1').hide();
$('#service1').hide();
} else if ($('#venue').attr('checked')) {
$('#venue1').show();
$('#personalfan1').hide();
$('#soloartist1').hide();
$('#band1').hide();
$('#business1').hide();
$('#service1').hide();
} else if ($('#business').attr('checked')) {
$('#business1').show();
$('#personalfan1').hide();
$('#soloartist1').hide();
$('#band1').hide();
$('#venue1').hide();
$('#service1').hide();
} else if ($('#service').attr('checked')) {
$('#service1').show();
$('#personalfan1').hide();
$('#soloartist1').hide();
$('#band1').hide();
$('#venue1').hide();
$('#business1').hide();
}
});
</script>
and here's the HTML
<body>
<?php include_once "header_template.php"; ?>
<div id="signupwrapper">
<div id="signupinner">
<h3 align="left"> GETSCENE REGISTRATION ! </h3>
<hr />
<div id="signup" style="border:thin; border-color:#666">
<h4 align="left">Please Choose One of The Following Account Types</h4>
<div id="accountswrapper">
<form id="accountchoice" name="accountchoice" method="post" action="">
<label for="radio">personal/fan</label>
<input type="radio" name="radio" id="personalfan" value="radio1" checked="checked" />
<label for="radio2">Solo artist</label>
<input type="radio" name="radio" id="soloartist" value="radio2" />
<label for="radio3">band</label>
<input type="radio" name="radio" id="band" value="radio3" />
<label for="radio4">venue</label>
<input type="radio" name="radio" id="venue" value="radio4" />
<label for="radio5">business</label>
<input type="radio" name="radio" id="business" value="radio5" />
<label for="radio6">service</label>
<input type="radio" name="radio" id="service" value="radio6" />
</form>
<hr />
<div id="personalfan1">1</div>
<div id="soloartist1">2</div>
<div id="band1">3</div>
<div id="venue1">4</div>
<div id="business1">5</div>
<div id="service1">6</div>
</div>
</div>
</div>
</div>
<?php include_once "footer_template.php"; ?>
</body>
Any help here will be really appreciated as I've been banging my head against this for hours.
This script
<script type="text/javascript">
$('#accountchoice').change(function() {
Will only work if it's at the end of your body tag. If it's in the head, it won't do anything, since the dom won't be ready when the script runs.
The easiest way to fix this is to put this code into a document.ready handler:
$(function() {
//this will run when the dom is ready
$('#accountchoice').change(function() {
});
You should be able to trim this code down and do it all in one shot by looking at the radio that's checked
var allDivs = ['venue1', 'personalfan1', 'soloartist1', 'band1', 'business1', 'service1'];
var radio = $("input[type='radio']:checked");
if (radio.length === 0)
return;
$('#' + allDivs.join(',#')).hide();
$("div#" + radio[0].id + "1").show();
You could restructure your HTML to make your life MUCH easier.
Here is an example:
<style type="text/css">
#account_types > div { display: none; }
</style>
<div id="signupwrapper">
<div id="signupinner">
<h3 align="left"> GETSCENE REGISTRATION ! </h3>
<hr />
<div id="signup" style="border:thin; border-color:#666">
<h4 align="left">Please Choose One of The Following Account Types</h4>
<div id="accountswrapper">
<form id="accountchoice" name="accountchoice" method="post" action="">
<label for="personalfan">personal/fan</label>
<input type="radio" name="radio" id="personalfan" value="radio1" checked="checked" />
<label for="soloartist">Solo artist</label>
<input type="radio" name="radio" id="soloartist" value="radio2" />
<label for="band">band</label>
<input type="radio" name="radio" id="band" value="radio3" />
<label for="venue">venue</label>
<input type="radio" name="radio" id="venue" value="radio4" />
<label for="business">business</label>
<input type="radio" name="radio" id="business" value="radio5" />
<label for="service">service</label>
<input type="radio" name="radio" id="service" value="radio6" />
</form>
<hr />
<div id="account_types">
<div class="personalfan">1</div>
<div class="soloartist">2</div>
<div class="band">3</div>
<div class="venue">4</div>
<div class="business">5</div>
<div class="service">6</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#accountchoice').change(function() {
var divToShow = $(this).find('input:checked').attr('id');
$('#account_types > div').each(function() {
if($(this).hasClass(divToShow)) { $(this).show(); }
else { $(this).hide();}
});
});
$('#accountchoice').trigger('change');
});
</script>
Now, if you'll take a note at the restructuring, you'll see a few things. First, the Divs that contained the different account types are inside a holding Div. You don't need to do that, but it makes it easier to isolate them. You could just as easily have given them all a similar class to accomplish the same task.
Secondly, they now have class names that are the same as their associated input ID. This makes it very easy to reference the exact one you are looking for, while still making it easy to touch the rest of them too. So now you can loop through the array of these elements, show() the Div that goes along with the selected radio, and hide() the ones that aren't. All in a few small steps.
This also makes it much easier to add new parts to your code. Otherwise, if you added a new section, you'd have to edit each if() statement you made, adding the new section to make sure it shows and hides properly.
This is where you can see some of the power of the DOM. Much simpler code, easier to maintain, and you can reuse it later on.
I also fixed the labels for you too.
Here is another example, though it does require a little change to HTML to make it neat/easy to manage.
HTML
// Added class "choice" to the radio inputs
<input type="radio" name="radio" id="venue" class="choice" value="radio4" />
<input type="radio" name="radio" id="business" class="choice" value="radio5" />
<input type="radio" name="radio" id="service" class="choice" value="radio6" />
<div class="account_types">
<div class="dynamic" id="venue1">
4</div>
<div class="dynamic" id="business1">
5</div>
<div class="dynamic" id="service1">
6</div>
</div>
SCRIPT
$('input.choice').click(function () {
var eleToShow = this.id + "1";
$('div', '.account_types').hide();
$('#' + eleToShow).show();
});
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;