Заполнение формы с помощью javascript

Я пытаюсь создать простой сайт для регистрации для моей футбольной команды. Мой сайт http://www.labombafootball.com В принципе, я сделал список игроков в моей команде с простой кнопкой «IN/OUT» для игроков, чтобы зарегистрироваться, если они доступны.Заполнение формы с помощью javascript

Вот код ужаса, который я написал (а), пока не смех.

.height2 { 
 
\t height: 50px; 
 
\t text-align: center; 
 
} 
 
.height { 
 
\t height: 100px; 
 
} 
 
.fc { 
 
\t display: block; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
} 
 
body { 
 
\t font-family: monospace; 
 
\t font-size: 4em; 
 
\t font-weight: bold; 
 
} 
 
button { 
 
\t background-color: red; 
 
} 
 
button:focus { 
 
\t background-color: lime; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<title>La Bomba FC</title> 
 
</head> 
 

 
<body> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 height"><img class="fc" src="images/la-bomba-fc-sm.jpg"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#2 STEVE B</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#1 INDER JHOOTY</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#21 CHRIS NAKATSU</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#88 NICK MARSHALL</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#99 TONY YUN</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#6 DANIELE BORRELLI</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#11 NITESH SHETTY</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#45 UDAYA MADANAYAKE</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#9 ADRIAN PARTYKA</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#5 PATRICK REGAN</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#13 RAMEZ ALAM</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#8 FAIZAN ALAM</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#33 DAVID CLEBAN</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#14 VICTOR JIMENEZ</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#7 HARRY SANDHU</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#77 JOHN PINEDA</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#44 DEVON CARNEY</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <div class="col-xs-8 height2">#? JUSTIN CONSTANTINEAU</div> 
 
    <button> 
 
    <div class="col-xs-4">IN/OUT</div> 
 
    </button> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

Может кто-нибудь сказать мне, как я могу сохранить значение после нажатия кнопки?

источник

2016-11-29 Majidiode

У вас есть доступ к базе данных SQL на сервере, на который вы можете сохранить данные? или это должно быть просто сохранено локально на устройстве (в случае, если это было отображено в раздевалке/приеме)? вам, вероятно, лучше всего взглянуть на подход JS ajax, если вы новичок в этом, возможно, рассматриваете вспомогательный инструмент, например 'jQuery' – haxxxton

У меня есть доступ к базе данных SQL. Не могли бы вы указать мне на правильный сценарий jQuery, потому что я эквивалент 1 года, я могу ходить, но я падаю на свое лицо много. :) – Majidiode

Итак, какое значение вы хотите? Независимо от того, были ли они зарегистрированы или нет, то есть IN или OUT? – GraveyardQueen

Если обновить HTML немного включить playerId в кнопке, мы имеем то, чтобы идентифицировать человека на сервере. Учитывая, что вы уже используете bootstrap, я подумал, что лучше использовать некоторые цвета бутстрапа. Аналогичным образом, размещение элементов блока (div) внутри вашего button s, как правило, не очень хорошо, поэтому переместил html вокруг tad.

Этот код использует функцию jQuery's ajax для передачи данных на ваш сервер POST. Если это ваш первый игра с JQuery, я могу рекомендовать получать голову вокруг некоторых best practices and things like IIFE's

JSFIDDLE

HTML

<div class="row"> 
    <div class="col-xs-8 height2">#2 STEVE B</div> 
    <div class="col-xs-4"> 
     <button class="btn btn-success btn-xl btn-player-checkin" data-player-id="2">Check In</button> 
    </div> 
</div>

(function($, window, document) { 
    $(function() { 
     // bind to the click event of the checkin button 
     $('.btn-player-checkin').on('click', function(){ 
      // if the button has the success class - assume the user is checked in 
      var isCheckedIn = $(this).hasClass('btn-success'); 
      // get the player id from the data attribute 
      var playerId = $(this).data('player-id'); 


      // call the send function 
      // sendDataToServer(!isCheckedIn, playerId, $(this)); // send the status we want the player to save (ie. opposite of current); 

      // if you would like to test the success function without the ajax call, comment out above and uncomment below 
      if(!isCheckedIn){ // trying to check out 
       $(this).text('Check In'); 
      }else{ // checking in 
       $(this).text('Check Out'); 
      } 
      // cycle classes 
      $(this).toggleClass('btn-success btn-danger'); 

     }); 

     function sendDataToServer(newStatus, playerId, button){ 
      $.ajax({ 
       url: 'http://myfakeserver.com/checkin', // replace this with the url of the server end point 
       method: 'POST', 
       data: {playerId: playerId, status: newStatus} // send this data, on the server you could also record the timestamp of when this occurred 
      }).done(function(){ // if we successfully complete the post 
       if(newStatus){ // checking in 
        button.text('Check Out'); 
       }else{ // trying to check out 
        button.text('Check In'); 
       } 
       // cycle classes 
       button.toggleClass('btn-success btn-danger'); 
      }).fail(function(){ 
       // do something if the post fails 
      }); 
     } 
    }); 
}(window.jQuery, window, document));

PS. это может упасть, если у одного из ваших игроков есть идентификатор ?.

источник

2016-11-29 06:12:23 haxxxton

Я загрузил ваш код на http://www.labombafootball.com, но могу вы видите, где я ошибаюсь? – Majidiode

вам нужно включить 'jQuery' в свой код :) – haxxxton

Я сделал ??? – Majidiode

Вы могли бы сделать что-то, как показано ниже в фрагменте кода, где текст кнопки меняется в зависимости от того, является ли он в настоящее время IN или OUT.You также может получить значение с помощью переменной «INOUT»

var divsclass=$(".col-xs-4"); 
 

 
    $.each(divsclass, function(elem) { 
 
     console.log("element "+$(divsclass[elem]).html()); 
 
\t $(divsclass[elem]).on("click",function(){ 
 
     var inout=$(divsclass[elem]).html(); 
 
\t if($(divsclass[elem]).html()=="IN"){ 
 
\t $(divsclass[elem]).html("OUT"); 
 
     $(divsclass[elem]).parent().attr('class','changeCol'); 
 
\t } 
 
     else{ 
 
      $(divsclass[elem]).html("IN"); 
 
      $(divsclass[elem]).parent().attr('class','changegreen'); 
 
} 
 
\t }); 
 
\t 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
     <meta charset="utf-8"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
     <title>La Bomba FC</title> 
 
     <style> 
 
     .height2 { 
 
      height: 50px; 
 
      text-align: center; 
 
     } 
 

 
     .height { 
 
      height: 100px; 
 
     } 
 

 
     .fc { 
 
      display: block; 
 
      margin-left: auto; 
 
      margin-right: auto; 
 
     } 
 

 
     body { 
 
      font-family: monospace; 
 
      font-size: 4em; 
 
      font-weight: bold; 
 
     } 
 

 
     button { 
 
      background-color: red; 
 
     } 
 
     .changeCol{ 
 
      background-color:blue; 
 
} 
 
      .changegreen{ 
 
      background-color:green; 
 
} 
 
     </style> 
 

 
     <script> 
 

 
     </script> 
 

 
     </head> 
 

 
     <body> 
 
     <div class="container-fluid"> 
 
      <div class="row"> 
 
      <div class="col-xs-12 height"><img class="fc" src="images/la-bomba-fc-sm.jpg"></div> 
 
      </div> 
 

 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#2 STEVE B</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#1 INDER JHOOTY</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#21 CHRIS NAKATSU</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#88 NICK MARSHALL</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#99 TONY YUN</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#6 DANIELE BORRELLI</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#11 NITESH SHETTY</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#45 UDAYA MADANAYAKE</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#9 ADRIAN PARTYKA</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#5 PATRICK REGAN</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#13 RAMEZ ALAM</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#8 FAIZAN ALAM</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#33 DAVID CLEBAN</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#14 VICTOR JIMENEZ</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#7 HARRY SANDHU</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#77 JOHN PINEDA</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#44 DEVON CARNEY</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 
      <hr> 
 
      <div class="row"> 
 
      <div class="col-xs-8 height2">#? JUSTIN CONSTANTINEAU</div> 
 
      <button><div class="col-xs-4">IN</div></button> 
 
      </div> 
 

 

 
     </div> 
 
     </body> 
 

 
    </html>

источник

2016-11-29 06:00:20 GraveyardQueen

. Есть ли способ изменить цвет кнопки при изменении значения? – Majidiode

Я отредактировал его, чтобы добавить класс в зависимости от текстового значения, так что цвет фона будет соответствующим образом изменен. – GraveyardQueen

Благодарим за помощь. – Majidiode

Заполнение формы с помощью javascript

ответ

Смежные вопросы