个人中心
gpt4 book ai didi

javascript - 使用 javascript 进行表单检查

转载 作者：行者123 更新时间：2023-11-28 04:47:48 26 4
gpt4 key购买 nike

我正在尝试为我的足球队制作一个简单的签到网站。我的网站是http://www.labombafootball.com基本上，我用一个简单的“进/出”按钮列出了我团队中的球员，以便球员在有空时签到。

这是我到目前为止写的糟糕的代码，请随意笑。

.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;
}
button:focus {
	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>

谁能告诉我如何在单击按钮后保存值？

最佳答案

如果我们稍微更新您的 html 以在按钮中包含 playerId，我们就有了一些东西来识别服务器上的人。鉴于您已经在使用 bootstrap，我认为最好使用一些 bootstrap 颜色。同样，将 block 元素 (div) 放在 button 中通常不是一件好事，因此稍微移动了 html。

此代码使用 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>

JS

(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));

附言。这可能会失败，因为您的一位玩家目前的 ID 为 ?

关于javascript - 使用 javascript 进行表单检查，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40858471/

26 4 0
文章推荐： html - 包含 jQuery 链接后，Bootstrap 切换按钮不起作用
文章推荐： c++ - 如何将值发送到标准输出流并在另一个程序中访问这些值
文章推荐： javascript - 强制网站仅以横向模式显示
文章推荐： php - 单击单个图像的不同部分以触发 jquery 事件(基本上在单击时显示文本)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com