onclickフォームに<input>テキストフィールドを表示

Question

私はデータベースを検索するためのフォームを作成しています。フォームには、ユーザーが検索する変数（名前、場所、時間帯など）を選択して選択できる、さまざまな検索条件があります。フォームは現在、ユーザーが値を入力するための入力テキストフィールドを表示するonclick関数を作成するボタンとして入力タイプを持っています。たとえば、ユーザーが「名前」ボタンをクリックすると、ユーザーが名前を指定できるように入力テキストフィールドが表示されます。私はJavaScriptを使用してこれを動作させる他の方法を試しましたが、フォームをPHPファイルに投稿するときに値が取得されていません。 これまでの形式の例... openInputField（）のための

<form action="search.php" method="post"> 
<input type="button" name="name" value="Name" onclick="openInputField()"> 
<input type="button" name="location" value="location" onclick="openInputField()"> 
<input type="button" name="timeZone" value="Time Zone" onclick="openInputField()"> 

Javascriptを以下の通りです：

// function that will open input text field when user clicks button 
function openInputField(){ 
    var r = document.createElement('span'); 
    var y = document.createElement("INPUT"); 
    y.setAttribute("type", "text"); 
    y.setAttribute("placeholder", "Name"); 
    var g = document.createElement("IMG"); 
    g.setAttribute("src", "delete.png"); 

    increment(); 

    y.setAttribute("Name", "textelement_" + i); 
    r.appendChild(y); 
    g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')"); 
    r.appendChild(g); 
    r.setAttribute("id", "id_" + i); 
    document.getElementById("myForm").appendChild(r); 
} 

が、これはPHPファイルから印刷されていませんが値を提出すると、テキストフィールドが開きます。

Answer 1

$('.form-btn').click(function(){ 
 
$(this).next().toggleClass('show-form'); 
 
});

.form{ 
 
float:left; 
 
    list-style:none; 
 
} 
 
.hidden-form{ 
 
    visibility:hidden; 
 
    } 
 
.show-form{ 
 
visibility: visible !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="form"> 
 
<li> 
 
<input class="form-btn" type="button" name="name" value="Name" > 
 
<input class="hidden-form" type="text" name="nm" > 
 
</li> 
 
</ul> 
 
<ul class="form"> 
 
<li> 
 
<input class="form-btn" type="button" name="location" value="Location" > 
 
<input class="hidden-form" type="text" name="loc" > 
 
</li> 
 
</ul>

あなたは、名前フィールドと一緒に別途送信ボタンを追加することができます。