Bootstrap表单不提交

时间：2017-11-09 02:35:59

标签： javascript php html twitter-bootstrap forms

我有以下引导程序形式它很好，但问题是它没有提交/发布到index.php页面。 这是代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" href="src/favicon.ico">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	</head>
<body>

<!--
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
    
	-->

		<div class="form-container active">
		</br>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-4">
		<div class="demo-wrapper">
            <div class="panel panel-default credit-card-box">
                <div class="panel-heading display-table" >
                    <div class="row display-tr" >
                      <div class="display-td" >  
<div class="demo-container">
     <div class="card-wrapper"></div></br>	
                        </div>
                    </div>                    
                </div>
                <div class="panel-body">
				
                    <form id="payment-form" action="index.php" method="post">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label for="cardNumber">CARD NUMBER</label>                                        <div class="input-group"> 
<input type="tel" class="form-control" name="number" placeholder="Valid Card Number" />
                                        <span class="input-group-addon"><i class="fa fa-credit-card" aria-hidden="true"></i></span>
                                    </div>
                                </div>                            
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-7 col-md-7">
                                <div class="form-group">
                                    <label for="cardExpiry"><span class="hidden-xs">EXPIRATION</span><span class="visible-xs-inline">EXP</span> DATE</label>                                        <input type="tel" class="form-control" name="expiry" placeholder="MM / YYYY" />
                                    </div>
                            </div>
                            <div class="col-xs-5 col-md-5 pull-right">
                                <div class="input-group">
                                    <label for="cardCVC">CV CODE</label>
                                    <input type="tel" class="form-control" name="cvc" placeholder="CVC" />             
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
							<label for="name">Name</label>
                                <div class="input-group">   
                            <span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>								
                                    <input placeholder="name" type="text" class="form-control" name="name" />
                                </div>
                            </div>  </div>  		
                        <div class="row">
                            <div class="col-xs-12">
                                <button type="submit" class="btn btn-primary btn-lg btn-block" name="button">Start Subscription</button>
                            </div>
                        </div>    						
</form> 
</div> </div> </div> </div>
       
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script>
    <script src="https://jessepollak.github.io/card/build/js/demo.js"></script>
    <script src="https://rawgit.com/jessepollak/card/master/dist/card.js"></script>
    <script>
        $('code').each(function(i, e) {hljs.highlightBlock(e)});
        var card = new Card({ form: '.active form', container: '.card-wrapper' })
    </script>
</body>
</html>

我做错了什么？有人可以帮帮我吗？

4 个答案:

答案 0 :(得分：1)

我猜你自己没有处理信用卡处理？

像Stripe等支付网关将卡片详细信息客户端标记，阻止提交表单，而是将令牌提交给他们的服务器进行安全处理。

他们将令牌作为ajax调用的承诺返回给您，然后您可以保存或创建费用，订阅或其他任何内容，但与普通表单提交不同，它是一个两步过程。您需要在其承诺响应的背面实现数据处理。

背后的逻辑就是这种方式，您的客户原始卡详细信息永远不会通过互联网发送。您应该阅读付款服务提供商有关如何处理卡详细信息提交的说明。

答案 1 :(得分：1)

脚本https://jessepollak.github.io/card/build/js/demo.js阻止表单提交。如果您不在页面上加载它，那么表单提交将起作用。

此外，您的HTML代码无效，因为未关闭4个已打开的div标记且未加载jQuery（浏览器控制台中出现$ is not defined错误。）

答案 2 :(得分：1)

这是我在github上添加的解决方案。

在脚本中你有这部分代码

return $('form').submit(function(e) {
    //return e.preventDefault(); //REMOVE THIS  LINE
  });
});

你在哪里：

<script src="https://jessepollak.github.io/card/build/js/demo.js"></script>

替换为我修改后的脚本：

<script src="https://rawgit.com/otaviobarreto/card/master/example/new_demo.js"></script> <!-- fix form submission -->

全部解决并修复了以下代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" href="src/favicon.ico">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	</head>
<body>

<!--
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
    
	-->

		<div class="form-container active">
		</br>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-4">
		<div class="demo-wrapper">
            <div class="panel panel-default credit-card-box">
                <div class="panel-heading display-table" >
                    <div class="row display-tr" >
                      <div class="display-td" >  
<div class="demo-container">
     <div class="card-wrapper"></div></br>	
                        </div>
                    </div>                    
                </div>
                <div class="panel-body">
				
                    <form id="payment-form" action="index.php" method="post">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label for="cardNumber">CARD NUMBER</label>                                        <div class="input-group"> 
<input type="tel" class="form-control" name="number" placeholder="Valid Card Number" />
                                        <span class="input-group-addon"><i class="fa fa-credit-card" aria-hidden="true"></i></span>
                                    </div>
                                </div>                            
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-7 col-md-7">
                                <div class="form-group">
                                    <label for="cardExpiry"><span class="hidden-xs">EXPIRATION</span><span class="visible-xs-inline">EXP</span> DATE</label>                                        <input type="tel" class="form-control" name="expiry" placeholder="MM / YYYY" />
                                    </div>
                            </div>
                            <div class="col-xs-5 col-md-5 pull-right">
                                <div class="input-group">
                                    <label for="cardCVC">CV CODE</label>
                                    <input type="tel" class="form-control" name="cvc" placeholder="CVC" />             
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
							<label for="name">Name</label>
                                <div class="input-group">   
                            <span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>								
                                    <input placeholder="name" type="text" class="form-control" name="name" />
                                </div>
                            </div>  </div>  		
                        <div class="row">
                            <div class="col-xs-12">
                                <button type="submit" class="btn btn-primary btn-lg btn-block" name="button">Start Subscription</button>
                            </div>
                        </div>    						
</form> 
</div> </div> </div> </div>
       
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script>
    <!-- <script src="https://jessepollak.github.io/card/build/js/demo.js"> </script> -->
<!-- My solution -->
<script src="https://rawgit.com/otaviobarreto/card/master/example/new_demo.js"></script> <!-- fix form submission -->
    <script src="https://rawgit.com/jessepollak/card/master/dist/card.js"></script>
    <script>
        $('code').each(function(i, e) {hljs.highlightBlock(e)});
        var card = new Card({ form: '.active form', container: '.card-wrapper' })
    </script>
</body>
</html>

答案 3 :(得分：0)

我认为您的index.php文件存在问题。检查它是否正确编码..

相关问题
最新问题