表單標簽中的Javascript按鈕不起作用

Question

當我在PHP文件中放置表單標簽時，我的JavaScript函數addmore（index）停止工作。 我不知道為什么？ 沒有表單標簽，它就可以工作，但是我沒有提交按鈕。

在我的HTML中，有幾個文本區域可供我插入用戶的問題

<textarea name"que[1]"></textarea>
<textarea name"que[2]"></textarea>
<textarea name"que[3]"></textarea>

我的PHP文件應該與答案字段一起顯示當前問題-然后用戶提交

<?php
<form action="result.php" method="post">
$content = "";
$question = $_POST['que'];
$length = count($_POST['que']);

for($j=1; $j<$length+1; $j++) {

if($_POST['pitanje'][$j] != "") {
$area = '<textarea name="ans'.$j.'1"></textarea>';
$addmore = '<button type="button" name="addmore" onClick="addmore('.$j.');">Add more</button>';
$content .= $j.') '.$question[$j].'<br/>'.$area.'<br/><div id="inner'.$j.'"></div>'.$addmore.'<br/><br/>';}}

echo $content;
echo'<br/><input type="submit" value="CALCULATE"></form>';
?>

我的JAVASCRIPT文件用於添加更多答案字段的功能

var am = [];
for(var i=1; i<101; i++){
am[i] = 1;}

function addmore(index) {
        am[index]++;
        var textarea = document.createElement("textarea");
        textarea.name = "ans" + index + am[index];
        var div = document.createElement("div");
        div.innerHTML = textarea.outerHTML;
        document.getElementById("inner"+index).appendChild(div);
}

Answer 1

這些按鈕可能觸發表單提交。 嘗試這個：

onClick="return addmore('.$j.');">
.....
function addmore(index) {
....
return false;
}

Answer 2

在我看來，該錯誤是因為表單標簽沒有被回顯或未分配給變量。

Answer 3

選項...

更改button name
更改function名稱
刪除button的屬性name
使用<input type="button" />代替<button></button>
...

...任何應該做的。

喜歡

<button name="buttonName" onclick="functionName()">addnew in html?</button>
<button name="buttonName" onclick="otherFunctionName()">addnew</button>
<button onclick="functionName()">addnew</button>

要不就

<input type="button" value="addnew" onclick="functionName()" />

查看簡化的JSFiddle示例

Answer 4

我猜奧斯汀是對的，我嘗試使用表單外部的按鈕，然后它起作用了。

如果像這樣將Button從表單標簽中移出，它將起作用，您將在頂部具有一個“ addmore”按鈕，並在下方獲得盡可能多的文本區域（一個html頁面以jsfiddle或simmilar進行說明）：

<!DOCTYPE html>
<html>
<script type="text/javascript">
    var am = [];
    for(var i=1; i<101; i++){
    am[i] = 1;}

    function addmore(index) {
            am[index]++;
            var textarea = document.createElement("textarea");
            textarea.name = "ans" + index + am[index];
            var div = document.createElement("div");
            div.innerHTML = textarea.outerHTML;
            document.getElementById("inner"+index).appendChild(div);
    }
    </script>
<body><button type="button" name="addmore" onClick="addmore(1);">Add more</button>
<form action="result.php" method="post">1) $_POST["que"]<br/><textarea name="ans11"></textarea><br/><div id="inner1"></div><br/><br/><br/><input type="submit" value="CALCULATE"></form>
</body>
</html>

我也找到了這種解決方案，可能會解決它。 你需要

可能首先將按鈕更改為輸入type = button，...
不得為按鈕命名或輸入與您的功能相同的名稱。

這突出了兩種解決方案：

<?php
echo '<!DOCTYPE html>
<html>
<script type="text/javascript">
var am = [];
for(var i=1; i<101; i++){
am[i] = 1;}

function addmore(index) {
    am[index]++;
    var textarea = document.createElement("textarea");
    textarea.name = "ans" + index + am[index];
    var div = document.createElement("div");
    div.innerHTML = textarea.outerHTML;
    document.getElementById("inner"+index).appendChild(div);
}
</script>
<body>';
    $content = "";
    $question = 'question:';
    $length = 99;
    $j =1;
    $addmore = '<button type="button" name="addsmore" onClick="addmore('.$j.');">Add more</button>';
    echo $addmore;
    echo '<form action="result.php" method="post">';

    $area = '<input type="button" value="Add 2more" name="addsdmore" onClick="addmore('.$j.');"></input>
            <textarea name="ans'.$j.'1"></textarea>';
    $content .= $j.') '.$question.'<br/>'.$area.'<br/>
            <div id="inner'.$j.'"></div><br/><br/>';

    echo $content;
    echo'<br/><input type="submit" value="CALCULATE"></form>';
    echo '</body>
</html>';
?>

表單標簽中的Javascript按鈕不起作用

問題描述

4 個解決方案

解決方案1
0 2014-03-19 21:30:59

解決方案2
0 2014-03-19 21:36:16

解決方案3
0 2014-03-20 00:19:06

解決方案4
-1 2014-03-19 21:29:58

表單標簽中的Javascript按鈕不起作用

問題描述

4 個解決方案

解決方案1 0 2014-03-19 21:30:59

解決方案2 0 2014-03-19 21:36:16

解決方案3 0 2014-03-20 00:19:06

解決方案4 -1 2014-03-19 21:29:58

解決方案1
0 2014-03-19 21:30:59

解決方案2
0 2014-03-19 21:36:16

解決方案3
0 2014-03-20 00:19:06

解決方案4
-1 2014-03-19 21:29:58