javascript 的index.html
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 的index.html相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<title>サンプル</title>
</head>
<body>
<form id="main_form" class="needs-validation" novalidate>
<div class="form-group">
<label for="name" class="row">
<p class="col-sm-2 col-form-label">名前</p>
<p class="col-sm-10 row">
<input type="text" name="name" id="name" class="form-control col-sm-12" placeholder="名前" required>
</p>
</label>
</div>
<div class="form-group">
<label for="email" class="row">
<p class="col-sm-2 col-form-label">メールアドレス</p>
<p class="col-sm-10 row">
<input type="email" name="email" id="email" class="form-control col-sm-12" placeholder="メールアドレス"
required>
</p>
</label>
</div>
<div class="form-group">
<label for="message" class="row">
<p class="col-sm-2 col-form-label">メッセージ</p>
<p class="col-sm-10 row">
<textarea name="message" id="message" cols="30" rows="10" class="form-control col-sm-12"
placeholder="問い合わせ内容" required></textarea>
</p>
</label>
</div>
</form>
<button id="btn" class="btn btn-primary col-sm-12">送信</button>
</body>
</html>window.onload = () => {
const btn = document.getElementById("btn");
console.log(btn);
btn.addEventListener("click", () => {
const name_val = document.forms.main_form.name.value;
const mail_val = document.forms.main_form.email.value;
const message_val = document.forms.main_form.message.value;
if (!name_val || !mail_val || !message_val) {
alert("空");
return;
}
axios
.get(
"https://maker.ifttt.com/trigger/sendmail/with/key/mATN60aXiSowj0OcrwSBqobudFa36fLI9qZvDxkd72n",
{
params: {
value1: `${name_val}`,
value2: `${mail_val}`,
value3: `${message_val}`
},
timeout: 1000,
responseType: "json",
crossdomain: true,
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*"
}
}
)
.then(function(response) {
// 成功時
console.log(response);
})
.catch(function(error) {
// エラーが発生した場合
console.log(error);
console.log(1234567890);
})
.then(function() {
// 常に実行される
alert("送信が完了しました。");
document.forms.main_form.name.value = "";
document.forms.main_form.email.value = "";
document.forms.main_form.message.value = "";
});
});
};
以上是关于javascript 的index.html的主要内容，如果未能解决你的问题，请参考以下文章