javascript onclick form function

Question

Helllo I have this form that take 3 different input for my app. 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:

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.

Answer 1

You need to prevent executing the default function. Also do not use onClick method with button type submit

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>

Answer 2

Issue Identified

1. The form submit event function name is insertDB and function name that you defined is insertDBs
2. Use event preventDefault and stopPropagation function to stop form reload.
3. Donot ues onclick and type submit for the same button. 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>