Question 44469 in Html Question posted in
Some basic documentation can be found here.

a button post the value to select in a dropdown list of a form in another page – Html

sorry for my english.
I wonder if it’s possible to post with a submit button of the page A, a specific value to pre-select an item in a dropdown list of a form witch is in the page B.

I have that in the page A :

<form action="/form-test-pour-repo/" method="post">
    <button type="submit" name="acces" value="choix 3">Choisir le 3</button>
</form>

and a form with a select in the page B

<select data-required_mark="required" data-field_type="select" data-original_id="liste">
    <option value="">liste</option>
        <option value="choix 1">je veux le 1</option>
        <option value="choix 2">je veux le 2</option>
        <option value="choix 3">je veux le 3</option>
</select>

But I didn’t succeed to pre-select "choix 3" when I arrive on the page B

Any help will be much appreciated

Caroline

Tags:

3

Answers


  1. 0

    You can use JS if you want. For example via sessionStorage or by setting a value on the server:

    $choix = array_key_exists('acces', $_POST) ? $_POST["acces"] : "";
?>
<script>
document.querySelector("[data-original_id=liste]").value="<?= $choix] ?>";
</script>

    Without JS:

    $choix = array_key_exists('acces', $_POST) ? $_POST["acces"] : "";
?>
<select data-required_mark="required" data-field_type="select" data-original_id="liste">
  <option value="">liste</option>
  <option value="choix 1"<?= $choix === "choix 1" ? " selected" : "" ?>>je veux le 1</option>
  <option value="choix 2"<?= $choix === "choix 2" ? " selected" : "" ?>>je veux le 2</option>
  <option value="choix 3"<?= $choix === "choix 3" ? " selected" : "" ?>>je veux le 3</option>
</select>
    Login or Signup to reply.
  2. 0

    I will recommend you use a get method since the URL can be bookmarked or shared.

    Page A

    <form action="url_of_page_b.php" method="get">
    <button type="submit" name="acces" value="choix 3">Choisir le 3</button>
</form>

    Page B

    <?php $choix = $_GET["acces"] ?? ''; ?>
<select data-required_mark="required" data-field_type="select" data-original_id="liste">
    <option value="">liste</option>
    <option value="choix 1" <?= $choix == 'choix 1' ? 'selected' : '' ?>>je veux le 1</option>
    <option value="choix 2" <?= $choix == 'choix 2' ? 'selected' : '' ?>>je veux le 2</option>
    <option value="choix 3" <?= $choix == 'choix 3' ? 'selected' : '' ?>>je veux le 3</option>
</select>
    Login or Signup to reply.
  3. 0

    Session storage

    We can use the Web Storage API‘s sessionStorage to save the choice across pages.

    Page A can save the choice into sessionStorage:

    document.forms[0].addEventListener("submit", evt => {
  const button = evt.submitter;
  
  // Throws because StackOverflow snippets run as sandboxed
  sessionStorage.setItem(button.name, button.value); 
});
    <form action="/path/to/page-B" method=post>
  <button name="acces" value="choix 3">Submit</button>
</form>

    And page B can get it from sessionStorage to select the corresponding option:

    const select = document.querySelector("select[data-original_id=liste]");

// Throws because StackOverflow snippets run as sandboxed
const optionValue = sessionStorage.getItem("acces"); // Use same name as button of page A!

if (optionValue !== null) {
  const option = select.querySelector(`option[value=${optionValue}]`);
  option.selected = true;
}
    <select data-original_id="liste">
  <option value="">liste</option>
  <option value="choix 1">je veux le 1</option>
  <option value="choix 2">je veux le 2</option>
  <option value="choix 3">je veux le 3</option>
</select>

    Query parameter

    Data sent in a GET-request is part of the URL, as its query string. So by using the method GET instead of POST, then:

    • Page A can send the choice as a query parameter.
    • Page B can retrieve the choice from its own URL; from the query string.
    • Page B’s URL with the query parameter can be shared; it will behave the same on the sharer’s and sharee’s browser, regardless of prior actions (e.g. submitting page A’s form).

    Simply change method=post in page A’s form to method=get.

    Then on page B, retrieve the choice from the current URL and select the corresponding option:

    const select = document.querySelector("select[data-original_id=liste]");

const optionValue = new URLSearchParams(location).get("acces"); // Use same name as button of page A!

if (optionValue !== null) {
  const option = select.querySelector(`option[value=${optionValue}]`);
  option.selected = true;
}
    <select data-original_id="liste">
  <option value="">liste</option>
  <option value="choix 1">je veux le 1</option>
  <option value="choix 2">je veux le 2</option>
  <option value="choix 3">je veux le 3</option>
</select>

    Alternatively to selecting it in the front-end, you can select the option on the back-end as well. Selecting on the back-end comes with the benefits of caching and JS-independence.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search