Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: formularz JS HTML
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
tuiko
26.04.2012, 12:54:44
witam ! mamy do szkoły zrobić formularz HTML wysyłający dane za pomocą JS lecz cos mi chyba brakuje.. więc prosił bym was o pomoc dodam że proszę się nie śmiać gdyż jestem raczkujący w tym temacie smile.gif

mam takowy formularz w HTML

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.  
  6. <meta name="Keywords" content="" />
  7. <meta http-equiv="content-language" content="pl">
  8. <link href="index/css/style.css" rel="stylesheet" type="text/css" />
  9.  
  10. <script type="text/javascript" src="index/js/form.js" ></script>
  11.  
  12.                         <div id="errorR" style="color:red;display:none">Wypełnij poprawnie formularz</div>
  13.                         <div id="email_errorR" style="color:red;display:none">Wpisz poprawny email</div>
  14.                         <div id="sendR" style="color:green;display:none">Wiadomość została wysłana</div>
  15.                         <div style="text-align: left; padding-right: 8px">
  16.                             <p>
  17.                                 <input id="nameR" class="formInput hidetxt" value="Imię i nazwisko" type="text" style="width: 215px;" onclick="clearForm(this)" />
  18.                             </p>
  19.                             <p>
  20.                                 <input id="phoneR" class="formInput hidetxt" value="Telefon" type="text" style="width: 215px;" onclick="clearForm(this)" />
  21.                             </p>
  22.                             <p>
  23.                                 <input id="emailR" class="formInput hidetxt" value="Adres e-mail" type="text" style="width: 215px;" onclick="clearForm(this)" />
  24.                             </p>
  25.                             <p id='date_p'>
  26.                                 Data:    <input id="dateR" class="formInput" type="text" style="width: 150px;" onclick="clearForm(this)" />
  27.                             </p>
  28. 				<p id='hour_p'>
  29.                                 Godzina  od:    <input id="hourR1" class="formInput" type="text" style="width: 50px;" onclick="clearForm(this)" />
  30. 				do: <input id="hourR2" class="formInput" type="text" style="width: 50px;" onclick="clearForm(this)" />
  31.                             </p>
  32.                         </div>
  33.  
  34.                         <br/>
  35.  
  36.                         <div class="clear"> </div>
  37.                         <div class="button_red" style="padding-left: 50px;">
  38.                           <a href="java script:void(0)" onclick="sendReservation()"><span><span><i>wyslij</i></span></span></a>
  39.                         </div>
  40.                         <div class="clear" > </div>
  41.  
  42.                       </div>
  43.                       <div id="BoxRightBottom" ></div>
  44.                                         </div>
  45.                   </div>
  46.         </table>
  47.     </body>
  48. </html>
[HTML] pobierz, plaintext


oraz plik form.JS
[PHP] pobierz, plaintext 
  1. function isValidEmailAddress(emailAddress) {
  2. 	var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
  3.     return pattern.test(emailAddress);
  4. }
  5. function checkMail()
  6. {
  7. 	$("#error").hide();
  8. 	$("#send").hide();
  9. 	$("#email_error").hide();
  10. 	var error = 0;
  11. 	if($("#name").val()=="" )
  12. 	{
  13. 		//alert(1);
  14. 		error = 1;
  15. 	}
  16. 	if($("#email").val()=="" )
  17. 	{
  18. 		//alert(2);
  19. 		error = 1;
  20. 	}
  21.         if($("#message").val()=="" )
  22. 	{
  23. 		//alert(2);
  24. 		error = 1;
  25. 	}
  26. 	if(!isValidEmailAddress($("#email").val()))
  27. 	{
  28. 		$("#email_error").show(500);
  29. 		return false;
  30. 		error = 1;
  31. 	}
  32.  
  33. 	if(error==1)
  34. 	{
  35. 		$("#error").show(500);
  36. 		return false;
  37. 	}
  38. 	else
  39. 	{
  40.  
  41. 		return true;
  42. 	}
  43. }
  44.  
  45. function clearForm(object)
  46. {
  47. 	$(object).css('color','black');
  48. 	$(object).css('font-weight','normal');
  49. }
  50.  
  51. function checkForm()
  52. {
  53. 	$("#errorR").hide();
  54. 	$("#sendR").hide();
  55. 	$("#email_errorR").hide();
  56. 	var error = 0;
  57. 	if($("#nameR").val()=="" || $("#nameR").val()=="ImiÄ? i nazwisko" )
  58. 	{
  59. 		//alert(1);
  60. 		$("#nameR").css('color','red');
  61.         	$("#nameR").css('font-weight','bold');
  62. 		error = 1;
  63. 	}
  64. 	if($("#emailR").val()=="" || $("#emailR").val()=="Adres e-mail" )
  65. 	{
  66. 		$("#emailR").css('color','red');
  67.         	$("#emailR").css('font-weight','bold');
  68. 		error = 1;
  69. 	}
  70.     if($("#phoneR").val()=="" || $("#phoneR").val()=="Telefon" )
  71. 	{
  72. 		$("#phoneR").css('color','red');
  73.         	$("#phoneR").css('font-weight','bold');
  74. 		error = 1;
  75. 	}
  76.  
  77. 	if(!isValidEmailAddress($("#emailR").val()))
  78. 	{
  79. 			$("#emailR").css('color','red');
  80.         	$("#emailR").css('font-weight','bold');
  81. 		return false;
  82. 		error = 1;
  83. 	}
  84.  
  85. 	if(error==1)
  86. 	{
  87. 		//$("#errorR").show(500);
  88. 		return false;
  89. 	}
  90. 	else
  91. 	{
  92.  
  93. 		return true;
  94. 	}
  95. }
  96.  
  97. function sendReservation()
  98. {
  99. 	if(checkForm())
  100. 	{
  101.  
  102. 		var e = $("#emailR").val();
  103.  
  104.                 var n = $("#nameR").val();
  105.                 var p = $("#phoneR").val();
  106.                 var d = $("#dateR").val();
  107. 		var d = $("#dateR").val();
  108. 		var h1 = $("#hourR1").val();
  109. 		var h2 = $("#hourR2").val();
  110. 		$.ajax({
  111. 			   type: "POST",
  112. 			   url: host+"/index.php?a=reservation",
  113. 			   data: "email="+e+"&name="+n+"&phone="+p+"&date="+d+"&hour1="+h1+"&hour2="+h2,
  114. 			   success: function(msg){
  115. 					$("#sendR").show(100);
  116. 					setTimeout('$("#sendR").slideUp("slow")',3000);
  117.  
  118. 			   }
  119. 			 });
  120.  
  121. 	}
  122. }
[PHP] pobierz, plaintext


przypuszczam iż czegoś brakuje w miejscu url: host+"/index.php?a=reservation", lub coś jest źle tylko co ? bo myślę szukam ale nie umię sobie dać z tym rady.. gdyż po kliknięciu wyślij nic się nie dzieje
Sinevar
26.04.2012, 13:57:38
Tam zdaje się nie zadeklarowałeś nigdzie zmiennej host. No i według mnie chyba ładniej jest komponować parametry w sekcji data jako obiekt.
Sprawdź czy to Ci zadziała (oczywiscie zmienne e,n,p muszą być wcześniej podeklarowane):

[HTML] pobierz, plaintext 
  1. $.ajax({
  2.   type: "POST",
  3.   url: "/index.php?a=reservation",
  4.   data: {
  5.     'email': e, 
  6.     'name': n,
  7.     'phone': p
  8.   },
  9.   success: function(msg){
  10.     $("#sendR").show(100);
  11.   }
  12. });
[HTML] pobierz, plaintext
tuiko
26.04.2012, 14:42:49
hmmm podeklarowane czyli zmieniłem ale dalej nie chce to jeszcze jakoś działać..
Sinevar
26.04.2012, 15:08:49
A jak wygląda u Ciebie część PHP'owa, która obsługuje ajaxowego calla ? Możesz to tu wkleić ?
lukesh
26.04.2012, 19:03:30
Jak dla mnie, to powinieneś trochę "odchudzić" swój kod, bo za dużo tego wszystkiego. smile.gif

Skorzystaj z przycisku submit:

[HTML] pobierz, plaintext 
  1. <input type="submit" value="Wyślij" />
[HTML] pobierz, plaintext


A w JS zrób coś podobnego:

[HTML] pobierz, plaintext 
  1. $(document).ready(function(){
  2.     $('form').submit(function(){
  3.         if(chechForm(){
  4.             alert($('form').serialize()); // <- tak możesz sprawdzić, co zostanie wysłane
  5.             $.post(host+"/index.php?a=reservation", data: $('form').serialize(), function(msg){
  6.                 $("#sendR").show(100);
  7. 		setTimeout('$("#sendR").slideUp("slow")',3000);
  8.             });
  9.         }
  10.     });
  11. });
[HTML] pobierz, plaintext
tuiko
27.04.2012, 20:52:52
Sinevar części php-owej nie było taki skrypt goły dostałem od znajomego może tego brakuje ? a jeśli tak to jak cos takiego stworzyć tez mnie to zastanawiało ze nigdzie nie ma miejsca na wpisanie meila gdzie to ma być wysyłane

hmmm i umarło smile.gif kurcze ma ktos jakis pomysl bo ciemna masa ze mnie jeśli o to chodzi..
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.