I am having difficulty finding specifically what I'm searching for, most likely because I'm not sure how to express it well in a Google search.
Basically what I would like to do is display 30 or so buttons that users would then be able to select. Once selected a button changes color indicating that the particular option has been chosen. Users are required to select 10 out of 30 options. The results should then be aggregated (basically counting each unique button selected) and displayed to another user who can login and see the results.
Multiple users should be able to select these options and have their results recorded.
I'm not looking to create a drop down list, multi-list, or checkbox solution. In my research so far I have found plenty of references to this type of option. Also, Javascript restricting the min/max number of checkboxes a user can select.
I hope that makes sense. Any assistance with identifying the best method for going about this task would be greatly appreciated.
Thank You,
-Nathan
What you can do, you can create 30 buttons, and connect each button to a hidden check box, then you can post it to server, eg.
<input type="checkbox" value="1" name="chk_one" id="chk_one" style="display: none;">
<input type="button" value="Check Box One" id="btn_one"/>
CSS
input[type="button"].selected { color: red; }
input[type="button"] { color: black; }
then you can write jQuery solution in order to make it change colors:
var _minLength = 10;
var _maxLength = 30;
$(document).ready(function() {
$('#submit_id').click(function() {
if($('#form_id input[type="checkbox"]').is(':checked').length < _minLength)
{
alert('you need to select at least ' + _minLength + ' of buttons'); return false;
};});
$('#form_id input [type="button"]').click(function() {
var _id = $(this).attr('id').toString().split('_')[1];
if(_id != null)
{
var _chckBox = $('#chk_'+_id);
var _newState = _checkBox.attr('checked') ? false, true;
if($('#form_id input[type="checkbox"]').is(':checked').length+1 > _maxLength)
return;
_checkBox.attr('checked', _newState);
if(_checkBox.attr('checked'))
$(this).addClass('selected');
else
$(this).removeClass('selected');
}
});
});
Method from above will attach click event to every button in the area you specified with "#form_id" then when clicked it will toogle state of hidden checkbox and will set or remove class from button, it depends of checkbox state.
And by the way number of checkboxes is not limited.
Related
i am working on a project where i want to insert only one record in a specific time.
For Example: in the project client rate a contractor only once.(when the construction is in working) once he rated he cannot rate second time whatsoever.
I checked online but didn't find what i am looking for.
Now I have 2 Ideas.
1- Either insert checkboxes and make them disable permanently, once the rating is done(with server side validation).
2- Rate according to numbers (like 7/10) and display them.
which one is batter strategy to opt.
Code Part:
CheckBox Solution Code(no solution available on google on serverside validation):
Checkbox: <input type="checkbox" id="myCheck">
<p>Click the "Try it" button to disable the checkbox.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myCheck").disabled = true;
}
</script>
Also checked this on stackoverflow (but this is not i am looking for):
[an example serverside solution link][1]
Number Solution:
<table>
<tr><td>Rate Your Contractor (Out Of 10)</td><td><input id="intLimitTextBox"></td></tr>
</table>
<script>
function setInputFilter(textbox, inputFilter) {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
textbox.addEventListener(event, function() {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
} else {
this.value = "";
}
});
});
}
// Install input filters.
setInputFilter(document.getElementById("intLimitTextBox"), function(value) {
return /^\d*$/.test(value) && (value === "" || parseInt(value) <= 10); });
</script>
Is There any php way(or both ways) to implement the solution of my problem?
PS: i am not very expert in web devolepment, sorry if any mistake i am doing.
Edit : Question has been totally changed !? This is an answer to the original question.
I'll try to answer your second question, then, but it is somehow vague...
Rendering the form :
Check if a submission exists for this user.
If yes, render the rating read-only with the value.
(If the rating is the only field you have, don't even render the tag)
If no, show the form submittable.
Handling submission :
On handling submission, check if a submission exists for this user.
If it already exists, return an error (user has tried to trick you)
Otherwise, add a new one.
Edit : Question has been totally changed !? This is an answer to the original question.
Maybe I misunderstood; your title is about php, but your question seems to be an ergonomic one.
For a rating, a current presentation is a list of stars, on which the user clicks on the wanted.
Once user has submitted a rating, I suggest you to have the same presentation, without javascript and without :hover rules.
Maybe changing the colors (yellow when submitting, black or gray when submitted and read-only)
$('.star').on('click', function() {
var v = $(this).data('value');
$('input[name="rating"]').val(v);
$('.star').each(function() {
var $this = $(this);
$this.toggleClass('active', $this.data('value') <= v);
});
});
/* remove spaces between stars */
.stars {
font-size:0;
}
.star::after {
content:"☆";
display:inline;
font-size: 14pt;
padding: 0 5px;
}
/* by default, only fills active stars */
.stars:not(:hover) .star.active::after,
.stars:hover .star::after {
content:"★";
}
/* unfill stars following the current hovered */
.stars:hover .star:hover ~ .star::after {
content:"☆";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stars">
<input type="hidden" name="rating" value="" />
<span class="star" data-value="1"></span>
<span class="star" data-value="2"></span>
<span class="star" data-value="3"></span>
<span class="star" data-value="4"></span>
<span class="star" data-value="5"></span>
</div>
I may have worded my title poorly so I hope this explanation sums my question up.
I have an email template page that allows users to enter in information to set up a custom email.
There is a second table at the bottom which lists previously created templates.
I have some jQuery in place that when a user clicks a previously created email template, it populates the top table with all of that information. Essentially, a user can save the table and let all of the information update instead of making a new template.
NOTE - everything populates correctly in FireFox, and everything updates correctly.
When I click the email names in IE, everything populates correctly but three check boxes. Each checkbox should display as "checked" if the value pulled from the database is "YES".
Otherwise, it is left unchecked. In IE, either all of the checkboxes are checked, or none of them are checked.
For reference, please check out my previous post: Need assistance with window.onload and IE
Here is the jQuery I currently have in place:
$(window).on('load', function() {
$('.test').on('click', function() {
var id = $(this).html();
$.get("/includes/adminPages/Update_Email.inc.php?selection_id=" + id, function(data) {
$('#test').html(data);
});
});
});
Here is an example of one of the checkboxes that is displaying incorrectly.
<?php
if($email['copy_user'] == 'YES')
{
echo '
<input type="checkbox" name="user" id="user" value="YES" checked />Autocopy User
';
}
if($email['copy_user'] == 'NO' || $email['copy_user'] == "")
{
echo '
<input type="checkbox" name="user" id="user" value="YES" />Autocopy User
';
}
?>
I did not post my query string as it works properly in Firefox.
I found a jquery snippet to add and remove options from a select box from box 1 to box 2. This works great. However, when i try to print_r in PHP of the box where the new options are added then it won't show. I cant even see it on the resource after submit. Any solution?
$('#btn-add').click(function(){
$('#select-from option:selected').each( function() {
$('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
$('#btn-remove').click(function(){
$('#select-to option:selected').each( function() {
$('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
});
and html of the two select lists
<select class="gen" name="selectfrom" id="select-from" multiple size="6" style="width: 150px;">
</select>
<input name="" id="btn-add" type="button" class="add_list" style="vertical-align: top;">
<input name="" id="btn-remove" type="button" class="remove_list" style="vertical-align: top;">
<select class="gen" name="selectto" id="select-to" multiple size="6" style="width: 150px;">
</select>
upon submit i check the $_POST['selectto'] from the selectto box. Any idea's?
EDIT: the foreach in php;
$articles_ary = array();
foreach ($_POST['selectto[]'] as $options)
{
if (!empty($options))
{
$articles_ary[] = $options;
}
}
print_r($articles_ary);
when you POST a select the form submits only the selected option and bare in mind that it must be selected.
with your code you are just adding the options to the selectto, but you're not:
a) chosing one of them (if you want a single value posted)
b) chosing all of them to be posted on the PHP page. (if you want multiple values posted)
in the second case (i thought it's the one you need) you can use this simple jQuery function:
$("#buttonusedtosendform").click(function(e){
e.preventDefault();
$('#select-to option').each( function() {
$(this).attr('selected', true); //with this you select all the option
});
$('formname').submit();
});
bare in mind that if you want to retrieve all the options of a select with PHP you will have to use a little trick by naming the select with square bracket at the end (it's a feature that PHP offer, where it will overwrite the former variable with the latest parsing each one separately):
eg. selectto => selectto[]
this way php will handle it as an array and let you retrieve all the value as if it is one:
foreach($_POST['selectto[]'] as $options){}
When you enter data from one select box to second selectbox, you need to have items selected in second select box to show when you do print_r in php.
For this, after items are added to second select box say with id selectbox2, then you could select all items of second selectbox and then submit the form
for (var i = 0; i < selectbox2.options.length; i++) {
selectbox2.options[i].selected = true;
}
//then Submit form like this, assuming your form name is form1
document.form1.submit();
Hope this helps
I have an application [here][1] where an user is able to select their options and answers. Please follow steps below in application.
Step 1: When you open application, you will see the "Open Grid" link,
click on it and select an option type, after you select an option it
will display the answer buttons at the bottom. For example if the
option you choose is "5", it will display 5 answer buttons "A - E",
if option chose is 8, it will display 8 answer buttons "A-H".
Now this is fine. As you can see the correct amount of answer buttons appear depending on the option chosen from the grid. But the problem I have is if the user wants to add a previous option. please look at steps below:
Step 2: You will see a green plus button on left hand side, click on
it, this will open up a modal window.
Step 3: In the search box type in "AAA" and then click on "Submit"
button, it will display rows from the database.
Step 4: If you look at the first row you can see that under "Option Type" column, it is A-D. Select this row by clicking on the "Add" button.
What will happen is that the
modal window will close and if you look at the answer and option
control on the right hand side, you can see that the Option Type
textbox contains the number 4 (This is because Option Type was "A-D" so there are 4 options "A,B,C,D"), so it should display answer buttons A-D but it doesn't, it doesn't change the answer buttons at all, they remain the same.
So my question is how can I get the correct Answer buttons to appear after the user has clicked on the "Add" button?
Below is the code where it imports the answer buttons after an option is selected from the grid:
$('.gridBtns').on('click', function()
{
var clickedNumber = this.value;
$(this).closest('.option').siblings('.answer').find('.answers').each(function(index) {
if (!isNaN(clickedNumber) && index < clickedNumber) {
$(this).show();
} else {
$(this).hide();
$(this).removeClass('answerBtnsOn');
$(this).addClass('answerBtnsOff');
}
var $this = $(this);
var context = $this.parents('.optionAndAnswer');
console.log($this);
});
if (clickedNumber === 'True or False') {
$(this).closest('.option').siblings('.answer').find('input[name=answerTrueName]').show();
$(this).closest('.option').siblings('.answer').find('input[name=answerFalseName]').show();
} else if (clickedNumber === 'Yes or No') {
$(this).closest('.option').siblings('.answer').find('input[name=answerYesName]').show();
$(this).closest('.option').siblings('.answer').find('input[name=answerNoName]').show();
}
getButtons();
});
});
function getButtons()
{
var i;
if (initClick == 0) {
for (i = 65; i <= 90; i++) { // iterate over character codes for A to Z
$("#answer" + String.fromCharCode(i)).removeClass("answerBtnsOn").addClass("answerBtnsOff");
}
initClick = 1;
}
// code above makes sure all buttons start off with class answerBtnsOff, (so all button are white).
}
Below is function where it controls what happens after the "Add" button has been clicked on:
function addwindow(numberAnswer,gridValues) {
if(window.console) console.log();
if($(plusbutton_clicked).attr('id')=='mainPlusbutton') {
$('#mainNumberAnswerTxt').val(numberAnswer);
$('#mainGridTxt').val(gridValues);
} else {
$(plusbutton_clicked).closest('tr').find('input.numberAnswerTxtRow').val(numberAnswer);
$(plusbutton_clicked).closest('tr').find('input.gridTxtRow').val(gridValues);
}
$.modal.close();
return false;
}
After analyzing your above code as well as HTML source code of link you gave, looks like you are just one step behind. You are only assigning the grid value(4 in above case) to in mainGridTxt input box. You need to trigger the click event on the grid buttons.
Put the below code after $model.close
$('#btn'+gridValues).trigger('click');
Above code will trigger the click event on grid button with id 'btn4'.
I need a way of having multiple selections but only one visible at a time.
When the user wants to add another selection he/she clicks a button,checkbox,radio..whatever
They need to be able to add an unlimited number of selections. Any Ideas?
Old question, but might as well add my 2 cents, in case anyone else wants to know an answer.
I would use JavaScript to create a <select> element in a "more" section, from a JavaScript loop. For example, your first page would have
<input type="button" value="New Select Box" onclick="createNewBox();" /><br />
<span id="selectElement1">
<select>[your code for the select box goes here]</select>
<span id="selectElement2"></span>
</span>
Which could setup your basic select element, and the New Select Box would activate this JavaScript function code:
<script type="text/javascript">
// Initialization Code
var currentSelect = 1; // Keeps track of which select box is current
// New Select Box code
function createNewBox()
{
var currentSelect = currentSelect + 1;
var nextSelect = currentSelect + 1;
document.getElementById('selectElement'+currentSelect).innerHTML = "<select>[code goes here]</select><span id=\"selectElement"+nextSelect+"\"></span>";
}
</script>
This whole thing can run with only those two code snippets, and no jQuery code is needed.