Jak połączyć dwie wartości input w jedną zmienną?

pytanie zadane 1 czerwca 2022 w HTML i CSS przez Mietek99 Nowicjusz (120 p.)

Chcę zrobić formularz na stronie z jedną zmienną ale dwoma wartościami, które się łączą

Potrzebuję mieć 2 okienka do wprowadzenia dwóch wartości "aaa" i "bbb" a w efekcie po kliknięciu przycisku przejść do strony o adresie

index.php?value=aaabbb

Czyli żeby formularz połączył wartości z dwóch okienek do jednej zmiennej.

Niestety nie mam wpływu na ten adres - musi być taki. (nie może być np. index.php?valueA=aaa&valueB=bbb )

Tak dokładnie to potrzebuję żeby adres był nieco dłuższy ale miał trzy wartości ukryte - jak będę mieć metodę to już to ogarnę. Coś jak index.php?value=UKRYTE1aaaUKRYTE2bbbUKRYTE3
wartości aaa i bbb mogą być różne - wartości ukryte są stałe.

Mogę prosić o pomoc?

komentarz 1 czerwca 2022 przez VBService Ekspert (253,340 p.)
edycja 1 czerwca 2022 przez VBService

Może w ten sposób

<style>
  input.aaa {
    border: 2px solid darkred;
  }
  input.bbb {
    border: 2px solid green;
  }
  pre {
    font: 300 1.2em/1 monospace;
  }
  .aaa, .bbb {
    font-weight: bold;
  }
  .aaa {
    color: darkred;
  }
  .bbb {
    color: green;
  }  
</style>

<div class="container">
  <label for="aaa">aaa:</label>
  <input type="text" id="aaa" class="aaa" value="">
  <label for="bbb">bbb:</label>
  <input type="text" id="bbb" class="bbb" value="">
  <pre>https://index.php?value=UKRYTE1<span class="aaa"></span>UKRYTE2<span class="bbb"></span>UKRYTE3</pre>

  <button type="button" id="run_url">Przejdź</button>
</div>

<script>
  window.onload = load;

  function load() {
    const aaa_input = document.querySelector('#aaa'),
          bbb_input = document.querySelector('#bbb'),
          run_url_button = document.querySelector('#run_url');

    aaa_input.oninput = prepareLink;
    bbb_input.oninput = prepareLink;
    run_url_button.onclick = runUrl;

    function prepareLink(e) {
      document.querySelector(`pre .${e.target.id}`).textContent = e.target.value.trim();
    }
    function runUrl() {
      // console.log(document.querySelector('pre').textContent.trim());
      window.location.assign(document.querySelector('pre').textContent.trim());
    }
  }  
</script>

4 odpowiedzi

odpowiedź 3 czerwca 2022 przez VBService Ekspert (253,340 p.)

Możesz też po stronie php dopiero połączyć dwie wartości w jedną i przekierować na tak utworzony adres url.

przykład

<?php

  if ($_SERVER['REQUEST_METHOD'] == "POST") {
    $a = trim($_POST['aaa']) ?? null;
    $b = trim($_POST['bbb']) ?? null;

    $allowed = "/^[a-zA-Z]*$/"; // dla demonstracji tylko małe i duże litery

    if ($a && $b && preg_match($allowed, $a) && preg_match($allowed, $b)) {
      $ukryte = [ null, 'UKRYTE1', 'UKRYTE2', 'UKRYTE3' ];
      $url = "https://index.php?value={$ukryte[1]}{$a}{$ukryte[2]}{$b}{$ukryte[3]}";

      header("Location: {$url}");
      exit;
    }
  }

?>
<!DOCTYPE html>
<html lang="pl-PL">
  <head>
    <meta charset="utf-8">

    <style>
      input.aaa {
        border: 2px solid darkred;
      }
      input.bbb {
        border: 2px solid green;
      }
      pre {
        font: 300 1.2em/1 monospace;
      }
      .aaa, .bbb {
        font-weight: bold;
      }
      .aaa {
        color: darkred;
      }
      .bbb {
        color: green;
      } 
    </style>
  </head>
  <body>
 
    <div class="container">
      <form method="post">
        <label for="aaa">aaa:</label>
        <input type="text" id="aaa" class="aaa" name="aaa" value="">
        <label for="bbb">bbb:</label>
        <input type="text" id="bbb" class="bbb" name="bbb" value="">
        <input type="submit" value="Przejdź"> 
      </form>
    </div>

  </body>
</html>

odpowiedź 1 czerwca 2022 przez radek024 Szeryf (77,160 p.)

Rozwiązaniem dla Twojego problemu może będą tablice? Tutaj masz więcej info: https://code-boxx.com/post-array-html-form/

komentarz 1 czerwca 2022 przez Mietek99 Nowicjusz (120 p.)
przywrócone 1 czerwca 2022 przez radek024

niestety to nie działa - w adresie pojawia się po prostu kilka zmiennych o tej samej nazwie, wygląda to tak
index.php?value[]=aaa&value[]=bbb.....

to znaczy zmiana jest bo w przypadku samej wartości "value" dla dwóch inputów wysyłana jest tylko ta ostatnia.

Teraz są obydwie ale nie łączą się

komentarz 1 czerwca 2022 przez radek024 Szeryf (77,160 p.)

W takim razie możesz operować na dodatkowym polu w formularzu - jeżeli masz taką możliwość. Czekasz na wyłapanie submita, robisz preventDefault() i działasz dalej, a następnie wysyłasz formularz. Szerszy opis tutaj: https://stackoverflow.com/questions/67260728/how-to-change-an-input-value-from-javascript-before-submit-a-form

komentarz 1 czerwca 2022 przez ScriptyChris Mędrzec (190,190 p.)

Alternatywnie można też skleić te wartości jakimś unikalnym separatorem, np. "|" - tyle, że serwer musi umieć to przetworzyć.

odpowiedź 2 czerwca 2022 przez spamator12 Nałogowiec (28,230 p.)

odpowiedź 3 czerwca 2022 przez VBService Ekspert (253,340 p.)
edycja 3 czerwca 2022 przez VBService

Proponuje dynamiczne tworzenie adresu href dla <a>

przykład

<style>
  input.aaa {
    border: 2px solid darkred;
  }
  input.bbb {
    border: 2px solid green;
  }
  pre {
    font: 300 1.2em/1 monospace;
  }
  .aaa, .bbb {
    font-weight: bold;
  }
  .aaa {
    color: darkred;
  }
  .bbb {
    color: green;
  }  
</style>

<div class="container">
  <label for="aaa">aaa:</label>
  <input type="text" id="aaa" class="aaa" value="">
  <label for="bbb">bbb:</label>
  <input type="text" id="bbb" class="bbb" value="">
  <pre> </pre>

  <a href="#" id="run_url">Przejdź</a>
</div>

<script>
  window.onload = load;

  function load() {
    const aaa_input = document.querySelector('#aaa'),
          bbb_input = document.querySelector('#bbb'),
          run_url_a_tag = document.querySelector('#run_url');

    const url_patter = 'https://index.php?value=UKRYTE1{{a}}UKRYTE2{{b}}UKRYTE3';
    let url = '';

    aaa_input.oninput = prepareLink;
    bbb_input.oninput = prepareLink;

    function prepareLink() {
      url = url_patter.replace('{{a}}', aaa_input.value.trim());
      url = url.replace('{{b}}', bbb_input.value.trim());

      document.querySelector('pre').textContent = url;
      run_url_a_tag.href = url;
    }
  }  
</script>

jak zajdzie potrzeba dodania znaków np. ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

można użyć dodatkowo encodeURI()