autouzupełnianie formularza i edycja danego użytkownika

pytanie zadane 19 lipca 2017 w JavaScript przez sapero Gaduła (4,100 p.)

Witam, proszę o pomoc, mam następujący problem:

chce pobierać do zmiennej w JS wartość z inputa - jednak mam duzo tych inputów ponieważ generują się wraz z ilością użytkowników. PRzykład:

klikam w button "edytuj" (jest tych buttonów np 50) każdy w osobnym formularzu i chce pobrać wartość z inputa w danym formularzu.

<form method="POST" action="" accept-charset="UTF-8" class="form form-3d-a" enctype="multipart/form-data" >
  <input class="form-control" name="userid" id="userid" value="'.$rows['login'].'" type="hidden">
  <button name="delthis" id="delthis" type="submit" class="btn btn-sm btn-danger-small btn-create  btm-3d-md btn3d" style=""><em class="fa fa-trash"></em>usuń</button>
  
  <button  type="button" class="btn btn-sm btn-danger-small btn-create  btm-3d-md btn3d" data-toggle="modal" data-target="#edit"><em class="fa fa-pencil"></em>edytuj</button>
  </form>

każdy z tych inputów będzie miał inną wartość ponieważ wprowadzam tam login użytkownika żeby pobrało ten login i wstawiło go w formularz edycji jako uzupełnione już pole. Jednak potrafię to zrobić tylko z jednym inputem i mógłbym napisać dla każdego inputa js z wybranym id ale to dużo kodu jak na tylu użytkowników. Chciałbym żeby js wiedział że jak kliknę w dany przycisk EDYTUJ przy polu użytkownika to ma pobrać ten konkretny login gdzie mam userid. Mogę się mylić i może jest lepszy sposób na edycje danych z tabeli i auto uzupełnianie do formularza danych.

z góry dziękuję jeśli ktoś postara się pomóc

komentarz 19 lipca 2017 przez Dzordzu Użytkownik (900 p.)

Ty chcesz edytować nazwę użytkownika i tyle?

komentarz 19 lipca 2017 przez sapero Gaduła (4,100 p.)

tak ewentualnie innych danych np imię itd

2 odpowiedzi

odpowiedź 19 lipca 2017 przez Dzordzu Użytkownik (900 p.)

Po co ci w ogóle (w takim razie) 50 inputów? Nie lepiej zrobić 50 zagnieżdżonych divów, p, albo czegokolwiek inego?
Tj.

<div class="user">
<div class="userInfo">
<!-- Tutaj wstawiasz divy z odpowiednimi klasami np.:-->
<div class="name">NazwaUzytkownika</div>
<div class="id">ID</div>
<div class="czyLubieUzytkownika">Nie</div>
</div>
</div>

A potem w JQ za pomocą selektorów:

$(".userInfo").click(function(){

//pobierz dane z dzieci tego itp. itd.
//wklej je do inputów
});

Jeśli chcesz mieć formularz na innej stronie to użyj PHP, Node.js, albo innego serwerowego do pobrania danych z POST i ich wyświetlenia

odpowiedź 19 lipca 2017 przez Chess Szeryf (76,710 p.)

<div id="retrieved_value"></div>
<?php 
for($i=0;$i<=4;$i++){
?>

<form method="post" action="" onsubmit="event.preventDefault();">
	<input type="text" name="write_user<?= $i ?>"/>
	<input type="submit" name="edit" value="edit"/>
	<input type="submit" name="remove" value="remove"/>
	<input type="submit" name="send" value="send"/>
</form>


<script>
var retrieved_value = document.getElementById("retrieved_value");
	document.getElementsByName("send")[<?= $i ?>].addEventListener('click',function(){ 
	 
		 retrieved_value.innerHTML = (document.getElementsByName("<?php echo "write_user".$i; ?>")[0].value);
	},false);

</script>

<?php 
};
?>

komentarz 24 lipca 2017 przez sapero Gaduła (4,100 p.)

nie bardzo wiem jak to zastosować? pomożesz chodzi mi o objąśnienie

komentarz 25 lipca 2017 przez Chess Szeryf (76,710 p.)

Klikasz na send i pobiera ci wartość z pola input text. Możesz sobie to wstawić w jakiś inny input i później to edytować w inny sposób, ja napisałem tylko prototyp, ponieważ nie wiem, co konkretnie zamierzarz osiągnąć.

komentarz 25 lipca 2017 przez sapero Gaduła (4,100 p.)

wyświetla mi tabele użytkowników gdzie mam ich imie i nazwisko, chce kliknąć w guzik obok użytkownika w tabeli "EDYTUJ" otwiera mi się okno edycji tego użytkownika którego wybrałem. i w inputach mam już wstawione jego imię i nazwisko. Prosta edycja z uzupełnieniem pól. Chyba że masz inny pomysł jak to osiągnąć?

komentarz 25 lipca 2017 przez Chess Szeryf (76,710 p.)

<form method="post" action="" onsubmit="event.preventDefault();">
	<input type="text" name="write_user<?= $i ?>" value="
<?php
	if($i==0){
		echo 'marek';
	} 
	if($i==1){
		echo 'henryk';
	} 
	if($i==2){
		echo 'meadow';
	} 
	if($i==3){
		echo 'cow';
	} 
	if($i==4){
		echo 'elephant';
	} 
	
	?>"/>
	<input type="submit" name="edit" value="edit"/>
	<input type="submit" name="remove" value="remove"/>
	<input type="submit" name="send" value="send"/>
</form>

Jeśli chcesz, aby po odświeżeniu strony zapisały ci się zedytowane dane to możesz je zapisać do pliku albo do bazy danych i stamtąd te dane odczytywać.