隱藏輸入按鈕

這裏是我的代碼：http://jsfiddle.net/Draven/rEPXM/23/隱藏輸入按鈕

我想知道我怎麼可以隱藏添加提交按鈕，直到我點擊+圖像輸入框添加到窗體。

我不想在輸入框旁邊添加提交按鈕，因爲我希望能夠添加多個輸入框並將其全部提交，當我點擊添加。

HTML

<div id="left">  
    <div class="box"> 
    <div class="boxtitle"><span class="boxtitleleftgap">&nbsp;</span><span class="boxtitlebulk"><span class="boxtitletext">Folders</span><div style="float: right; margin-top: 4px;"><a href="#" onclick="javascript: AddFolder();"><div class="addplus">&nbsp;</div></a></div></span></div> 
     <div class="boxcontent"> 
     <form method="post" id="folderform" action="page.php?action=list-volunteer-apps" name="folderform"> 
      <a class="even" href="page.php?action=list-volunteer-apps&folder=2">Folder 2 <span class="text">(1)</span></a><a class="even" href="page.php?action=list-volunteer-apps&folder=1">Folder 1 <span class="text">(0)</span></a> 
      <div id="foldercontainer"><input type="submit" value="Add"></div> 
     </form> 
     </div> 
    </div> 
</div>

jQuery的

function AddFolder() { 
    $('#foldercontainer').append('<input name="folder[]" type="text" size="20" />'); 
}

來源

2012-10-24 Draven

只要給該按鈕的ID，並使其開始隱藏

<input type="submit" id="addButton" value="Add" style="display: none;">

然後使用show() jQuery的方法：

$("#addButton").show();

http://jsfiddle.net/TcFhy/

來源

2012-10-24 14:41:56

$('form#folderform input[type=submit]').hide();

你點擊之後再展添加按鈕提交

http://jsfiddle.net/SQh8L/

來源

2012-10-24 14:40:32 Bot

我感動的按鈕出來的文件夾換行，並且我在添加新文件夾時顯示它。通過這種方式，添加新文件夾時按鈕將保持在最底部。我還刪除了內聯樣式，並將其替換爲一個類。

這是用來顯示按鈕，只需將其添加到AddFolder()功能：

$('#addBtn').show();

我用CSS隱藏這樣的：

#addBtn { display: none;}

我感動按鈕出來的#foldercontainer，這樣當你添加多個文件夾時，它會一直停留在最下面，如你所願：

<div id="foldercontainer"></div> 
<input id="addBtn" type="submit" value="Add">

在這裏尋找jsFiddle：http://jsfiddle.net/kmx4Y/1/

來源

2012-10-24 14:43:53

這裏有一種方法可以做到這一點......同時，清理用於製作這些輸入框位的方法：

http://jsfiddle.net/mori57/4JANS/

所以，在你的HTML，你可能有：

<div id="foldercontainer"> 
     <input id="addSubmit" type="submit" value="Add"> 
     <input id="folderName" name="folder[]" type="text" size="20" style="" /> 
    </div>

和你的CSS可能是：

#foldercontainer #addSubmit { 
    display:none; 
} 
#foldercontainer #folderName { 
    display:none; 
    width: 120px; 
    background: #FFF url(http://oi47.tinypic.com/2r2lqp2.jpg) repeat-x top left; 
    color: #000; 
    border: 1px solid #cdc2ab; 
    padding: 2px; 
    margin: 0px; 
    vertical-align: middle; 
}

和您的腳本可能是：

// set up a variable to test if the add area is visible 
// and another to keep count of the add-folder text boxes 
var is_vis = false, 
    folderAddCt = 0; 

function AddFolder() { 
    if(is_vis == false){ 
     // if it's not visible, show the input boxes and 
     $('#foldercontainer input').show(); 
     // set the flag true 
     is_vis = true; 
    } else { 
     // if visible, create a clone of the first add-folder 
     // text box with the .clone() method 
     $folderTB = $("#folderName").clone(); 
     // give it a unique ID 
     $folderTB.attr("id","folderName_" + folderAddCt++); 
     // and append it to the container 
     $("#foldercontainer").append($folderTB); 
    } 
}

來源

2012-10-24 14:52:55

隱藏輸入按鈕

回答

相關問題