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.
Answer
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>