Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [jQuery][ajax] błąd przy wysyłaniu danych, skrypt wysła dane z nieistniejących inputów
damianooo
post 5.08.2017, 23:30:29
Post #1





Grupa: Zarejestrowani
Postów: 493
Pomógł: 2
Dołączył: 15.07.2011
Skąd: Katowice

Ostrzeżenie: (0%)
-----


Zrobiłem responsywny formularz, który w zależności od tego czy jest wyświetlany na małym ekranie czy na dużym pokazuje lub ukrywa pewne pola tagi html.
Problem w tym że jak wysyłam dane ajaxem to dostaję błąd 500 i w Firebugu w zakładce POST widzę że wraz z danymi wysłanymi idą puste dane z inputów, które powinny być niewidoczne dla skryptu.
Jak zakomentuję inputy, które nie powinny być widoczne to skrypt działa bez problemu i wysyła dane.
Co robię źle lub co jeszcze powinienem dopisać aby skrypt działał ?

HTML:
  1. ...
  2. {% else %}
  3.  
  4. <form id="form">
  5. <table class="tab_types">
  6. {% for key,meet in meets %}
  7. <input type="hidden" name="meet_id[]" value="{{ meet.meet_id }}" />
  8. <tr class="big_screen">
  9. <td class="desc">{{ meet.league }}</td>
  10. <td class="host">{{ meet.host }}</td>
  11. <td class="type"><input type="text" class="tp" name="hostType[]" maxlength='1'></td>
  12. <td class="gap">-</td>
  13. <td class="type"><input type="text" class="tp" name="guestType[]" maxlength='1'></td>
  14. <td class="guest">{{ meet.guest }}</td>
  15. <td class="term">{{ meet.term }}</td>
  16. </tr>
  17.  
  18. <tr class="small_screen">
  19. <td class="position">{{loop.index}}.</td>
  20. <td class="team_name">
  21. {{ meet.host }}
  22. </td>
  23. <td class="user_type">
  24. <input type="text" class="tp" name="hostType[]" maxlength='1' />
  25. </td>
  26. </tr>
  27.  
  28. <tr class="small_screen">
  29. <td class="position"></td>
  30. <td class="team_name">
  31. {{ meet.guest }}
  32. </td>
  33. <td class="user_type">
  34. <input type="text" class="tp" name="guestType[]" maxlength='1' />
  35. </td>
  36. </tr>
  37. {% endfor %}
  38. <tr>
  39. <td><input type="submit" value="Wyślij" class="space"/></td>
  40. </tr>
  41. </table>
  42. </form>
  43. {% endif %}
  44.  
  45. <script type="text/javascript">
  46. $(function(){
  47. $("#form").submit(function(e){
  48. var form=$(this);
  49. $.ajax({
  50. url:"{{ path('liga_typerow_types') }}",
  51. dataType:"JSON",
  52. type:"POST",
  53. data:form.serialize(),
  54. success:function(){
  55. form.get(0).reset();
  56. console.log("jest ok");
  57. location.reload();
  58. },
  59. error: function() {
  60. console.log("Wystąpił błąd");
  61. }
  62. });
  63. e.preventDefault();
  64. });
  65. });
  66. </script>


CSS:

  1. /* USTAWIENIA DLA KAŻDEGO EKRANU */
  2.  
  3. table.tab_types {
  4. width: 100%;
  5. /*border-collapse: collapse;*/
  6. }
  7.  
  8. th {
  9. background: #333;
  10. color: white;
  11. font-weight: bold;
  12. }
  13.  
  14. td, th {
  15. padding: 6px;
  16. border: 1px solid #ccc;
  17. text-align: center;
  18. }
  19.  
  20. input[type="text"].tp {
  21. width: 10px;
  22. }
  23.  
  24. /* USTAWIENIA DLA DUŻEGO EKRANU */
  25.  
  26. @media screen and (min-width:680px) {
  27.  
  28. /* niewidoczne */
  29. tr.small_screen{
  30. display: none;
  31. }
  32.  
  33. tr:nth-of-type(odd) {
  34. background: #eee;
  35. }
  36.  
  37. }
  38.  
  39. /* USTAWIENIA DLA MAŁEGO EKRANU */
  40.  
  41. @media screen and (max-width:680px) {
  42.  
  43. /* niewidoczne */
  44. tr.big_screen,td.term,td.desc,
  45. tr.col_name,td.gap,td.host,
  46. td.guest,td.type {
  47. display: none;
  48. }
  49.  
  50. /* widoczne */
  51. td.position{
  52. width: 10%;
  53. }
  54.  
  55. td.team_name{
  56. text-align: left;
  57. width: 80%;
  58. }
  59.  
  60. td.user_type{
  61. width: 10%;
  62. }
  63.  
  64. tr.small_screen:nth-of-type(3n) {
  65. background: #eee;
  66. }
  67. }


POST widoczny w Firebugu:
  1. guestType[]
  2. 1
  3. guestType[]
  4. guestType[]
  5. 1
  6. guestType[]
  7. guestType[]
  8. 1
  9. guestType[]
  10. guestType[]
  11. 1
  12. guestType[]
  13. guestType[]
  14. 1
  15. guestType[]
  16. guestType[]
  17. 1
  18. guestType[]
  19. guestType[]
  20. 1
  21. guestType[]
  22. guestType[]
  23. 1
  24. guestType[]
  25. guestType[]
  26. 1
  27. guestType[]
  28. guestType[]
  29. 1
  30. guestType[]
  31. hostType[]
  32. 1
  33. hostType[]
  34. hostType[]
  35. 1
  36. hostType[]
  37. hostType[]
  38. 1
  39. hostType[]
  40. hostType[]
  41. 1
  42. hostType[]
  43. hostType[]
  44. 1
  45. hostType[]
  46. hostType[]
  47. 1
  48. hostType[]
  49. hostType[]
  50. 1
  51. hostType[]
  52. hostType[]
  53. 1
  54. hostType[]
  55. hostType[]
  56. 1
  57. hostType[]
  58. hostType[]
  59. 1
  60. hostType[]
  61. meet_id[]
  62. 1
  63. meet_id[]
  64. 2
  65. meet_id[]
  66. 3
  67. meet_id[]
  68. 4
  69. meet_id[]
  70. 5
  71. meet_id[]
  72. 6
  73. meet_id[]
  74. 7
  75. meet_id[]
  76. 8
  77. meet_id[]
  78. 9
  79. meet_id[]
  80. 10

Go to the top of the page
+Quote Post
viking
post 6.08.2017, 07:04:34
Post #2





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Dla js nie ma znaczenia czy coś ukrywasz w css. Robisz form.serialize więc wysyłka się cały formularz. Podziel na dwa albo wybieraj konkretne pola.


--------------------
Go to the top of the page
+Quote Post
damianooo
post 6.08.2017, 20:41:54
Post #3





Grupa: Zarejestrowani
Postów: 493
Pomógł: 2
Dołączył: 15.07.2011
Skąd: Katowice

Ostrzeżenie: (0%)
-----


ale co mam podzielić na dwa ? ... dwa osobne formularze zrobić , jeden na małe urządzenia i osobny na większe ekrany ?
apropo wybierania konkretnych pól .. mam je wybierać w samym skrypcie jQuery ?

Go to the top of the page
+Quote Post
viking
post 7.08.2017, 06:55:02
Post #4





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


https://jsfiddle.net/hn6tkk2t/1/


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 21:31