使窗體元素之外的提交按鈕 - 不工作

我要讓表單元素外的按鈕，將檢查是否輸入已經充滿，如果是這樣，則提交表單，如果沒有，做別的事情（如提示警報或其他）。使窗體元素之外的提交按鈕 - 不工作

我有此一把小提琴，它不會工作：

HTML：

<form action="javascript:alert('submitted');" method="post"> 
    <input type="text" id="inp_name"> 
    <input type="text" id="inp_address"> 
    <input type="text" id="inp_zipcode"> 
    <input type="text" id="inp_city"> 
    <input type="submit" value="Submit form"> 
</form> 

<a href="#" id="to-top">CLICK ME TO SUBMIT FORM OUTSIDE FORM ELEMENT</a>

的Javascript：

var bas_name = $("#inp_name").val(); 
var bas_address = $("#inp_address").val(); 
var bas_zipcode = $("#inp_zipcode").val(); 
var bas_city = $("#inp_city").val(); 

$("#to-top").click(function() { 
    if(bas_name == "" && bas_address == "" && bas_zipcode == "" && bas_city == "") { 
     alert("nonoonnono!"); 
    } else { 
     $("form").submit(); 
    } 
});

來源

2014-02-18 Dueify

這裏的問題是變量的作用域。你可以這樣做： - 發生

$("#to-top").click(function() { 
    var bas_name = $("#inp_name").val(); 
    var bas_address = $("#inp_address").val(); 
    var bas_zipcode = $("#inp_zipcode").val(); 
    var bas_city = $("#inp_city").val(); 

    if (bas_name == "" && bas_address == "" && bas_zipcode == "" && bas_city == "") { 
     alert("nonoonnono!"); 
    } else { 
     $("form").submit(); 
    } 
});

FIDDLE DEMO

這個問題，因爲，你卻把點擊事件以外的所有變量。因此，它將始終在頁面加載時存儲空值，因此您的代碼不起作用。但是，在點擊錨標籤時，您需要獲取文本框中的當前值，然後執行所有驗證。

希望，你得到了我的觀點！

來源

2014-02-18 13:30:32

是的，這應該解決它...技術上它不是範圍，但時機。這些變量可供事件處理程序訪問，但它們設置得太早。 –

@MattBrowne：是的，沒錯。你基本上掌握了主要概念！ –

它可以工作，但是在實際應用中，如何在執行.submit（）時跳轉到頂端呢？在這個示例中，它對窗體動作的警報正常工作，但是當我插入我的URL來處理數據和內容時，它只跳轉到頂端，什麼都不做。 – Dueify

你必須點擊後獲得的價值

$("#to-top").click(function() { 
var bas_name = $("#inp_name").val(); 
var bas_address = $("#inp_address").val(); 
var bas_zipcode = $("#inp_zipcode").val(); 
var bas_city = $("#inp_city").val(); 

if(bas_name == "" && bas_address == "" && bas_zipcode == "" && bas_city == "") { 
    alert("nonoonnono!"); 
} else { 
    $("form").submit(); 
} 
});

來源

2014-02-18 13:31:22

工程很好，唯一的問題是我可以提交只有一個輸入填寫的形式，我想我要求填寫所有的輸入？ – Dueify

在你應該使用OR語句而不是AND –

好的謝謝。我唯一的問題是在我的實時應用程序中，它不提交表單，它只跳轉到頁面的頂部，但不會繼續提交....很奇怪，因爲它在表單動作中處於提醒狀態。 – Dueify

試試這個

$(document).on("click", "#to-top", function() { 
    //Your code 
});

來源

2014-02-18 13:32:16 Dumisani

沒有必要使用事件代表團在這裏... –

大多數def，點了 – Dumisani

可能要到表單funcion 的onsubmit，在那裏你可以調用js函數你寫和返回真或假。這裏有一個簡單的例子： http://www.w3schools.com/js/js_form_validation.asp

之後，很容易調用表單提交從任何你想要的jQuery。

$("#myForm").submit();

或使用javascript：

document.getElementById("myForm").submit();

來源

2014-02-18 13:37:30

使窗體元素之外的提交按鈕 - 不工作

回答

相關問題