使用javascript生活閱讀和追加表格數據

我一直在尋找這個問題的解決方案一段時間，不得不遇到一個新手友好的答案，足以讓我理解它的實現。繼承人我的處境：使用javascript生活閱讀和追加表格數據

我正在創建一個簡單的小型基於Web的文檔編號系統，它將數據輸入表單並將其組合成一個文檔編號。一個例子是：用戶輸入一個，類別代碼（CCC），基本號碼（BBBB）和短劃線號碼（DDD）。由此產生的文件編號爲CCC-BBBB-DDD。超級簡單。我把它寫到數據庫和所有爵士樂。我只想添加一個用戶友好的添加。

我想在頂部顯示一個實時生成的字符串，顯示在用戶實際按下提交之前用戶編輯每個字段時文檔編號的內容。有點像這個例子：http://inimino.org/~inimino/blog/javascript_live_text_input

我對JavaScript幾乎一無所知，因此知道這個腳本應該是什麼樣子，2：以及腳本如何與html表單接口會非常有幫助。

繼承人什麼形式看起來像：

 <form action="submit.php" method="post"> 
     Enter Title:<input type="text" name="title" size="20"><BR> 
     Enter Class Code:<input type="text" name="class" size="20"><BR> 
     Enter Base Number:<input type="text" name="base" size="20"><BR> 
     Enter Dash Number:<input type="text" name="dash" size="20"><BR> 
     <input type="submit" value="Submit">

非常感謝您能提供任何幫助。我相信對於精通的人來說這不是太難。

Thomas

來源

2010-09-10 Thomas

從我的理解，這應該做你所描述的。

$('#yourForm input').bind('keyup', function(e) { 
    var docNum = 'Your Document Number: <br/>'+$('input[name="class"]').val() + '-' + $('input[name="base"]').val() + '-' + $('input[name="dash"]').val(); 
    $('#preview').html(docNum); 
});

對於第二個問題，它與HTML表單的接口如何。第一個jQuery選擇器#yourForm input將尋找落入<form id='yourForm'>的任何<input>。然後綁定keyup事件來觸發該函數。該函數採用<input>中的值與name的值，基類和破折號以及某些格式，並創建一個名爲docNum的變量。然後將docNum插入到元素中，並將id設置爲預覽，其中Fiddle示例中的div正好位於表單上方。

http://jsfiddle.net/nuY2M/

來源

2010-09-10 22:28:08 Robert

我喜歡這種方法。我想首先使用jquery，但對於初學者來說javascript更容易。我只有最後一個問題。我應該如何輸入這個腳本？我嘗試了幾種方法，但我沒有得到任何東西，當我輸入文字。沒有來自服務器的錯誤。 – Thomas 2010-09-10 23:56:26

你是否更改了jQuery選擇器來匹配你的實際表單？ – Robert 2010-09-11 00:53:29

是的，我已經把所有的東西都設置正確，除了onload。我修好後，它就像一個魅力。再次感謝。 – Thomas 2010-09-12 18:37:08

包括這個網站，你想要的文件數量預覽顯示：

Document #: 
<span id="classPreview"></span> 
- 
<span id="basePreview"></span> 
- 
<span id="dashPreview"></span>

添加這個腳本來填充值：

function updateDocNumPreviewPart(fieldName) 
{ 
    var preview = document.getElementById(fieldName + "Preview"); 
    var field = document.forms[0][fieldName]; 
    preview.innerHTML = field.value; 
} 
function updateDocNumPreview() 
{ 
    updateDocNumPreviewPart("class"); 
    updateDocNumPreviewPart("base"); 
    updateDocNumPreviewPart("dash"); 
}

最後，添加一些代碼您的表單域調用腳本：

<input ... onkeyup="updateDocNumPreview()" onchange="updateDocNumPreview()" />

來源

2010-09-10 22:40:47 gilly3

使用javascript生活閱讀和追加表格數據

回答

相關問題