mailto:
送信ボタンに次のような機能を実装することは可能<input type="submit" />
ですか?ASP.NETMVCを使用しています。たぶん、これを達成するためのトリッキーなコントローラーアクションの結果があります。手伝っていただけませんか?
PS私はアンカーをボタンのように見せることができることを知っています。
mailto:
送信ボタンに次のような機能を実装することは可能<input type="submit" />
ですか?ASP.NETMVCを使用しています。たぶん、これを達成するためのトリッキーなコントローラーアクションの結果があります。手伝っていただけませんか?
PS私はアンカーをボタンのように見せることができることを知っています。
HTMLでは、要素の属性mailto:
にアドレスを指定できます。<form>
[action]
<form action="mailto:youraddr@domain.tld" method="GET">
<input name="subject" type="text" />
<textarea name="body"></textarea>
<input type="submit" value="Send" />
</form>
これにより、ユーザーの電子メールクライアントは、のフィールドが事前に入力された電子メールを作成できるようになります<form>
。
これが行わないのは、電子メールを送信することです。
これはうまくいくようです:
<button onclick="location.href='mailto:em@i.l';">send mail</button>
onchange
フォームでイベントリスナーを使用しhref
、メールのコンテキストに応じて送信ボタンの属性を変更する必要があります。
<form id="form" onchange="mail(this)">
<label>Name</label>
<div class="row margin-bottom-20">
<div class="col-md-6 col-md-offset-0">
<input class="form-control" name="name" type="text">
</div>
</div>
<label>Email <span class="color-red">*</span></label>
<div class="row margin-bottom-20">
<div class="col-md-6 col-md-offset-0">
<input class="form-control" name="email" type="text">
</div>
</div>
<label>Date of visit/departure </label>
<div class="row margin-bottom-20">
<div class="col-md-3 col-md-offset-0">
<input class="form-control w8em" name="adate" type="text">
<script>
datePickerController.createDatePicker({
// Associate the text input to a DD/MM/YYYY date format
formElements: {
"adate": "%d/%m/%Y"
}
});
</script>
</div>
<div class="col-md-3 col-md-offset-0">
<input class="form-control" name="ddate" type="date">
</div>
</div>
<label>No. of people travelling with</label>
<div class="row margin-bottom-20">
<div class="col-md-3 col-md-offset-0">
<input class="form-control" placeholder="Adults" min=1 name="adult" type="number">
</div>
<div class="col-md-3 col-md-offset-0">
<input class="form-control" placeholder="Children" min=0 name="childeren" type="number">
</div>
</div>
<label>Cities you want to visit</label><br />
<div class="checkbox-inline">
<label><input type="checkbox" name="city" value="Cassablanca">Cassablanca</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="city" value="Fez">Fez</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="city" value="Tangier">Tangier</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="city" value="Marrakech">Marrakech</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="city" value="Rabat">Rabat</label>
</div>
<div class="row margin-bottom-20">
<div class="col-md-8 col-md-offset-0">
<textarea rows="4" placeholder="Activities Intersted in" name="activities" class="form-control"></textarea>
</div>
</div>
<div class="row margin-bottom-20">
<div class="col-md-8 col-md-offset-0">
<textarea rows="6" class="form-control" name="comment" placeholder="Comment"></textarea>
</div>
</div>
<p><a id="send" class="btn btn-primary">Create Message</a></p>
</form>
JavaScript
function mail(form) {
var name = form.name.value;
var city = "";
var adate = form.adate.value;
var ddate = form.ddate.value;
var activities = form.activities.value;
var adult = form.adult.value;
var child = form.childeren.value;
var comment = form.comment.value;
var warning = ""
for (i = 0; i < form.city.length; i++) {
if (form.city[i].checked)
city += " " + form.city[i].value;
}
var str = "mailto:abc@x.com?subject=travel to morocco&body=";
if (name.length > 0) {
str += "Hi my name is " + name + ", ";
} else {
warning += "Name is required"
}
if (city.length > 0) {
str += "I am Intersted in visiting the following citis: " + city + ", ";
}
if (activities.length > 0) {
str += "I am Intersted in following activities: " + activities + ". "
}
if (adate.length > 0) {
str += "I will be ariving on " + adate;
}
if (ddate.length > 0) {
str += " And departing on " + ddate;
}
if (adult.length > 0) {
if (adult == 1 && child == null) {
str += ". I will be travelling alone"
} else if (adult > 1) {
str += ".We will have a group of " + adult + " adults ";
}
if (child == null) {
str += ".";
} else if (child > 1) {
str += "along with " + child + " children.";
} else if (child == 1) {
str += "along with a child.";
}
}
if (comment.length > 0) {
str += "%0D%0A" + comment + "."
}
if (warning.length > 0) {
alert(warning)
} else {
str += "%0D%0ARegards,%0D%0A" + name;
document.getElementById('send').href = str;
}
}
または、action:mailtoを使用してフォームを作成できます
<form action="mailto:rohit@k.com">
これをチェックしてください。
http://webdesign.about.com/od/forms/a/aa072699mailto.htm
しかし、これは実際には電子メールでフォームを送信します。これはあなたが望んでいたことですか?ただ使用することもできます
<button onclick="">
次に、これを実現するためのJavaScriptを使用します。
そして、あなたは<a>
ボタンのように見えるようにすることができます。これを回避する方法はたくさんあります。少し検索してください。
「ボタン」タグに「a」タグを含めるだけです。
<button><a href="mailto:..."></a></button>
HTMLベースの電子メール作成フォームで可能なフィールドの完全なリスト:
<form action="mailto:youraddr@domain.tld" method="GET">
<input name="subject" type="text" /></br>
<input name="cc" type="email" /><br />
<input name="bcc" type="email" /><br />
<textarea name="body"></textarea><br />
<input type="submit" value="Send" />
</form>