.click() и input

я нупка в jquery, сильно не агритсо плиз) чего я не так сделал?)


<form name="mailer" method="post" >
<div>

<div class="row">
<div class="12u">
<input type="text" name="subject" placeholder="Тема сообщения" required/>
</div>
</div>
<div class="row">
<div class="12u">
<textarea name="message" placeholder="Текст сообщения" rows="8" required></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<input name="SendEmail" type="submit" value="Отправить сообщение" />
</div>
</div>
</div>
</form>




$( "#SendEmail" ).on( "click", function(event) {
$(this).attr('href', 'mailto:123@123.ru?Subject=' + document.mailer.subject.value + '&Body=' + document.mailer.message.value);
});

Задача какая?

при нажатии кнопки открыть ссылку вида mailto:123@123.ru?Subject='Тема сообщения'&Body='сообщение' данные с 2х форм

Написал на JS.
По нажатию кнопки Сохранить будет сгенерирована ссылка Отправить письмо


<a href="" id="href" style="display:none">Отправить</a>
<form>
<div class="row">
<div class="12u">
<input type="text" name="subject" id="subject" placeholder="Тема сообщения" required/>
</div>
</div>
<div class="row">
<div class="12u">
<textarea name="message" id="message" placeholder="Текст сообщения" rows="8" required></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<input name="SendEmail" id="SendEmail" type="submit" value="Сохранить" />
</div>
</div>
</div>
</form>

<script>

document.getElementById("SendEmail").onclick = function()
{
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
var href = document.getElementById("href");
href.style.display = "block";
href.href = "mailto:123@123.ru?Subject="+subject+"&Body="+message;
}

</script>