Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: wybór <select> zmiania <input text>
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
gwinon
14.12.2015, 19:55:18
Witam

Chciałbym aby ktoś z Państwa oczywiście za odpłatą zrobił dla mnie coś małego w js.

formularz jest pod adresem http://wklej.to/Ng2gL

Skrypt ma działać następująco: wybierając z <select name=id_people> pracownika np C piotr w inpucie textowym "iga" ma się pojawić text = 1744

Odpowiedniki do pokazania w polu "iga"
C Piotr = 1744
J Grzegorz = ksiadz
S Łukasz = noniwg
U Krzysztof = NIE
Z Rafał = Subaru

Dane oczywiście są zmyślone, będą generowane poprzez php, więc proszę o łatwą strukturę abym nie miał problemu z ich postawianiem.
Acha obecny skrypt uniemożliwia naciśnięcie przycisku jeżeli wszystkie pola nie będą użyte.

Proszę o kontakt zainteresowanych, proszę o rozsądne ceny smile.gif
trueblue
14.12.2015, 20:20:48
Może na początek nie warto szastać pieniędzmi i przeznaczyć je na kurs obsługi Google?
http://stackoverflow.com/questions/4564659...ns-using-jquery
gwinon
14.12.2015, 22:00:46
Dobry człowieku !
Jak wsadzić wynik do input value ?
Jak zrobię tak <input type="text" class="form-control" value="<span id="foo"></span>" /> to wychodzą straszne bzdury.
Nie krzyczcie - proszę ...

Cytat(trueblue @ 14.12.2015, 20:20:48 ) *
Może na początek nie warto szastać pieniędzmi i przeznaczyć je na kurs obsługi Google?
http://stackoverflow.com/questions/4564659...ns-using-jquery

trueblue
15.12.2015, 08:34:16
Pokaż co do tej pory zrobiłeś.
gwinon
15.12.2015, 15:43:23 
[PHP] pobierz, plaintext 
  1. <script>
  2. $(function() {
  3.     $( "#dialog" ).dialog({width: 700, height: 300, position: 'top'});
  4.  
  5. 	$('#select').change(function(){
  6.         var selected = $(this).find('option:selected');
  7.        $('#text').html(selected.text()); 
  8.        $('#value').html(selected.val()); 
  9.        $('#foo').html(selected.data('foo'));
  10.  
  11.     }).change();
  12. });
  13. </script>
  14.  
  15. <p><span id="text"></span> <span id="value"></span> <span id="foo"></span> </p>
[PHP] pobierz, plaintext


a chciałbym aby zawartość foo wstawiała się w input <input type="text" value="?" name="">

Proszę o pomoc - zacząłem wczoraj kurs Jquery, ale trochę potrwa ... smile.gif
trueblue
15.12.2015, 20:14:12
A gdzie jest <select> i dlaczego chcesz kopiować zawartość foo do [i]<input>[/i], którego zresztą również nie ma w kodzie?
gwinon
15.12.2015, 20:44:15 
[PHP] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=ISO-8859-2">
  5. <link rel="icon" href="../ico.ico" type="image/x-icon" />
  6. <link rel="shortcut icon" href="../ico.ico" type="image/x-icon" />
  7.  
  8. <script type="text/javascript" src="../boxover.js"></script>
  9.  
  10. <link rel="stylesheet" href="../frameworks/bootstrap/css/bootstrap.min.css">
  11. <link rel="stylesheet" href="../frameworks/jquery/style.css" />
  12. <link rel="stylesheet" href="../frameworks/jquery/jquery-ui.css" />
  13. <link rel="stylesheet" href="../frameworks/font-awesome-4.5.0/css/font-awesome.css" />
  14. <link rel="stylesheet" href="../frameworks/bootstrap-submenu-2.0.1-dist/css/bootstrap-submenu.min.css" />
  15.  
  16. <script src="../frameworks/bootstrap/js/bootstrap.min.js"></script>
  17. <script src="../frameworks/jquery/jquery-1.9.1.js"></script>
  18. <script type="text/javascript" src="../frameworks/jquery/jquery-ui.js"></script>
  19. <script src="../frameworks/bootstrap/js/dropdown.js"></script>
  20. <script src="../frameworks/bootstrap-submenu-2.0.1-dist/js/bootstrap-submenu.min.js"></script>
  21.  
  22. <script src="../frameworks/jquery/jquery.dataTables.js"></script>
  23. <script src="../frameworks/jquery/dataTables.bootstrap.js"></script>
  24.  
  25. <script src="http://jedfoster.com/js/readmore.min.js"></script>
  26. <link rel="stylesheet" href="../login/loginmodule.css" type="text/css">
  27.  
  28.  
  29. <script>
  30. $(function() {
  31. 	$('[data-submenu]').submenupicker();
  32. });
  33. </script>
  34. <script>
  35. $(function() {
  36.     $('[data-submenu]').submenupicker();
  37.  
  38. 	$( document ).tooltip();
  39.  
  40. 	$('article').readmore({
  41. 	  speed: 75,
  42. 	  moreLink: '<a href="#">Pokaż więcej <i class="fa fa-angle-double-right"></i></a>',
  43. 	  lessLink: '<a href="#">Zwiń <i class="fa fa-sort-asc"></i></a>'
  44. 	});	
  45. });
  46. </script>
  47.  
  48. <script>
  49. 	onload = function(){
  50. 		var i;
  51. 		var el, tempEls, els = [];
  52.  
  53. 		for( i = 0, tempEls = document.getElementsByClassName("form-control"); el = tempEls[i++]; ){ els.push( el ); }
  54.  
  55. 		testForm( els );
  56.  
  57.         for( i = 0; el = els[i++]; ){
  58.             el.addEventListener("change", function(){ testForm( els ); });
  59.         }
  60. 	}
  61.  
  62. 		function testForm( els ){
  63. 			var sendButton = document.getElementById("send");
  64. 			var el;
  65. 			for( var i = 0; el = els[i++]; ){
  66. 				if( el.id == "number" && !isNumber( el.value) ){
  67. 						sendButton.disabled = true;
  68. 						return false;				
  69. 				}
  70.  
  71. 				if( hasClass( el, "form-control") ){
  72. 					if( 
  73. 						(el.nodeName == "SELECT" && el.selectedIndex == 0) ||
  74. 						(el.nodeName != "SELECT" && el.value == "" )
  75. 					){
  76. 						sendButton.disabled = true;
  77. 						return false;
  78. 					}
  79. 				}						
  80. 			}
  81. 			sendButton.disabled = false;
  82. 			return true;
  83. 		}	
  84.  
  85. 	function hasClass( target, className ) {
  86. 		return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
  87. 	}
  88.  
  89. 	function isNumber(n) {
  90. 		return !isNaN(parseFloat(n)) && isFinite(n);
  91. 	}
  92. </script>
  93.  
  94.  
  95. 	<title>e-</title>
  96. </head> 
  97.  
  98. <body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">
  99.  
  100. <script>
  101. $(function() {
  102.     $( "#dialog" ).dialog({width: 700, height: 300, position: 'top'});
  103.  
  104. 	$('#select').change(function(){
  105.         var selected = $(this).find('option:selected');
  106.        $('#text').html(selected.text()); 
  107.        $('#value').html(selected.val()); 
  108.        $('#foo').html(selected.data('foo'));
  109. 	   $("#trasa").val(4);
  110.     }).change();
  111. });
  112. </script>
  113.  
  114.  
  115.  
  116.  
  117.  
  118. <div id="dialog" title="Wyjazd"><br />
  119.  <form action="save.php" method="post">
  120.   <input type="hidden" name="typ" value="p" />
  121.   <table border="0" width="85%">
  122.    <tr> <td></td> <td align=\"right\"><h5>Wybierz Pracownika</h5></td> 
  123.     <td> <select id="select" name="id_people" class="form-control"> 
  124. <option></option>
  125. <option value="695" data-foo="Piter" class="form-control input-lg">Piotr</option>
  126. <option value="884" data-foo="Greg" class="form-control input-lg">Grzegorz</option>
  127. <option value="633" data-foo="Gonzo" class="form-control input-lg">Łukasz</option>
  128. <option value="900" data-foo="pOPRAWNY" class="form-control input-lg">Krzysztof</option>
  129. <option value="33" data-foo="Szubaru" class="form-control input-lg">Adrian</option>
  130. </td> </tr>
  131.  
  132.    <tr>
  133.    <td></td> <td><h5>cel</h5></td> <td><input type="text" name="trasa" /></td>
  134.    </tr>
  135.  
  136.   </table><br />
  137.  <center>
  138.  <button id="send" type="submit" class="btn btn-success btn-xl"><i class="fa fa-floppy-o"></i> zapisz</button>
  139.  <a href="index.php" class="btn btn-default btn-xl"><i class="fa fa-times"></i> anuluj</a>
  140.  </center>
  141.  </form>
  142. <p><span id="text"></span> <span id="value"></span> <span id="foo"></span> </p>
  143. </div>
  144.  
  145.  
  146. </body>
  147. </html>
  148.  
  149.  
  150.  
  151.  
  152.  
  153.  
  154.  
[PHP] pobierz, plaintext
trueblue
15.12.2015, 21:05:53
Czyli zawartość atrybutu foo ma iść o <span> o tym id, nie do <input>.
Skrypt nie działa, tak? Uruchamiałeś konsolę przeglądarki (Chrome->F12->Console)?
gwinon
15.12.2015, 21:31:17
skrypt działa, tylko nie potrafię foo wstawić do input text
trueblue
15.12.2015, 21:39:10
https://www.google.pl/search?q=jquery+set+value+input+text
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.