I am using this jQuery star rating plugin
But where do you add the link that points to the PHP file where the data is inserted in the database?
This is what needs to be done:
$('input.wow').rating({
callback: function(value){
$.ajax({
type: 'GET',
url: "http://www3.inrees.com/rating_films_ajax.php?action=voter",
data:"films_id=<?php echo $id; ?>&rating="+value,
success: function(){
alert(value);
}
})
}
})
Question answered and my middle finger to the conceiver of the plugin
Check that page source code: it seems there is no file do specify: it's a simple HTML form:
<form name="api-select">
<span class="star-rating-control">
<div class="rating-cancel"><a title="Cancel Rating"></a></div>
<div class="star-rating rater-0 star star-rating-applied star-rating-live star-rating-on"><a title="A">A</a></div>
<div class="star-rating rater-0 star star-rating-applied star-rating-live star-rating-on"><a title="B">B</a></div>
<div class="star-rating rater-0 star star-rating-applied star-rating-live star-rating-on"><a title="C">C</a></div>
<div class="star-rating rater-0 star star-rating-applied star-rating-live"><a title="D">D</a></div>
<div class="star-rating rater-0 star star-rating-applied star-rating-live"><a title="E">E</a></div>
</span>
<input style="display: none;" class="star star-rating-applied" name="api-select-test" value="A" type="radio">
<input style="display: none;" class="star star-rating-applied" name="api-select-test" value="B" type="radio">
<input style="display: none;" class="star star-rating-applied" name="api-select-test" value="C" type="radio">
<input style="display: none;" class="star star-rating-applied" name="api-select-test" value="D" type="radio">
<input style="display: none;" class="star star-rating-applied" name="api-select-test" value="E" type="radio">
<input value="Submit ยป" onclick="$(this).next().html( $(this.form).serialize() || '(nothing submitted)' );" type="button">
</form>
Therefore I think you should just set your action and method attributes on the form element.
Related
I have an assessment form that has true and false radio button options. I have set the required field, however it is still submitting and proceeding to the results page even if no answer is chosen. What am I missing? Here is the code for the form:
<form action="../results" method="post" id="assessment">
<!-- Question 1 BLUE -->
<div class="evaluation_question">Sometimes I feel and experience moments of anger "out of the blue".</div>
<div class="evaluation_answers">
<span class="answer_choice">
<input type="radio" class="radio_button" name="question1" id="question1_1" value="True" required/>
<label class="radio_label" for="question_1">True</label>
</span>
<span class="answer_choice">
<input type="radio" class="radio_button" name="question1" id="question1_2" value="False" />
<label class="radio_label" for="question_2">False</label>
</span>
<input type="radio" style="display: none;" name="question1" id="question1_none" checked="checked" value="" />
</div>
<input type="submit" value="Submit" class="submitbtn" />
</form>
<form action="../results" method="post" id="assessment">
<!-- Question 1 BLUE -->
<div class="evaluation_question">Sometimes I feel and experience moments of anger "out of the blue".</div>
<div class="evaluation_answers">
<span class="answer_choice">
<input type="radio" class="radio_button" name="question1" id="question1_1" value="True" required/>
<label class="radio_label" for="question_1">True</label>
</span>
<span class="answer_choice">
<input type="radio" class="radio_button" name="question1" id="question1_2" value="False" />
<label class="radio_label" for="question_2">False</label>
</span>
</div>
<input type="submit" value="Submit" class="submitbtn" />
</form>
Remove the <input> the checked = "checked". You have made a invisible radio button that has already been selected, so the form is not "empty". None of the others will be selected if you do that.
I think you have unnecessarily complicated this
const myForm = document.querySelector('#assessment')
myForm.onsubmit = e =>
{
e.preventDefault()
console.clear()
console.log( Object.fromEntries( new FormData(myForm).entries() ) )
}
myForm.onreset = () =>
{
console.clear()
}
form > div {
margin : 1em
}
.evaluation_answers span {
border : 1px solid grey;
padding : .2em .4em;
}
.evaluation_answers label input {
position : fixed;
opacity : 0;
pointer-events : none;
}
.evaluation_answers label:nth-child(1) > input:checked + span {
background-color : lightgreen;
}
.evaluation_answers label:nth-child(2) > input:checked + span {
background-color : lightcoral;
}
<form action="../results" method="post" id="assessment">
<!-- Question 1 BLUE -->
<div class="evaluation_question">
Sometimes I feel and experience moments of anger "out of the blue".
</div>
<div class="evaluation_answers">
<label>
<input type="radio" name="question1" value="True" required>
<span>True</span>
</label>
<label>
<input type="radio" name="question1" value="False">
<span>False</span>
</label>
</div>
<button>submit</button>
<button type="reset">reset</button>
</form>
<div class="container">
<div class="form-group">
<form>
<button>click to add/remove<input type="text" name="addfirst" value="10" readonly></button><br>
<button>click to add/remove<input type="text" name="addsecond" value="10" readonly></button><br>
<button>click to add/remove<input type="text" name="addthird" value="10" readonly></button><br>
<button>click to add/remove<input type="text" name="addfourth" value="10" readonly></button><br>
<label>total values</label>
<input type="text" name="total_ammount" value="50" readonly>
</form>
</div>
</div>
if i click button to add first input value which is 10 so it will addition with my total input field values if again the same button so substract the values.
remaining field should do the same work also.
how it is possible by using jquery please explain it.
Please Try the below code.,
function addValue(dhis){
var val=parseFloat(dhis.children().val()) // get the text box value
var total_ammount=parseFloat($('#total_ammount').val())+val
$('#total_ammount').val(total_ammount);
dhis.attr('onclick','subValue($(this))') // change the onclick function
}
function subValue(dhis){
var val=parseFloat(dhis.children().val()) // get the text box value
var total_ammount=parseFloat($('#total_ammount').val())-val
$('#total_ammount').val(total_ammount);
dhis.attr('onclick','addValue($(this))') // change the onclick function
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="form-group">
<form>
<button type="button" onclick="addValue($(this))">click to add/remove<input type="text" name="addfirst" value="10" readonly></button><br>
<button type="button" onclick="addValue($(this))">click to add/remove<input type="text" name="addsecond" value="10" readonly></button><br>
<button type="button" onclick="addValue($(this))">click to add/remove<input type="text" name="addthird" value="10" readonly></button><br>
<button type="button" onclick="addValue($(this))">click to add/remove<input type="text" name="addfourth" value="10" readonly></button><br>
<label>total values</label>
<input type="text" name="total_ammount" id="total_ammount" value="50" readonly>
</form>
</div>
</div>
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 want to make a star rating system in html with checkboxes. When a checkbox is checked, the previous are checked and the others are unchecked.
The result will be POSTed to my php code backend.
Here's my current html:
<span class="star-rating">
<!--RADIO 1-->
<input type='checkbox' class="radio_item" value="1" name="item" id="radio1">
<label class="label_item" for="radio1"> <img src="label.png" style="width:30px;height:28px"> </label>
<!--RADIO 2-->
<input type='checkbox' class="radio_item" value="2" name="item2" id="radio2">
<label class="label_item" for="radio2"> <img src="label.png" style="width:30px;height:28px"> </label>
<!--RADIO 3-->
<input type='checkbox' class="radio_item" value="3" name="item3" id="radio3">
<label class="label_item" for="radio3"> <img src="label.png" style="width:30px;height:28px"> </label>
<!--RADIO 4-->
<input type='checkbox' class="radio_item" value="4" name="item4" id="radio4">
<label class="label_item" for="radio4"> <img src="label.png" style="width:30px;height:28px"> </label>
<!--RADIO 5-->
<input type='checkbox' class="radio_item" value="5" name="item5" id="radio5">
<label class="label_item" for="radio5"> <img src="label.png" style="width:30px;height:28px"> </label>
</span>
Include Jquery in your html and this simple javascript code might do just what you want.
$('.star-rating input').click( function(){
starvalue = $(this).attr('value');
// iterate through the checkboxes and check those with values lower than or equal to the one you selected. Uncheck any other.
for(i=0; i<=5; i++){
if (i <= starvalue){
$("#radio" + i).prop('checked', true);
} else {
$("#radio" + i).prop('checked', false);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="star-rating">
<!--RADIO 1-->
<input type='checkbox' class="radio_item" value="1" name="item" id="radio1">
<label class="label_item" for="radio1"> ☆ </label>
<!--RADIO 2-->
<input type='checkbox' class="radio_item" value="2" name="item2" id="radio2">
<label class="label_item" for="radio2"> ☆ </label>
<!--RADIO 3-->
<input type='checkbox' class="radio_item" value="3" name="item3" id="radio3">
<label class="label_item" for="radio3"> ☆ </label>
<!--RADIO 4-->
<input type='checkbox' class="radio_item" value="4" name="item4" id="radio4">
<label class="label_item" for="radio4"> ☆ </label>
<!--RADIO 5-->
<input type='checkbox' class="radio_item" value="5" name="item5" id="radio5">
<label class="label_item" for="radio5"> ☆ </label>
</span>
Obs: The html code is the same as yours. I've just replaced the images by stars as the links were broken.
Obs2: When you post this to your php, you will receive all checked inputs. Your php code will have to be smart and take the highest value it receives. This should not be difficult.
Obs3: The stars should behave as radio-buttons and not checkboxes. The workaround from Obs2 means that your backend code has too much knowledge of what is happening on the interface. This is a more advanced tip, but take that in consideration in the future.
EXTRA
To include this code in your app, you have some options:
OPTION 1 (jQuery from google CDN and javascript code on script tag)
Put this in your html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('.star-rating input').click( function(){
starvalue = $(this).attr('value');
// iterate through the checkboxes and check those with values lower than or equal to the one you selected. Uncheck any other.
for(i=0; i<=5; i++){
if (i <= starvalue){
$("#radio" + i).prop('checked', true);
} else {
$("#radio" + i).prop('checked', false);
}
}
});
</script>
OPTION 2 (better: jQuery from CDN and javascript file included with php):
Include jQuery as above and put the javascript code in a file: star_rating.js, then include that file with php include command.
You're setting up some attribute values for an object, such as colour, size, weight etc in a form. If using buttons to specify these values before wishing to post all the information to a php page for further processing - how do you get the values passed to php, if the buttons are not in themselves submitting the form?
For example:
<form action="processgivenvalues.php" method="post">
choose colour: <button type="button" name="colour" value="green"></button>
<button type="button" name="colour" value="blue"></button>
choose size: <button type="button" name="size" value="big"></button>
<button type="button" name="size" value="small"></button>
<input type="submit">
and on php page:
<?php
echo You specified:
echo $size;
echo $frame
?>
Many thanks.
The point of a type="button" is to be a thing you can hook JavaScript up to. It isn't designed to send values to the server.
Submit buttons are, but you want to let the user pick from multiple sets rather then just one, so you can't use those either.
While you use buttons with JavaScript that generates/updates hidden inputs with the values you want, you really should just use radio buttons instead. They are designed to let users pick one item from a group.
<form action="processgivenvalues.php" method="post">
<fieldset>
<legend>Colour</legend>
<label>
<input type="radio" name="colour" value="green"> Green
</label>
<label>
<input type="radio" name="colour" value="blue"> Blue
</label>
</fieldset>
<fieldset>
<legend>Size</legend>
<label>
<input type="radio" name="size" value="big"> Big
</label>
<label>
<input type="radio" name="size" value="small"> Small
</label>
</fieldset>
<input type="submit">
</form>
You could use jQuery for this.
html:
choose colour: <button type="button" class="colour" value="green">Green</button>
<button type="button" class="colour" value="blue">Blue</button>
choose size: <button type="button" class="size" value="big">Big</button>
<button type="button" class="size" value="small">Small</button>
<button id='submit' type="button">Submit</button>
jQuery:
You make the form on the run
$(document).ready(function(){
window.size = '';
window.colour = '';
$(".colour").click(function() {
window.colour = $(this).val();
});
$(".size").click(function() {
window.size = $(this).val();
});
$("#submit").click(function() {
if(window.size == '' || window.colour == ''){
return alert('Choose colour and Size');
}
var form = $('<form></form>');
$(form).hide().attr('method','post').attr('action',"processgivenvalues.php");
var input1 = $('<input type="hidden" />').attr('name',"size").val(window.size);
var input2 = $('<input type="hidden" />').attr('name',"colour").val(window.color);
$(form).append(input1);
$(form).append(input2);
$(form).appendTo('body').submit();
});
});
jsFiddle
This can also be done with only javaScript.
As Quentin stated, buttons are not useful for selecting between options, but you comment that you want something customizable with an image...
Option 1: Use <label for="id"></label> with a radio button in a table or list.
<table>
<tbody>
<tr>
<td style="background-color: green;">
<label for="green">
<input name="colour" value="green" id="green" type="radio">
</label>
</td>
</tr>
<tr>
<td style="background-color: blue;">
<label for="blue">
<input name="colour" value="blue" id="blue" type="radio">
</label>
</td>
</tr>
<tr>
<td>
<label for="big">
<input name="size" value="big" id="big" type="radio">
<big>Big</big>
</label>
</td>
</tr>
<tr>
<td>
<label for="small">
<input name="size" value="small" id="small" type="radio">
<small>Small</small>
</label>
</td>
</tr>
</tbody>
</table>
Option2: Use droplists with styling:
<select name="colour2">
<option value="0">Select a color</option>
<option value="green" style="background: green;"> </option>
<option value="blue" style="background: blue;"> </option>
</select>
<br>
<select name="size2">
<option value="0">Select a size</option>
<option value="big" style="font-size: 16px;">Big</option>
<option value="small" style="font-size: 12px;">Small</option>
</select>
Here's a demo fiddle I created (just signed up)