I have this span that is in a loop and produce multiple results.
what I want is the attribute recordID value when its checked
<span id="row" index="<?php print $i; ?>" recordID="<?php print $row->ID; ?>" Color="<?php print $row->Color; ?>">
<input type="checkbox" style="left:10;" />
</span>
I am using this in my js file to check if the checkbox was clicked
var test = $('input:checkbox:checked').val();
alert(test);
And all I get is on
how can I get attribute value
Thanks
This will get you the attribute value
$('#row').attr('recordID');
If you wanted to get the value when the checkbox gets checked, here is an example
js file
$(document).ready(function(){
$('input:checkbox').change(function(){
if($(this).attr('checked')){
alert($(this).parent().attr('recordID'));
}
});
});
To see how many rows have been checked:
JavaScript
$(document).ready(function(){
$('#check').click(function(event){
event.preventDefault();
alert($('input:checkbox:checked').size());
});
});
HTML
<span id="row1" recordID="1">
<input type="checkbox" style="left:10;" />
<input type="checkbox" style="left:10;" />
<input type="checkbox" style="left:10;" />
<input type="checkbox" style="left:10;" />
</span>
<span id="row2" recordID="2">
<input type="checkbox" style="left:10;" />
</span>
<span id="row3" recordID="3">
<input type="checkbox" style="left:10;" />
</span>
<span id="row4" recordID="4">
<input type="checkbox" style="left:10;" />
</span>
<button id='check'>Check Num Rows</button>
To check within an individual span
$(document).ready(function(){
$('#check').click(function(event){
event.preventDefault();
alert($('#row1 input:checkbox:checked').size());
});
});
Here is the complete sample code i am using to make the example you need
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('input:checkbox').change(function(){
alert($(this).parent().find(':checkbox:checked').size());
});
});
</script>
</head>
<body>
<span id="row1" recordID="1">
<input type="checkbox" style="left:10;" />
<input type="checkbox" style="left:10;" />
<input type="checkbox" style="left:10;" />
</span><br/><br/>
<span id="row2" recordID="2">
<input type="checkbox" style="left:10;" />
<input type="checkbox" style="left:10;" />
<input type="checkbox" style="left:10;" />
<input type="checkbox" style="left:10;" />
</span><br/><br/>
<span id="row3" recordID="3">
<input type="checkbox" style="left:10;" />
<input type="checkbox" style="left:10;" />
<input type="checkbox" style="left:10;" />
<input type="checkbox" style="left:10;" />
</span><br/><br/>
<span id="row4" recordID="4">
<input type="checkbox" style="left:10;" />
<input type="checkbox" style="left:10;" />
<input type="checkbox" style="left:10;" />
<input type="checkbox" style="left:10;" />
</span>
</body>
</html>
Related
I am working on a PHP Quiz System which displays all questions on one page.
The following is my code.
PHP
$getQ = mysqli_query($condb, "select * from questions where eid = '$exam'");
if($getQ){
if(mysqli_num_rows($getQ)==0){
$summaryLink = 'examSummary.php?exam='.$exam;
redirect($summaryLink);
}
Form
<?php while($ans = mysqli_fetch_array($getQ)){ ?>
<div class="ques" id="ques">
<input type="hidden" name="exam" value="<?php echo $exam; ?>">
<input type="hidden" name="question" value="<?php echo $token; ?>">
<input type="hidden" name="qid" id="qid" value="<?php echo $ans['qid'];?>">
<input type="hidden" name="sid" id="sid" value="<?php echo $_SESSION['sid']; ?>">
<p>
<input type="radio" name="answer" value="1" id="answer" onChange="update();">
<label for="<?php echo $ans['option_1'];?>"><?php echo $ans['option_1'];?></label>
</p>
<p>
<input type="radio" name="answer" value="2" id="answer" onChange="update();">
<label for="<?php echo $ans['option_2'];?>"><?php echo $ans['option_2'];?></label>
</p>
<p>
<input type="radio" name="answer" value="3" id="answer" onChange="update();">
<label for="<?php echo $ans['option_3'];?>"><?php echo $ans['option_3'];?></label>
</p>
<p>
<input type="radio" name="answer" value="4" id="answer" onChange="update();">
<label for="<?php echo $ans['option_4'];?>"><?php echo $ans['option_4'];?></label>
</p>
<p>
<input type="radio" name="answer" value="5" id="answer" onChange="update();">
<label for="<?php echo $ans['option_5'];?>"><?php echo $ans['option_5'];?></label>
</p>
<div class="status2"></div>
What I want to do is, once the user select an answer for a questions, the selected option and few other hidden form data (qid, eid, sid) should be passed to updateAnswer.php
updateAnswer.php will update the selected answer to the database.
I tired the following jQuery. But it wont do anything.
<script>
function update() {
var radVal = $("input[type=radio][name=answer]:checked").val();
jQuery.ajax({
url: "updateAnswer.php",
data:'eid='+$("#eid").val()+'&sid='+$("#sid").val()+'&qid='+$("#qid").val()+'&answer='+$(radVal).val(),
type: "POST",
success:function(data){
$(".status2").html(data);
},
error:function (){}
});
}
</script>
The system should pass data to updateAnswer.php when a user clicks on an option(answer).
But with my current code, when a user clicks on an option won't do anything.
So, there are some mistakes in your code, first one is that the id should always be unique, so before your while loop take a variable and initialize it to zero and increment it on every iteration; You can use this variable and append after every id to make it unique. Like so -
<?php
$i = 0;
while(bla bla){
$i++;
?>
<!-- You can also use question id here ↓↓ which should be unique -->
<input type="hidden" name="qid" id="<?php echo "qid".$i; ?>" value="<?php echo $ans['qid'];?>">
<!-- session id will be the same -->
<input type="hidden" name="sid" id="sid" value="<?php echo $_SESSION['sid']; ?>">
<!-- same for others -->
<?php
}
?>
You also need to give this($i or question-id(whichever you choose)) as an attribute to radio buttons to identify which question id we need to get and on update function you need to pass the current checked element, like so -
<input type="radio" name="answer" value="1" class="answer" onChange="update(this);" data-id="<?php echo $i; ?>">
<input type="radio" name="answer" value="2" class="answer" onChange="update(this);" data-id="<?php echo $i; ?>">
<!-- same for others -->
I've created a working snippet for your problem(without PHP and AJAX of course). I've given them unique id and values, I'm printing the desired values on the console. I've changed the AJAX code as well, you can use it in your code to check if it works. Comments are mentioned wherever necessary, see if it helps you.
function update(element) {
let answer = $(element).val(); // get the value of checked element
let id = $(element).attr('data-id'); // get id of the radio button clicked
let eid = $('#eid').val(); // exam id will be same for all the questions
let sid = $('#sid').val(); // session id will be same
let qid = $('#qid' + id).val(); // get question id
// send ajax request
/*jQuery.ajax({
url: "updateAnswer.php",
data: 'eid=' + eid + '&sid=' + sid + '&qid=' + qid + '&answer=' + answer,
type: "POST",
success: function(data) {
$('#status' + id).html(data); // show status on the related div
},
error: function() {}
});*/
console.clear();
console.log(`id: ${id}, eid: ${eid}, sid: ${sid}, qid: ${qid}`)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ques" id="ques1">
<input type="hidden" name="exam" value="some_exam" id="some_exam">
<input type="hidden" name="eid" value="some_examid" id="eid">
<!-- question id 1 (use php) -->
<input type="hidden" name="question" id="question1" value="question1">
<input type="hidden" name="qid" id="qid1" value="qid1">
<input type="hidden" name="sid" id="sid" value="some_session">
<p>
<!-- Give question id in data-id attribute (use php) and pass current element in update function -->
<input type="radio" name="answer" value="1" class="answer" onChange="update(this);" data-id="1">
<label>option_1_1</label>
</p>
<p>
<input type="radio" name="answer" value="2" class="answer" onChange="update(this);" data-id="1">
<label>option_1_2</label>
</p>
<p>
<input type="radio" name="answer" value="3" class="answer" onChange="update(this);" data-id="1">
<label>option_1_3</label>
</p>
<p>
<input type="radio" name="answer" value="4" class="answer" onChange="update(this);" data-id="1">
<label>option_1_4</label>
</p>
<p>
<input type="radio" name="answer" value="5" class="answer" onChange="update(this);" data-id="1">
<label>option_1_5</label>
</p>
<div class="status2" id="status1"></div>
---------------------------------------
<!-- Second question starts (incremet i)-->
---------------------------------------
<div class="ques" id="ques2">
<input type="hidden" name="exam" value="some_exam" id="some_exam">
<input type="hidden" name="eid" value="some_examid" id="eid">
<input type="hidden" name="question" id="question2" value="question1">
<input type="hidden" name="qid" id="qid2" value="qid2">
<input type="hidden" name="sid" id="sid" value="some_session">
<p>
<input type="radio" name="answer" value="option_2_1" class="answer" onChange="update(this);" data-id="2">
<label>option_2_1</label>
</p>
<p>
<input type="radio" name="answer" value="2" class="answer" onChange="update(this);" data-id="2">
<label>option_2_2</label>
</p>
<p>
<input type="radio" name="answer" value="3" class="answer" onChange="update(this);" data-id="2">
<label>option_2_3</label>
</p>
<p>
<input type="radio" name="answer" value="4" class="answer" onChange="update(this);" data-id="2">
<label>option_2_4</label>
</p>
<p>
<input type="radio" name="answer" value="5" class="answer" onChange="update(this);" data-id="2">
<label>option_2_5</label>
</p>
<div class="status2" id="status2"></div>
I have an input type=checkbox that contains id from 1-10. I need to select some check boxes and when I click on a particular click event I need to store all checkboxes values (1-0/ checked-not checked) and ids in 2d array and send to php page using ajax.
<input type="checkbox" id='1' name="ppackages" class="success">
var popularpackages = [];
$("input:checkbox").each(function(){
var $this = $(this);
popularpackages.push($this.attr("id"));
});
alert(popularpackages);
The output is 1,2,3,4,5,6,7,8,9,10
But I need as (id,checked/not checked)
(1,1),(2,0),.....(10,0)
To achieve this you can use map() to build the array, then return the id and checked properties as a sub array, like this:
var popularpackages = $("input:checkbox").map(function() {
return [[parseInt(this.id, 10), this.checked ? 1 : 0]];
}).get();
console.log(popularpackages);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="1" name="ppackages" class="success" checked="checked" />
<input type="checkbox" id="2" name="ppackages" class="success" />
<input type="checkbox" id="3" name="ppackages" class="success" />
<input type="checkbox" id="4" name="ppackages" class="success" />
<input type="checkbox" id="5" name="ppackages" class="success" checked="checked" />
<input type="checkbox" id="6" name="ppackages" class="success" />
<input type="checkbox" id="7" name="ppackages" class="success" />
<input type="checkbox" id="8" name="ppackages" class="success" />
<input type="checkbox" id="9" name="ppackages" class="success" checked="checked" />
<input type="checkbox" id="10" name="ppackages" class="success" />
You can then send the popularpackages array to your PHP logic using $.ajax, or any of jQuery's other AJAX methods, as you normally would.
I am a beginner in PHP. So I am working on a small task in which I want to make a form in which there are MCQS and there is a countdown timer above it of 10 minutes. When the count down timer is up the form should expire and should show the result automatically.
I have made the form as coded below but I don't know what to do so that I can add timer in this code so that the form expires and shows the result of the right selected answers.
<html>
<head>
<title>PHP Quiz</title>
</head>
<body>
<div id="page-wrap">
<h1>Final Quiz for Lip building</h1>
<form action="quiz.php" method="post" id="quiz">
<ol>
<li>
<h3>CSS Stands for...</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" />
<label for="question-1-answers-A">A) Computer Styled Sections </label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" />
<label for="question-1-answers-B">B) Cascading Style Sheets</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" />
<label for="question-1-answers-C">C) Crazy Solid Shapes</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" />
<label for="question-1-answers-D">D) None of the above</label>
</div>
</li>
<li>
<h3>Internet Explorer 6 was released in...</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A" />
<label for="question-2-answers-A">A) 2001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B" />
<label for="question-2-answers-B">B) 1998</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C" />
<label for="question-2-answers-C">C) 2006</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D" />
<label for="question-2-answers-D">D) 2003</label>
</div>
</li>
<li>
<h3>SEO Stand for...</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A" />
<label for="question-3-answers-A">A) Secret Enterprise Organizations</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B" />
<label for="question-3-answers-B">B) Special Endowment Opportunity</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-C" value="C" />
<label for="question-3-answers-C">C) Search Engine Optimization</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-D" value="D" />
<label for="question-3-answers-D">D) Seals End Olives</label>
</div>
</li>
</ol>
<input type="submit" value="Submit Quiz" />
</form>
</div>
</body>
</html>
You need JavaScript for such behavior, let's say you use the following JS:
window.setTimeout(function() {
document.forms['form_name'].submit();
}, 2000);
form_name should be the name of your form. i.e
<form name = "form_name" ... >
</form>
This will delay the post in milliseconds (2 seconds) and then it should take you to another page where you can show the correct answers.
Fiddle
I am creating an html form that contains multiple checkboxes...
Here is my code
Form
<form enctype="multipart/form-data" action="processstart.php" method="post" class="wpcf7-form">
<div class="form-row">
<span class="label--input-group">Services you require</span>
<span class="wpcf7-form-control-wrap services">
<span class="wpcf7-form-control wpcf7-checkbox check-group-input">
<span class="wpcf7-list-item">
<label>
<input type="checkbox" name="services[]" value="Branding" /> <span class="wpcf7-list-item-label">Branding</span>
</label>
</span>
<span class="wpcf7-list-item">
<label>
<input type="checkbox" name="services[]" value="Design" /> <span class="wpcf7-list-item-label">Design</span>
</label>
</span>
<span class="wpcf7-list-item">
<label>
<input type="checkbox" name="services[]" value="Other" /> <span class="wpcf7-list-item-label">Other</span>
</label>
</span>
<span class="wpcf7-list-item">
<label>
<input type="checkbox" name="services[]" value="Development" /> <span class="wpcf7-list-item-label">Development</span>
</label>
</span>
<span class="wpcf7-list-item">
<label>
<input type="checkbox" name="services[]" value="Illustration" /> <span class="wpcf7-list-item-label">Illustration</span>
</label>
</span>
</span>
</span>
</div>
</form>
Here is processstart.php
<?php
if(isset($_POST['services'])) {
foreach($_POST['services'] as $services) {
echo $services;
}
}
?>
Now nothing is getting echoed...I have tried var_dump(get_defined_vars()); and every other variable is defined except these checkboxes. Not even showing "null" there. What is going wrong?
You have missed to close <form> tag and add submit button
<input type="submit" name="submit" value="submit">
</form>
try i have action on same file but you can change action values will be appear after any checkbox is checked else you can't get checkbox values
On your form not any close <form> tag and not submit form action like button or submit button
<?php if(isset($_POST['services']))
{
foreach($_POST['services'] as $services)
{
echo $services;
}
}?>
<html>
<body>
<form enctype="multipart/form-data" action="" method="post" class="wpcf7-form">
<div class="form-row"><span class="label--input-group">Services you require</span><span class="wpcf7-form-control-wrap services"><span class="wpcf7-form-control wpcf7-checkbox check-group-input"><span class="wpcf7-list-item">
<label>
<input type="checkbox" name="services[]" value="Branding" />
<span class="wpcf7-list-item-label">Branding</span></label>
</span><span class="wpcf7-list-item">
<label>
<input type="checkbox" name="services[]" value="Design" />
<span class="wpcf7-list-item-label">Design</span></label>
</span><span class="wpcf7-list-item">
<label>
<input type="checkbox" name="services[]" value="Other" />
<span class="wpcf7-list-item-label">Other</span></label>
</span><span class="wpcf7-list-item">
<label>
<input type="checkbox" name="services[]" value="Development" />
<span class="wpcf7-list-item-label">Development</span></label>
</span><span class="wpcf7-list-item">
<label>
<input type="checkbox" name="services[]" value="Illustration" />
<span class="wpcf7-list-item-label">Illustration</span></label>
</span></span></span></div>
<input type="submit" name="sub">
</form>
</body>
</html>
actually you are not submitting your form. You just specified in 'action'. To achieve your code workable, add a submit button. So that, while clicking it will call processstart.php
<input type="submit">
I have this wizard that needs to display the previous posted value
index.html
<form method="post" action="posted.php">
<input type="text" name="surname" value="" placeholder="Surname" />
<input type="text" name="firstname" value="" placeholder="Firstname" />
<input type="checkbox" name="php" />
<input type="checkbox" name="jquery" />
<input type="checkbox" name="python" />
<input type="submit" value="Submit" />
</form>
in the posted.php i have a similar form only this time i know the value from $_POST
<form method="post" action="finish.php">
<input type="text" name="surname" value="<?php echo $_POST['surname']; ?>" placeholder="Surname" />
<input type="text" name="firstname" value="<?php echo $_POST['firstname']; ?>" placeholder="Firstname" />
<input type="checkbox" name="php" />
<input type="checkbox" name="jquery" />
<input type="checkbox" name="python" />
<input type="submit" value="Submit" />
</form>
I am having a hard time trying to come up with a solution that shows what checkbox was checked.I have seen several solutions like https://stackoverflow.com/a/11424091/1411148 but i wondering if there more solution probably in html5 or jquery.
How can i show what checkbox was checked?.The probem i am having is that <input type="checkbox" name="jquery" checked /> checked checks the checkbox and no post data can be added to show what the user checked.
This would be a way to go:
<form method="post" action="finish.php">
<input type="text" name="surname" value="<?php echo $_POST['surname']; ?>" placeholder="Surname" />
<input type="text" name="firstname" value="<?php echo $_POST['firstname']; ?>" placeholder="Firstname" />
<input type="checkbox" name="php" <?php if (isset($_POST['php'])) echo 'checked="checked"'; ?> />
<input type="checkbox" name="jquery" <?php if (isset($_POST['jquery'])) echo 'checked="checked"'; ?> />
<input type="checkbox" name="python" <?php if (isset($_POST['python'])) echo 'checked="checked"'; ?> />
<input type="submit" value="Submit" />
</form>