2016-01-22 30 views
0

我已經創建了2個文本輸入字段,其中包含required = 1屬性。但是,有兩種形式可以重定向到兩頁。我有兩個按鈕,分別註冊和登錄,它們有兩種形式,點擊後可以重定向到他們需要的頁面。 但是,輸入字段僅根據所放置的表單保留所需的屬性。我希望輸入字段始終對於這兩種表單都是必需的。我確實試圖將它們放在一切之外,但是這兩種形式都沒有要求輸入。代碼:如何保持兩種形式的文本框屬性?

<div class="button-container"> 

<form action="/login" method="get"> 

    <div> 
     <input placeholder="Username*" class="textbox" required=1 type="text" name="username" id="username" onkeypress="return alpha(event)" maxlength="15"> 
     <br> 
     <input placeholder="Password*" class="textbox" required=1 type="password" name="password" id="password" onkeypress="return pass(event)"> 
    </div> 

    <br><br> 

    <div> 
     <button class="btn " type="submit" >Login</button> 
    </div> 
</form> 

//Form 2, when i click the button, even if the boxes are empty, it redirects :(

<form action="/finishRegister" method="post"> 
    <div> 
     <button class="btn " >Register</button> 
    </div> 
</form> 

<script> 

function alpha(e) { 
var k; 
document.all ? k = e.keyCode : k = e.which; 
return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || (k >= 48 && k <= 57)); 
} 
function pass(e) { 
var k; 
document.all ? k = e.keyCode : k = e.which; 
return ((k > 0 && k < 32) || (k > 32 && k < 222)); 
} 

</script> 

</div> 

Here's a picture so you can see what I'm talking about. I would like, if the user presses register, to redirect to a new page to enter more account information. However, if you already have an account and press login, the username and password will suffice

+0

您重新misundestanding形式是如何工作的。第二種形式將發佈到「/ finishRegistering」,但其中沒有輸入,數據將爲空。 – nicooga

+0

有沒有辦法讓這兩種形式之一,但也許使用onclick()註冊按鈕帶我到/ finishRegister? – dec0mpiled

+0

我組合了這兩種形式,並使它在onclick上做功能「redirect()」,而在函數redirect()中,我有'window.location.href ='/ finishRegister''。當我點擊所有字段爲空的註冊按鈕時,它顯示'請填寫此字段'消息一秒鐘,然後重定向到我想要的頁面。這不是我想要的:/ – dec0mpiled

回答

0

我建議你改變形式的作用dinamicly。如果您檢查下面的示例中的控制檯,您將看到表單將根據您點擊的按鈕嘗試點擊「/ asdf」或「/ qwer」。

$("input[type=submit][data-action]").click(function() { 
 
    var 
 
    $this = $(this), 
 
    $form = $this.parents("form"); 
 

 
    $form.attr("action", $this.data("action")); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h1>Jquery Way</h1> 
 
<form> 
 
    <input type="submit" data-action="/asdf" value="asdf"></input> 
 
    <input type="submit" data-action="/qwer" value="qwer"></input> 
 
</form> 
 

 
<h1> Angular Way 
 
<div ng-app> 
 
    <form action="{{action}}"> 
 
    <input type="submit" ng-click="action = '/asdf'" value="asdf"></input> 
 
    <input type="submit" ng-click="action = '/qwer'" value="qwer"></input> 
 
    </form> 
 
</div>

+0

你是否缺少一個e.preventDefault() –

+1

如果你阻止了默認()'你防止表單提交! – nicooga