javascript onclick form function

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

Issue Identified

The form submit event function name is insertDB and function name that you defined is insertDBs
Use event preventDefault and stopPropagation function to stop form reload.
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>

Advertisement

Answer