2011-07-20 8 views
1

ボタンをクリックすると、ページに新しいフィールドが追加されるようにしようとしています。私はonclickがJS関数しか取ることができないので、JSスクリプトを作ってみることにしました。最初に私はやろうとしましたPHPコードの中でJS変数を使用していますか?

<html> 
<head><title>multiple line test</title><head> 
<body> 
<script type="text/javascript"> 
var texters=''; 
var num=0; 
function newInput(nomnom) 
{ 
    texters=''; 
    num=nomnom+1; 
    for (var i=0; i<nomnom; i++) 
    { 
     texters+='<p>\ 
     Please specify a file, or a set of files:<br>\ 
     <input type="file" size="40">\ 
     </p>\ 
     <p>\ 
     Caption : <br> \ 
     <input type="text" size="30">\ 
     </p>';\ 
    } 
    document.write(texters+'<div>\ 
    <input type="submit" value="Send">\ 
    </div>\ 
    </form>\ 
    <br>' + '<input type="button" value="new entry" onclick="newInput(num)">' . '</body></html>'); 
} 
newInput(num); 
</script> 
</body> 
</html> 

しかし、それは動作しませんでした。だから私はそれをより良く知っているPHPの少しを追加しようとしました。

<html> 
<head><title>multiple line test</title><head> 
<body> 
<script type="text/javascript"> 
var texters=''; 
var num=0; 
function newInput(nomnom) 
{ 
    document.write(<?php 
    tex=''; 
    for (var i=0; i<=(nomnom); i++) 
    { 
     tex.='<p> 
     Please specify a file, or a set of files:<br> 
     <input type="file" size="40"> 
     </p> 
     <p> 
     Caption : <br> 
     <input type="text" size="30"> 
     </p>'; 
    } 
    echo tex . '<div> 
    <input type="submit" value="Send"> 
    </div> 
    </form> 
    <br>' . '<input type="button" value="new entry" onclick="newInput(num)">' . '</body></html>'; 
?>); 
} 
newInput(num); 
</script> 
</body> 
</html> 

しかし、私は、私はJSから出て、PHPに使用するフィールドの数のために使用してい変数を得ることができないので、それが動作しません知っている:私はこれを試してみました。私は別のフォームを作ることなくそれを取得することができますので、JSがその番号を$ _POSTに入れるように強制する方法はありますか?それとも、私がやろうとしていることをするための良い方法がありますか?

+3

PHPはサーバ上で動作します。 JavaScriptがブラウザで実行されます。その意味を理解してから、JSコードからPHPコードを取り除きます。 –

+1

@MattBall:これは通常、これらのタイプの質問に対する私の回答ですが、OPの$ _POSTへの参照は、実際にポストバックを使用していると私に信じさせます。しかし、この質問では少し不明です。 –

答えて

1

コメントはPHPがserverside用、javascriptはclientside用です。 htmlは、いずれも作成できるUI要素です。サーバー上で何かが必要な場合は、PHPで行います。クライアント上で行う必要がある場合は、javascriptで行います。ここにあなたのためのjavascriptのサンプルです。

function newInput(nomnom) 
{ 
    var tex=''; 
    for (var i=0; i<=(nomnom); i++) 
    { 
    tex+='<p>Please specify a file, or a set of files:'; 
    tex+='<br/><input type="file" size="40"></p>'; 
    tex+='<p>Caption :'; 
    tex+='<br/><input type="text" size="30"></p>'; 
    } 
    document.getElementById('form_id').innerHTML += tex; 
} 

この関数が呼び出されたとき、それは新しい入力数を作成し、ID「form_id」でフォームに追加します。

+1

tex変数をvarに忘れないでください。そうしないと、グローバルスコープになります。 – bittersweetryan

+0

ありがとうございました、残念ですが、これは私がJSでやった最初のことです。 – SDuke

+0

"var" – aepheus

2

フォームに非表示の入力フィールドを設定し、Javascriptにそのフィールドを設定させることができます。

2

jquery http://jquery.com/またはsimialrスクリプトライブラリを使用すると、DOMを簡単に操作できるようになります。 jqueryのを使用して、あなたが数行のコードでやりたいだろうのonClick関数を作成することができます:あなたはより多くの入力ボックスを追加する必要がある場合、あなたは可能性が

var onClickAddInput = function() 
{ 
    $('div#your_div_id').append('<input type="text" size="30" />'); 
} 

ループAPPEND文を、その個々の入力ボックスのIDを与えますループ番号と等しい

関連する問題