如果輸入爲空，jQuery停止按鈕出現

我對jQuery非常陌生，一直在爲學校項目列表應用程序制定一些糾結措施。如果輸入空白，我一直在尋找一種方法來使輸入不提交。我找到了一些方法阻止它進入，並彈出一條警告消息等。但是，當提交表單時，即使嘗試使用警報彈出窗口阻止它，也會顯示2個按鈕。當我試圖讓輸入空白時停止出現按鈕，我最終得到垃圾郵件與警報消息，並且按鈕仍然顯示，並且整個頁面變得扭曲...如果輸入爲空，jQuery停止按鈕出現

所以我的問題是怎麼可以我應用了一條警告消息，或者只是防止完全提交表單，並且防止在輸入爲空時按下按鈕。

$(document).ready(function() { 
 
    $('body').css('opacity', '0').fadeTo(1500, 1, 'swing'); 
 

 

 

 
}); 
 

 
$('button.submit').click(function() { 
 
    var new_task = $('input').val() + " x" + $('input + input').val(); 
 
    var $deleteButton = $('<button />').addClass('remove').text(''); 
 
    var $li = $('<li />').text(new_task); 
 
    var $quantityButton = $('<input type="checkbox" />'); 
 

 

 

 
    $('#list').append($li); 
 
    $quantityButton.appendTo($li); 
 
    $deleteButton.appendTo($li); 
 
    $("form").trigger("reset"); 
 

 
    $('#form').click(function() { 
 
    if ($(this).val() == '') { 
 
     alert('Input can not be left blank'); 
 
    } 
 
    }); 
 

 

 
    return false; 
 
}); 
 

 

 

 
$('#list').on('click', '.remove', function() { 
 
    $(this).parent().remove(); 
 
    console.log($(this)); 
 
}); 
 

 

 
$('#list').on('change', 'input[type="checkbox"]', function() { 
 
    var $li = $(this).parent(); 
 

 
    if ($(this).is(':checked')) { 
 
    $li.css('textDecoration', 'line-through'); 
 
    } else { 
 
    $li.css('textDecoration', 'none'); 
 
    return false; 
 
    } 
 

 

 

 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Shopping list</title> 
 
    <link href='https://fonts.googleapis.com/css?family=Old+Standard+TT:400,700,400italic' rel='stylesheet' type='text/css'> 
 
    <link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet'> 
 
    <link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet'> 
 
    <link href="css/style.css" rel="stylesheet"> 
 
</head> 
 

 
<body id="background"> 
 

 
    <div class="container"> 
 
    <h2>Shopping List</h2> 
 
    <h3> </h3> 
 
    <div class="form-list"> 
 
     <form> 
 
     <input type="text" id="new-text" placeholder="Add item to list" /> 
 
     <input type="number" id="quantity" /> 
 
     <button class="submit"></button> 
 

 

 
     </form> 
 

 
     <ul id="list"> 
 

 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="footer"> 
 

 
    </div> 
 
    <script src="http://code.jquery.com/jquery.min.js"></script> 
 
    <script src="js/jquery.js"></script> 
 
</body> 
 

 
</html>

將在所有找我的項目是這樣的，如果有幫助。 Mockup 1

感謝您的幫助。我對編碼非常陌生，我感謝所有的幫助和耐心！

-Thomas

來源

2016-01-20 Thomas T.

你不應該鏈接到的代碼頁，但包括這裏的代碼片段工具的代碼。 – user3154108

對不起！我已經上傳了片段。感謝您通知我該功能。 :) –

你使用'＃表單'，但是你沒有任何元素的id'form'。 – Ivar

請參閱下面的驗證空白輸入。當任何輸入爲空時，它會發出警報。修改字段按您的要求

$('button.submit').on('click', function(){ 
 
    var blankFlag = false; 
 
    $('input').each(function(){ 
 
    if(!jQuery.trim(jQuery(this).val()).length){ 
 
     blankFlag = true; 
 
    } 
 
    }); 
 
    if(blankFlag){ 
 
     alert('blank'); 
 
     return false; 
 
    } 
 
    return true; 
 
});

來源

2016-01-20 08:24:35 Diljohn5741

，如果你想停止的提交，提交您page.then使用

e.preventDefault();

這將阻止頁面submitting.and用它點擊提交按鈕。

如果你想隱藏按鈕，直到文本框爲空。

$("#myTextBox").change(function(){ 
if($(this).val().length>0){$("#myButton").show()} 
else{$("#myButton").hide()} 
});

，並保持從最初stage.hope隱藏的按鈕，這將工作

來源

2016-01-20 09:51:45

如果輸入爲空，jQuery停止按鈕出現

回答

相關問題