使用JavaScript從表單追加數據

-1

不，我現在不想要php。所以繼承人我的任務...編號喜歡從FORM獲取數據，然後使用該數據創建一個新的元素使用eventHandler ..我也想保留部分我使用事件處理程序。可能的原因是附加的數據不會在d頁中保留很長時間。請HALP使用JavaScript從表單追加數據

document.getElementById("fom").addEventListener("submit", performTask); 
 

 
function performTask() { 
 
    var input = document.getElementById('input'); 
 
    input = input.value; 
 
    // console.log(input); 
 
    // alert(input); 
 

 
    var newList = document.createElement('li'); 
 
    newList.appendChild(input); 
 
    var element = document.getElementById('orList'); 
 
    var child = document.getElementById('last'); 
 
    element.insertAfter(newList, child); 
 

 
    //e.preventDefault(); \t 
 
}

<form id="fom"> <br> 
 
    <input type="text" placeholder="Enter list name" id="input" autofocus required> 
 
    <br><br> 
 
    <input type="submit" value="Append"> 
 
</form> 
 

 
<ol id="orList"> 
 
    <li>List</li> 
 
    <li>Another list</li> 
 
    <li id="last">Some list</li> 
 
</ol>

來源

2017-04-26 skymage101k

爲什麼你註釋掉'e.preventDefault（）'？ – funcoding

沒有理由:)仍然d代碼does not工作 – skymage101k

我建議你看看在開發者控制檯，看看你的'performTask'方法拋出的錯誤，並防止調用'e.preventDefault' – Hamms

首先，什麼你的錯誤行爲：

功能performTask需要接收event參數
evt.preventDefault()取消的事件，如果是取消，而不停止事件的進一步傳播。（在你的情況提交事件）
insertAfter是一個jQuery功能不JavaScript的
我使用insertAdjacentHTML的JavaScript 功能簡化代碼。有關此鏈接的更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
newList.appendChild(input);這條線是錯誤的，因爲你不能追加一個字符串。

這裏你回答你的問題：

document.getElementById("fom").addEventListener("submit", performTask); 
 

 
function performTask(evt) { 
 
    evt.preventDefault(); \t 
 
    var input = document.getElementById('input'); 
 
    input = input.value; 
 

 
    var d1 = document.getElementById('last'); 
 
    d1.insertAdjacentHTML('beforeend', '<li>'+input+'</li>'); 
 
\t document.getElementById('input').value = ''; 
 
}

<form id="fom" method="post"> <br> 
 
    <input type="text" placeholder="Enter list name" id="input" autofocus required> 
 
    <br><br> 
 
    <input type="submit" value="Append"> 
 
</form> 
 

 
<ol id="orList"> 
 
    <li>List</li> 
 
    <li>Another list</li> 
 
    <li id="last">Some list</li> 
 
</ol>

來源

2017-04-26 11:14:36 funcoding

使用JavaScript從表單追加數據

回答

相關問題