Formularz html z listy rozwijalnej MYSQL - jak dodawać z tej listy dane do pola text?

Question

Chciałbym w formularzu html dodawać usługi z listy rozwijalnej która pobiera dane z MYSQL do pola text (w tej chwili mam pole text do wpisywania z ręki usług) i nie wiem jak to zrobić. Jakie są na to sposoby? O ile przy jednej usłudze to proste bo wybrana opcja z listy rozwijalnej pójdzie z submitem ale jak się robi dodawanie większej ilości usług? To w sumie prosta rzecz zapewne bo to wybieranie produktów czy usług do jednego zlecenia tyle że ja nowicjusz to nie wiem jak to najprościej zrobić. Byłbym wdzięczny za jakieś sugestie bo nawet nie wiem o co zapytać Google 

Poniżej kawałek kodu gdzie za listą rozwijalną jest button i tak myślałem że po jego naciśnięciu doda się usługa z listy do pola text tyle że nie wiem czy to trzeba w JS czy robi się to inaczej

<?php
                $query = "SELECT * FROM `uslugi`";
                $result = mysqli_query($con, $query);
                ?>

                <div><fieldset>
                 <legend>Wybór usług</legend><br>
                  <select>
                    <?php while($row = mysqli_fetch_array($result)):;?>
                    <option value="<?php echo $row[0];?>"><?php echo $row[1];?></option>
                    <?php endwhile;?>
                  </select>
                  <input class="button3" type="button" onClick="" name="Dodaj" value="Dodaj">
                </fieldset>
              </div><br>

              <div class="personalia"><textarea cols="50" rows="8" name="Opis" placeholder="Zakres zleconych usług" required/></textarea></div></br></br>

 

Answer 1

zalozmy ze masz taka liste 

<select id="my-select">
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
    <option value="4">Test 4</option>
    <option value="5">Test 5</option>
</select>
<textarea id="my-textarea" cols="50" rows="8" name="Opis" placeholder="Zakres zleconych usług" required/></textarea>

Tylko dodaj ID do textarea to my-selected zeby bylo wiadomo gdzie to wstawic

To w pliku JS napisz

$(document).on('click', '.button3', function() {
var selected = $( "#my-select option:selected" ).text();
$('#my-textarea').append(selected); 
});

I dolacz biblioteke jQuery

Mozesz sie spotkac z zpaisem

$('.button3').click( function() {

ten sam kod tutaj

}); 

ale uzywajac docuemnt binudjesz wartosc nawet po dodaniu jej dynamicznie to znaczy ze jesli dodasz pole select z JavaScript dynamicznie to tez zareaguje ci na wybranie danej wartosci. wiec sorsuj $(document)

No a append dodaje ci kolejne linijki do textarea

 

Comments

Ale został jeszcze onClick a tam co wpisać? W poprzedniej odpowiedzi podałeś onClick="javascript:alert('ddd')" ale nie bardzo rozumiem jak to się ma do tego script

Podstawy mam na razie marne więc patrzę na to i porównuję kod i szukam czegoś co się zgadza słownie a tu nie bardzo widzę zazębienia, sorry alem początkujący  i dopiero od miesiąca bawię się w programowanie i mysql, html, css, php, js itp. jest kapkę za dużo dla mnie 

<div><fieldset>
                 <legend>Wybór usług</legend><br>
                  <select>
                    <?php while($row = mysqli_fetch_array($result)):;?>
                    <option value="<?php echo $row[0];?>"><?php echo $row[1];?></option>
                    <?php endwhile;?>
                  </select>
                  <input class="button3" type="button" onClick="" name="Dodaj" value="Dodaj">
                </fieldset>
              </div><br>

 

---

onClick to wywal nie jest to potrzebne jak masz w elemencie ustawione ID to po tym id odwolujesz sie do danego elementu i sprawdzasz czy na niego najechales czy zostal klikniety itd

---

Dzięki super! działa!!! wstawia dane do text ale niestety nie działa super 

Wstawia dane do pola text ale robi to jak na załączniku a gdy kliknę po wstawieniu na pole text żeby dodawał od nowego wiersza wstawianie nie działa już niestety w ogóle. Przyznasz że słabo to wygląda. Można by dodawać to na zasadzie listy numerowanej tak jak tu append tyle że nie wiem jak zmienić kod

1. dane
2. dane2
3. dane3 itd

---

Byc moze jezeli wstawiasz text z listy czyli jesli robisz

var selected = $( "#my-select option:selected" ).text();

to na poczatku doklej nowa linie

var selected = "\n" + $( "#my-select option:selected" ).text();

to \n powinno ci wstawic to w nowa linie to samo mozesz dodawac liczby przed zliczac ile masz linijek i dodawac kolejny numer "\n1 " + .... itd

---

Dzięki działa, co prawda jak klikniesz w pole tekstowe to potem już nie chce dodawać danych ale trudno, dopóki nie znajdę rozwiązania to tak musi być  no i dodawanie numeracji to też nie bardzo to rozumiem chociaż nie muszę robić listy numerowanej a raczej próbowałem w celach edukacyjnych.