動態表單

Question

我有開單模式窗體如下片段：

<a class="modalbox" id="foo" href="#inline">Request a Quote</a> 
<a class="modalbox" id="bar" href="#inline">Request a Quote</a> 
...and so on... 

不知怎的，我需要呈現在輸入「子」 ID的值在下面的HTML表單 以及連接具有一些預定的文字，這是ID爲「我感興趣的......」

<form id="contact" name="contact" action="#" method="post"> 
    <input type="hidden" id="product" name="product" value=""> 
    <label for="sub">Subject:</label> 
    <input type="sub" id="sub" name="sub" class="txt" value="I am interested in '$id'"> 
    <button id="send">Submit</button> 

我已經使用JavaScript進行驗證和AJAX的處理PHP腳本。

編輯： 這是JavaScript已被用來填充上面隱藏的輸入，這是工作完美：

$('a').click(function(e) { 

$('#product').val($(this).attr('id')); 

Answer 1

我建議，與普通的JavaScript，像：

function addTextToInput(from, to, prefix, e) { 
    e = e || window.event; 
    if (!from || !to) { 
     return false; 
    } 
    else { 
     from = from.nodeType == 1 ? from : document.getElementById(from); 
     to = to.nodeType == 1 ? to : document.getElementById(to); 
     var text = from.id; 
     to.value = prefix ? prefix + ' ' + text : text; 
    } 
} 

var as = document.querySelectorAll('a.modalbox'); 
for (var i = 0, len = as.length; i<len; i++) { 
    as[i].onclick = function(e) { 
     addTextToInput(this, 'sub', 'I am interested in', e); 
    }; 
}​ 

JS Fiddle demo。

但考慮到你似乎已經被使用jQuery：

$('a.modalbox').click(function(e){ 
    e.preventDefault(); 
    $('#sub').val('I am interested in ' + this.id); 
}); 

JS Fiddle demo。