advanced search without javascript

Question

I'm building an advanced search with a-tags to filter for first letter abcdefghijklmnopqrstuvwxyz0-9 and also an input field, options fields for other criteria, radio buttons and a submit button. When I click on a letter-filter, it sends it as $_GET variable. But when I then use the input fields it forgets it of course. How can I grab this variable with the submit button before sending it along with all the other variables from the form? Do I have to use JS and AJAX for that? Do you recommend that?

EDIT

so let me rephrase that. I have different variables to send to the server, coming from input fields, radio buttons, option fields but I also want a link for each letter of the alphabet (so it would then list all entries that start with that letter). When I click the submit button it sends all the variables from the input fields but not from the a-tags (cause they are not recognized as form-fields I guess). When I click on the a-tags (a letter) it sends just that very variable to the server which is fine as well. My question is, how can I get the submit button to send everything?

    <input type='search' id='search-query' name='q' class='uk-input uk-form-width-medium' placeholder='Suche'>
    <p>
    <?php 
    foreach ($alphabet as $abc){
        if ($abc == $letter) {
            $class = 'current';
        }
        else $class = '';
        echo '<a class="'.$class.'" href="'.$page->url.'?letter='.$abc.'">'.$abc.'</a> ';
    }
    ?>
    </p>
    <select class="uk-select uk-width-medium" name="what">
        <option>Titel</option>
        <option>Autor</option>
        <option>Erscheinungsdatum</option>
    </select>
        <label><input class="uk-radio" type="radio" name="how" value="aufsteigend" checked> aufsteigend</label>
        <label><input class="uk-radio" type="radio" name="how" value="absteigend"> absteigend</label>
    <button class="uk-button uk-button-primary" type="submit">Suche starten</button>
</form>```

Answer 1

I assume you want to have dynamic Google-like search where you type in "a" and it gives you a drop-down list of options like "airplane, applle, artery" etc. If that is the case, then yes, you do need JS + AJAX. Instead of clicking on a letter filter, you can have AJAX dynamically display you the options available right in the input field. Given the vague description of your question and the absence of images of your UI that is all that can be said.

Answer 2

I didn't really get the question and the whole situation from the explanation, but sounds like following: You want to render the hints based on the value of the input field search-query when user clicks on the specific button: letter-filter. If this is right, then you will have to anyways send a get request to the back end so that it would give back the page with all hints.

FE:

<html>
  <body>
    <form action="app.com/myurl" method="GET" >
      <input id="letter" value="a" name="letter" />
      <input id="letter2" value="b" name="other_param" />
      <input id="letter3" value="c" name="another_param" />
      <!-- All three  inputs will be visible in the $_GET variable when you send the request -->
      <!-- Other input fields here: <input type="whatever" id="whatever".../> -->
      <button type="submit">letter filter</button>
    </form>
  </body>
</html>

You can even track the request in borwser's network tab, if the params are not appended as query params like app.com/myurl?letter=a&other_param=b&another_param=c, if you dont see the query params but see the url itself, then I can suggest you forgot to set the method of the form.

But I am still not sure, can you rephrase your question, as it doesn't clearly explain the case, sorry your english is a little confusing.

EDIT AFTER Rephrase:

I understood your aim now and you are right, submit button sends only form fields and <a> tag is not a form field. If you want to append all form fields to <a> tag click then you have few options.

1. Append all parameters on server side manually on render:

You have

foreach ($alphabet as $abc){
  if ($abc == $letter) {
      $class = 'current';
  }
  
  else $class = '';
  echo '<a class="'.$class.'" href="'.$page->url.'?letter='.$abc.'">'.$abc.'</a> ';
}

And you need to additionally add form fields as well, I assume on first time click when none of the tags are rendered (no <a> tag on the screen) then you just send the form data, in tha moment you catch form data from $_GET and append to anchor

foreach ($alphabet as $abc){
  if ($abc == $letter) {
      $class = 'current';
  }
  
  else $class = '';
  echo '<a class="'.$class.'" href="'.$page->url.'?letter='.$abc.'otherParamName='.$_GET['otherParam']].'">'.$abc.'</a> ';
}

2. You can use js, to collect form data, I guess you use jQuery, and append to the href on click of the anchor

jQuery('a.someClassIdentifier').click(fuction(e) {
  // Please read documentation of jquery how to handle click events, I dont remember it out of my head right now.
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

But as an ultimate answer I would say rethink your approach. If you have already a form, and it sends GET request to the endpoint and it returns the same page where tags are visible then you can use form fields instead of anchor tags, that would already handle the data sending for you. But if you have different endpoints for tags receiving then best will be to send ajax request to receive only json data and render them without refreshing the page.

Hope it helps.