2016-04-18 14 views
0

これは現在のコードです。現在のコードを変更するにはどうすればよいですか?送信した後にフォームからデータを入力できます。これを達成するためにJSでもっとやってみようが、私がやりたいことを達成するのに役立つオンラインを見つけることができないフォームを送信した後にテーブルに動的に追加する方法

編集:どのような私ができないか達成しようとしている私は、私は映画の名前と日付を入れたときに、正確な、値が

<html> 
<head>  
<title>Movie Details</title> 
<script type="text/javascript"> 
function movieName(){ 
    var name = document.getElementById("movie").value; 

    if (true) 
    { 
     alert(name); 
    } 
} 

function date(){ 
    var released = document.getElementById("dateRelease").value; 

    if (true) 
    { 
     alert(released); 
    } 
} 
</script> 

</head> 
<body> 

<div id="add"> 

    <form name="movieAdd" method="GET"> 

     <fieldset> 

      <legend>Movie Details</legend> 

      <p> 
       <label for="movie">Movie Name:</label> 
       <input type="text" required placeholder="Movie Name"    name="movie" id="movie"/> 
      </p> 

      <p> 
       <label for="date">Date Released:</label> 
       <input type="date" required name="date" id="date"/> 
      </p> 

     </fieldset> 

     <p> 
      <input type="submit" name="submitButton" value="Submit"> 
     </p> 
    </form> 
</div> 

<table id="movieTable" width="350px" border="1"> 
<tr> 
    <th>Number</th> 
    <th>Movie Name</th> 
    <th>Date Released</th> 
</tr> 
</table> 
</body> 
</html> 
+0

正確に何が必要なのか正確に説明できますか? –

+0

それはそれが働いていない、私はちょうど私の目標を達成するのを助けることができるオンラインリソースを見つけることができません。 何をしようとしていますか?ムービーの名前と日付を入力すると、送信後にフォームの下の表に追加されます – Gajeel

+0

'サーバー側 'の操作はありますか? __NO__の場合、なぜフォームを提出する必要がありますか? – Rayon

答えて

2

フォームの下にテーブルに置かれるべきで提出した後、私はjQueryのを使用してお勧めします()。次の例のように、簡単にフォームから要素を選択するためにそれを使用することができます:

var movie = $('#movie').val(); 

あなたは、簡単に、たとえば、必要なデータをテーブルの行を追加することができます。

var $td = $('<td>').text(movie); 
$('#movieTable').append($td); 

私はこれがあなたのポイントを願って正しい方向に。

0

PHPを使用している場合は、これを実現するためにpostメソッドを使用できます。フォームが転記されると、テーブルにデータを入力できます。

if(isset($_POST['submitButton'])){ 
    echo '<table id="movieTable" width="350px" border="1">'; 
     echo '<tr>'; 
     echo '<th>'.$_POST['moviename'].'</th>'; 
     echo '</tr>'; 
     echo '</table>'; 
} 
関連する問題