7

これが私が持っているコードです：http：//jsfiddle.net/Draven/rEPXM/23/

画像をクリックしてフォームに入力ボックスを追加するAddまで、その送信ボタンを非表示にする方法を知りたいのですが。+

複数の入力ボックスを追加して、クリックしたときにすべてを送信できるようにしたいので、入力ボックスの横に送信ボタンを追加したくありませんAdd。

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" />');
}​
4

4 に答える 4

21

ボタンにIDを付けて、非表示にします。

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

次に、show()jQueryメソッドを使用します。

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

http://jsfiddle.net/TcFhy/

于 2012-10-24T14:41:56.803 に答える
2

これを行う方法は次のとおりです...また、これらの入力ボックスを作成するために使用される方法を少しクリーンアップしました。

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-24T14:52:55.630 に答える
1

ボタンをフォルダラップから移動しました。新しいフォルダを追加すると表示されます。このようにして、新しいフォルダを追加するときにボタンが下部に留まります。また、インラインスタイルを削除し、クラスに置き換えました。

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-24T14:43:53.173 に答える
0 
$('form#folderform input[type=submit]').hide();

次に、送信をクリックした後に追加ボタンを表示します

http://jsfiddle.net/SQh8L/

于 2012-10-24T14:40:32.710 に答える