基于锚值的动态表格输入

Question

I have the following snippets that open a single Modal Form:

<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...

Somehow, I need to render the value of ID in the input "sub" in the following HTML form as well as concatenate the ID with some predetermined text, which is "I am interested in..."

<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>

I'm already using Javascript for verification and AJAX for processing to PHP script.

Edit: This is the Javascript already being used to populate the hidden input above, which is working perfectly:

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

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

Answer 1

I'd suggest, with plain JavaScript, something like:

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 .

But given that you already seem to be using jQuery:

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

JS Fiddle demo .