javascript 如何使html表单中的内容显示在电子邮件正文中

ykejflvf  于 2022-12-10  发布在  Java
关注(0)|答案(1)|浏览(195)

我有一个html表单,包含多行输入。我使用javascript函数创建这些输入,就像下面的例子。
Javascript语言

const open = document.getElementById("modal-open-btn");
var i = 1;

open.addEventListener('click', () => { 
    // opens the modal that has the form
    modal_container.classList.add('show');
      
    // get data from json
    $.getJSON("../static/data.json", function(data) {      
        $.each(data, function(key, value) { 
            $("<div />", { "class":"form-group" })
            .append($("<label />", { for:"question" +i, text:"Question " +i}))
            .append($("<input />", { type: "text", id:"question"+i, value: key }))
            .appendTo(".example-output");
            $("<div />", { "class":"form-group" })
            .append($("<label />", { for:"answer" +i, text:"Answer " +i}))
            .append($("<input />", { type: "text", id:"answer"+i, value: value }))
            .appendTo(".example-output");
            i++;
        })   
    });
})

HTML语言

<input id="modal-open-btn" class="right-button"></input>
<form class="form-container" action="mailto:?subject=Email" method="post" enctype="text/plain" >
     <p>Please find the details below.</p>
     <div class="example-output"></div>
     <button type="submit" class="btn btn-primary">Submit</button>
</form>

目前,如果用户单击html表单中的“Submit”按钮,将打开一封空白的outlook电子邮件。(class =“form-container”)的按钮。例如,我希望在Outlook电子邮件正文中包含文本“Please find the details below.”和从JS函数传递到div =example-output的其他值。
是否可以将表单中的内容自动填充到outlook电子邮件正文中?在JS函数中,它目前使用“input”标记,但如果更容易的话,我可以使用其他文本标记,如“p”。或者是否可以将文本值直接从js传递到outlook电子邮件正文中?我真的不关心label标记。我只想展示捕获的内容

ckx4rj1h

ckx4rj1h1#

就像在URL中设置主题一样,您可以设置正文...
正文=内容
但是您需要使用javascript,因此您需要处理onSubmit事件,而不是在表单中使用action。

const form = document.getElementsByTagName("form")[0];
form.addEventListener('submit',()=>{
    // Change "inputName" with the name of your input
    const body = form.inputName.value;
    location.href = "mailto:?subject=Email&body="+encodeURIComponent(body);
    return false;
});

正如你所看到的,我使用了inputName,你应该使用你想使用的输入的名称来改变它,如果你想的话,你可以连接起来。
我使用了encodeUIRComponent,否则输入内容可能会与URL混淆,并给予不好的结果,比如如果它添加了&

相关问题