Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML]Problem z formularzem
Forum PHP.pl > Forum > Przedszkole
senior.pol
13.02.2014, 20:30:44
Witam,
Po wybraniu daty z kalendarza w polu input i wysłaniu go, nie dochodzi do mnie wybrana data, czyli wysyła mi puste pole.

Pozostałe pola działają i nie ma z nimi problemu.

Nie wiem co może sprawiać ten problem, dlatego podsyłam fragmenty kodów. Podejrzewam, że może to być js (3 skrypt). Czy pole label i atrybut id też powinienem tam zamieścić? Jeśli tak to proszę o wskazówki.
[HTML] pobierz, plaintext 
  1. <div class="bfh-datepicker" data-format="d/m/y" >
  2. <label for="data1">Data... <span>*</span></label>
  3. <input name="data1" type="text" id="data1" class="datepicker" />
  4. </div>
[HTML] pobierz, plaintext 


[JAVASCRIPT] pobierz, plaintext 
  1. jQuery(document).ready(function(){
  2. 	var shake = "Yes";
  3.  
  4. 	$('#message').hide();
  5.  
  6. 	$('#rezerwacja input[type=text], #rezerwacja input[type=email], #rezerwacja input[type="checkbox"]').each(function(){
  7. 		$(this).after('<mark class="validate"></mark>');
  8. 	});
  9.  
  10. 	$('#email').focusout(function() {
  11. 		if (!$(this).val() || !isEmail($(this).val()))
  12. 			$(this).addClass('error', 300).parent().find('mark').removeClass('valid').addClass('error');
  13. 		else
  14. 			$(this).removeClass('error', 300).parent().find('mark').removeClass('error').addClass('valid');
  15. 	});
  16.  
  17. 	$('#data1').focusout(function() {
  18. 		if (!$(this).val())
  19. 			$(this).addClass('error', 300).parent().find('mark').removeClass('valid').addClass('error');
  20. 		else
  21. 			$(this).removeClass('error', 300).parent().find('mark').removeClass('error').addClass('valid');
  22. 	});
  23.  
  24. 	$('#submit').click(function() {
  25. 		$("#message").slideUp(200,function() {
  26. 			$('#message').hide();
  27. 			$('#email').triggerHandler("focusout");
  28. 			$('#data1').triggerHandler("focusout");
  29. 		});
  30. 	});
  31.  
  32. 	$('#xxx').submit(function(){
  33.  
  34. 		if ($('#rezerwacja mark.error').size()>0) {
  35. 			if(shake == "Yes") {
  36. 			$('#rezerwacja').effect('shake', { times:2 }, 75);
  37. 			}
  38. 			return false;
  39. 		}
  40.  
  41. 		var action = $(this).attr('action');
  42.  
  43.  		$('#submit')
  44. 			.after('<img src="xxx" class="loader" />')
  45. 			.after('<div class="send">xxx</div>')
  46. 			.attr('disabled','disabled');
  47.  
  48. 		$.post(action, $('#xxx').serialize(),
  49. 			function(data){
  50. 				$('#message').html( data );
  51. 				$('#message').slideDown();
  52. 				$('#xxx img.loader').fadeOut('slow',function(){$(this).remove()});
  53. 				$('#xxx #submit2').removeAttr('disabled');
  54. 				if(data.match('success') != null) $('#xxx #submit').attr("disabled", true);
  55. 			}
  56. 		);
  57.  
  58. 		return false;
  59.  
  60. 	});
  61.  
  62. 	function isEmail(emailAddress) {
  63.  
  64. 		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);
  65.  
  66. 		return pattern.test(emailAddress);
  67. 	}
  68.  
  69. 	function isNumeric(input) {
  70.     	return (input - 0) == input && input.length > 0;
  71. 	}
  72.  
  73. });
  74.  
[JAVASCRIPT] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
  1. ,this.$element.html('<div class="'+c+' bfh-datepicker-toggle" data-toggle="bfh-datepicker">'+a+'<input type="text" name="'+this.options.name+'" class="'+this.options.input+'" placeholder="'+this.options.placeholder+'" readonly>'+b+"</div>"+'<div class="bfh-datepicker-calendar">'+'<table class="calendar table table-bordered">'+"<thead>"+'<tr class="months-header">'+'<th class="month" colspan="4">'+'<a class="previous" href="#"><i class="glyphicon glyphicon-chevron-left"></i></a>'+"<span></span>"+'<a class="next" href="#"><i class="glyphicon glyphicon-chevron-right"></i></a>'+"</th>"+'<th class="year" colspan="3">'+'<a class="previous" href="#"><i class="glyphicon glyphicon-chevron-left"></i></a>'+"<span></span>"+'<a class="next" href="#"><i class="glyphicon glyphicon-chevron-right"></i></a>'+"</th>"+"</tr>"+'<tr class="days-header">'+"</tr>"+"</thead>"+"<tbody>"+"</tbody>"+"</table>"+"</div>"
[JAVASCRIPT] pobierz, plaintext
viking
13.02.2014, 20:36:13
Co to jest? id="datepickers data1"

http://www.w3.org/html/wg/drafts/html/mast...he-id-attribute
The value must not contain any space characters.
senior.pol
16.02.2014, 00:02:44
Cytat(viking @ 13.02.2014, 20:36:13 ) *
Co to jest? id="datepickers data1"

http://www.w3.org/html/wg/drafts/html/mast...he-id-attribute
The value must not contain any space characters.


Poprawione, ale dalej nie działa.

Znalazłem w sieci taką informację:

2. You can add an ID to the element and use the val function to retrieve the value.

Example: 
[HTML] pobierz, plaintext 
  1. <div class="bfh-datepicker" id="datepicker1"></div>
[HTML] pobierz, plaintext

Then, in jQuery, you can access the value as follows: 
[JAVASCRIPT] pobierz, plaintext 
  1. $('#datepicker1').val();
[JAVASCRIPT] pobierz, plaintext

Pytanie brzmi, gdzie wkleić ten kod js - do biblioteki jquery, do pliku js tego kalendarza, czy wstawić bezpośrednio na stronie 
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">$('#datepicker1').val();</script>
[HTML] pobierz, plaintext
?
_Borys_
16.02.2014, 12:46:01
data-name
[HTML] pobierz, plaintext 
  1. <div class="bfh-datepicker" data-name="data1" data-format="d/m/y">
  2. <label for="data1">Data rozpoczęcia rejsu: <span>*</span></label>
  3. <input type="text" id="kalendarz" class="datepicker">
  4. </div>
[HTML] pobierz, plaintext
senior.pol
16.02.2014, 16:34:09
Cytat(_Borys_ @ 16.02.2014, 12:46:01 ) *
data-name
[HTML] pobierz, plaintext 
  1. <div class="bfh-datepicker" data-name="data1" data-format="d/m/y">
  2. <label for="data1">Data rozpoczęcia rejsu: <span>*</span></label>
  3. <input type="text" id="kalendarz" class="datepicker">
  4. </div>
[HTML] pobierz, plaintext

Dzięki, wszystko teraz działa poprawnie specool.gif
_Borys_
16.02.2014, 17:01:18
W moim poprzednim poście powinno być <label for="kalendarz"> ale to nie działa, niezależnie czy przed divem czy wewnątrz diva.
<label> jakoś nie chce działać z atrybutem for na żadne sposoby, jedyne co zadziałało to takie coś.
[HTML] pobierz, plaintext 
  1. <label>Data rozpoczęcia rejsu:<span>*</span>
  2. <div class="bfh-datepicker" data-name="data1" data-format="d/m/y">
  3. <input type="text" id="kalendarz" class="datepicker">
  4. </div>
  5. </label>
[HTML] pobierz, plaintext
senior.pol
16.02.2014, 17:05:08
Cytat(_Borys_ @ 16.02.2014, 17:01:18 ) *
Jeszcze <label> jakoś nie chce działać z atrybutem for na żadne sposoby, jedyne co zadziałało to takie coś
[HTML] pobierz, plaintext 
  1. <label>Data rozpoczęcia rejsu:<span>*</span>
  2. <div class="bfh-datepicker" data-name="data1" data-format="d/m/y">
  3. <input type="text" id="kalendarz" class="datepicker">
  4. </div>
  5. </label>
[HTML] pobierz, plaintext

Tak, też wcześniej zrobiłem i zadziałało. Dzięki wielkie jeszcze raz.
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.