How to remove selected values from dropdown once its submitted

Viewed 568

I am working on small project in laravel, where I have two drop-downs.

From the first drop-drop down the user selects the subject and from the second dropdown the user selects the grade.

Once user select sub1 from subjects dropdown for selecting the second subject the first selected value should not be there.

In the image I want to enter marks for math and grade 10th and when I want to add marks for other subjects of grade 10, math subject should not be there or at least it should be disabled.

How to control this, or how to validate this in laravel for duplication of marks for same subject in same grade?

Once I entered marks for math of 10th grade, for the second time if I want to enter marks for math of 10th grade it should not allow me to enter.

enter image description here

2 Answers

If you post your code it would be easier to understand what have you done so far.

From what i understand you can achieve this with couple of methods. One is following.

You can pass the existing marks to the view from controller.

Controller

// Get the ids of already marked subjects for the given user
$markedSubjectIds = StudentMark::where('student_id', $studentId)
                                ->get()
                                ->pluck('subject_id')
                                ->toArray();

$subjects = // Subjects

return view('sudent.marks', compact('markedSubjectIds', 'subjects'));

View

<select name="subject" class="form-control">
  @foreach($subjects as $subject)
    <option value="{{$subject->id}}" {{ in_array($subject->id, $markedSubjectIds) ? 'disabled' : ''}}>{{$subject->name}}</option>
  @endforeach
</select>

I believe you can use query builder to filter out the already marked subjects from all subjects, but i have no idea how your table structure is.

Ideally, the backend server/database should only provide subjects that have NOT already been submitted. Alternatively, the page should contain separate entries for each subject, so the entire page contains ALL subjects/grades when submitted.

However, here is a simple way to get/set/remove localStorage during page refreshes.

SCRIPT:

// id of pupil to ensure that selections are pupil-specific
// should be available from elsewhere but hardcoded here
// localStorage will use this to hold selected subjects for this pupil
const pupil = "1234"; 

// Variable to hold list of selected subjects
let subjectsSelected;

// Function to retrieve data from localStorage for this pupil
function retrieveSelected() {
  // retrieve localStorage data for this pupil
  let ls = localStorage.getItem(pupil);
 
  if (ls !== null) {
    // if localStorage already as data, parse it back from a JSON string
    subjectsSelected = JSON.parse(ls);
  } else {
    // otherwise create an empty array
    subjectsSelected = [];
  }
}

// Function to check if a subject on the select list is in the localStorage array
function disableSubjects() {
  retrieveSelected();
  let subjects = document.getElementById("subjects");
  for (let i = 1; i < subjects.length; i++) {
    let s = subjects[i].value;
    if (subjectsSelected.indexOf(s) > -1) {
      // if it is, disable it
      subjects[i].disabled = true;
    }
  }
}

// Function called by selecting an item on the subjects select list
function updateSelected() {
  let subjects = document.getElementById("subjects");
  // Get the value selected and add it to the array
  subjectsSelected.push(subjects.value);
  // JSON stringify the updated array and update localStorage
  localStorage.setItem(pupil, JSON.stringify(subjectsSelected));
}

function removeLocalStorage() {
  localStorage.removeItem(pupil);
}

window.onload = disableSubjects;

HTML:

<select id="subjects" onchange="updateSelected();">
  <option value="">Select subject</option>
  <option value="Maths">Maths</option>
  <option value="English Language">English Language</option>
  <option value="English Literature">English Literature</option>
  <option value="Physics">Physics</option>
  <option value="Chemistry">Chemistry</option>

</select>

<button onclick="removeLocalStorage();">Clear stored subjects</button>

Put that in a new HTML file with the SCRIPT part in the HEAD tag and the rest in the BODY tag. Pick a subject and reload the page - the subject should now be disabled. You can click the button to clear localStorage - but, note that this sometimes takes a while to update.

This stores the selections in an array and uses JSON to convert this to a string (localStorage can not store arrays) when the selection is made and to convert this back into an array when the page is loaded. Obviously, this sample does not include all of the functionality you would need for your entire page - it is just to show how to store, retrieve and clear something from localStorage. Also note that I have include a pupil variable to hold some sort of ID for the pupil so that each pupil's subjects/grades are stored separately. It is important to note that the stored arrays will remain in your broswer until you clear it. An alternative to localStorage would be sessionStorage, which works in the same way, except that the data is lost if you close the tab and end your session.

Related