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.

As the button’s type is submit and it is a part of a form, clicking it submits the form and onclick function is not triggered. Try network tab of developer tools of your browser to see what is submitted. Or remove type=submit temporarily for testing. Or remove the form altogether and use ajax to submit info to api. — smartdroid
– smartdroid, Commented Feb 22, 2021 at 6:39
@PanhaSeav Before you made an edit, it was an issue with "chId" and not "chid", which was leading to error in fetching values :) — Pritesh
– Pritesh, Commented Feb 22, 2021 at 6:49

Nitheesh · Accepted Answer · 2021-02-22 06:48:20Z

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>

Yadab · Accepted Answer · 2021-02-22 06:53:45Z

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>

Collectives™ on Stack Overflow

javascript onclick form function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related