Post date: Feb 07, 2021 11:18:9 AM
Key thing to remember is that if it is on the front end, then odds are Javascript is the solution. I tried doing things with the laravel framework but the instantiation of the different parts that constitute the laravel framework make it far more difficult than with JS. Specifically, I wanted to be able to change the Name Search using the "like" keyword on the database, to a Tag Search. The screens were pretty similar and in this record, I won't even bother to change them. The following is slide.js which I used to implement the screen change by toggling a little button to the right of the Search button.
sstr = "<hr><form action='/search-page/' method='get'><label for='searchstr'><b>Key in Tags : </b></label><input type='text' id='searchstr' name='searchstr' class='form-control'><br><div class='center'><input type='submit' name='search' class='btn btn-success' value = 'Search'/><button type='button' class='btn btn-success' onclick='btn_click();'><a style='color:white'>N</a></button></div></form><hr>";
tstr="<hr><form action='/search-page/' method='get'><label for='searchstr'><b>Key in Name : </b></label><input type='text' id='searchstr' name='searchstr' class='form-control'><br><div class='center'><input type='submit' name='search' class='btn btn-success' value = 'Search'/><button type='button' class='btn btn-success' onclick='btn_click();'><a style='color:white'>T</a></button></div></form><hr>";
maxc = 1;
var elem = document.getElementById('searchport');
var ssel = 0;
function inc_ssel() {
if (ssel < maxc) {
ssel += 1;
} else {
ssel = 0;
}
}
function get_search() {
if (ssel == 0) {
elem.innerHTML = sstr;
} else if (ssel == 1) {
elem.innerHTML = tstr;
} else {
console.log('get_search: Invalid choice');
elem.innerHTML = sstr;
}
}
function btn_click() {
inc_ssel();
get_search();
}
// main
get_search();
The HTML etc. is kept in the large strings declared at the top of the code. maxc is maxcount which is the index for which string to select. To add a new screen, insert another HTML string, and to get_search for elem.innerHTML to load that string.