Search forms are a great, user-friendly way to use URL parameters. They let users search for specific values in particular fields using both plain values and wildcards.
To set one up, you need two pages:
- A page with the search form itself.
- A page with the data table app that will display the results.
The process is straightforward: A user fills out the form and clicks “submit.” The form then sends those values to the data table app page, which processes the URL arguments to show the relevant data.
Sample HTML code for a basic search form #
<form method="get" action="/results-page/">
<h4>
Search Student Name
</h4>
<p>
<input type="text" name="student_first_name" placeholder="First Name" />
</p>
<p>
<input type="text" name="student_last_name" placeholder="Last Name" />
</p>
<p>
<input type="submit" />
</p>
</form>Where:
- /results-page/ – is the slug/URL of your results page
- student_first_name & student_last_name – the column names to search in your database table. This can be anything, as this is just used as a variable. It doesn’t have to be a complete match to your database table column names.
When someone uses the form to search, the form will redirect to the results page with an additional parameter.
For example: https://YOURWEBSITE.COM/results-page/?student_first_name=John&student_last_name=Smith
Using the App Builder, you can create a data table for your students table where all data for all of the students is stored.
In the Table Builder > Default WHERE field, you need to add the following condition:
(student_fname like httpGet['student_first_name'] OR httpGet['student_first_name'] like '' OR httpGet['student_first_name'] is null) AND (student_lname like httpGet['student_last_name'] OR httpGet['student_last_name'] like '' OR httpGet['student_last_name'] is null)Where student_fname and student_lname are the column names to search, as seen in your database table. The two other conditions added with the operator OR are there in case the search form is submitted empty, in which case all student info will be listed.
