[英]javascript onclick form function
Helllo I have this form that take 3 different input for my app.你好我有这个表格,我的应用程序需要 3 个不同的输入。 I try to send that information to my database using API
but first I want to print it out in the console to see if I got the value from the input but nothing happen, here is my Javascript
code:我尝试使用API
将该信息发送到我的数据库,但首先我想在控制台中将其打印出来,看看我是否从输入中获得了值,但没有任何反应,这是我的Javascript
代码:
function insertDBs() { console.log("hiiiiiiiiiiiiiiiiiiiiii" + document.getElementById('chname').value); console.log("hiiiiiiiiiiiiiiiiiiiiii" + document.getElementById('chid').value); console.log("hiiiiiiiiiiiiiiiiiiiiii" + document.getElementById('chtoken').value); let channelName = document.getElementById('chname').value; let channelId = document.getElementById('chid').value; let channelAccessToken = document.getElementById('chtoken').value; console.log(channelName); console.log(document.getElementById('chid').value); console.log(channelAccessToken); }
<form name="lineform" action="" method="POST" onsubmit="insertDB()"> <div> <p class="labels required">Channel Name:</p> <p class="labels"><input type="text" id="chname" name="chname" value="" placeholder="Enter your Channel Name" style="width: 700px;" required></p> </div> <br> <div> <p class="labels required">Channel Id:</p> <p class="labels "><input type="text" id="chid" name="chid" value="" placeholder="Enter your Channel ID" style="width: 700px;" required></p> </div> <br> <div> <p class="labels required">Channel Access Token:</p> <p class="labels "><input type="text" id="chtoken" name="chtoken" value="" placeholder="Enter your Channel Access Token" style="width: 700px;" required></p> </div> <br> <div> <button onclick = "insertDBs()" style="background-color:#1f73b7; color:white; width:8%; height: 35px; border: none; border-radius: 3px;" type="submit">Submit</button> </div> <br> </form>
Any ideas?有任何想法吗? Many thanks.非常感谢。
Issue Identified已确定问题
insertDB
and function name that you defined is insertDBs
您定义的表单提交事件 function 名称为insertDB
和 function 名称为insertDBs
preventDefault
and stopPropagation
function to stop form reload.使用事件preventDefault
和stopPropagation
function 停止表单重新加载。onclick
and type submit
for the same button. onclick
并为同一个按钮键入submit
。 They both are doing the same task.他们都在做同样的任务。Updated Code更新代码
function insertDBs(e) { e.preventDefault(); e.stopPropagation(); console.log( "hiiiiiiiiiiiiiiiiiiiiii" + document.getElementById("chname").value ); console.log( "hiiiiiiiiiiiiiiiiiiiiii" + document.getElementById("chid").value ); console.log( "hiiiiiiiiiiiiiiiiiiiiii" + document.getElementById("chtoken").value ); let channelName = document.getElementById("chname").value; let channelId = document.getElementById("chid").value; let channelAccessToken = document.getElementById("chtoken").value; console.log(channelName); console.log(document.getElementById("chid").value); console.log(channelAccessToken); }
<form name="lineform" action="" method="POST" onsubmit="insertDBs(event)"> <div> <p class="labels required">Channel Name:</p> <p class="labels"> <input type="text" id="chname" name="chname" value="" placeholder="Enter your Channel Name" style="width: 700px;" required /> </p> </div> <br /> <div> <p class="labels required">Channel Id:</p> <p class="labels "> <input type="text" id="chid" name="chid" value="" placeholder="Enter your Channel ID" style="width: 700px;" required /> </p> </div> <br /> <div> <p class="labels required">Channel Access Token:</p> <p class="labels "> <input type="text" id="chtoken" name="chtoken" value="" placeholder="Enter your Channel Access Token" style="width: 700px;" required /> </p> </div> <br /> <div> <button style="background-color:#1f73b7; color:white; width:8%; height: 35px; border: none; border-radius: 3px;" type="submit" > Submit </button> </div> <br /> </form>
You need to prevent executing the default function.您需要阻止执行默认的 function。 Also do not use onClick method with button type submit也不要使用按钮类型提交的 onClick 方法
function insertDBs(event) { event.preventDefault() console.log("hiiiiiiiiiiiiiiiiiiiiii" + document.getElementById('chname').value); console.log("hiiiiiiiiiiiiiiiiiiiiii" + document.getElementById('chid').value); console.log("hiiiiiiiiiiiiiiiiiiiiii" + document.getElementById('chtoken').value); let channelName = document.getElementById('chname').value; let channelId = document.getElementById('chid').value; let channelAccessToken = document.getElementById('chtoken').value; console.log(channelName); console.log(document.getElementById('chid').value); console.log(channelAccessToken); }
<form name="lineform" action="" method="POST" onsubmit="insertDBs(event)"> <div> <p class="labels required">Channel Name:</p> <p class="labels"><input type="text" id="chname" name="chname" value="" placeholder="Enter your Channel Name" style="width: 700px;" required></p> </div> <br> <div> <p class="labels required">Channel Id:</p> <p class="labels "><input type="text" id="chid" name="chid" value="" placeholder="Enter your Channel ID" style="width: 700px;" required></p> </div> <br> <div> <p class="labels required">Channel Access Token:</p> <p class="labels "><input type="text" id="chtoken" name="chtoken" value="" placeholder="Enter your Channel Access Token" style="width: 700px;" required></p> </div> <br> <div> <button style="background-color:#1f73b7; color:white; width:8%; height: 35px; border: none; border-radius: 3px;" type="submit">Submit</button> </div> <br> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.