'HTML, Bootstrap and javascript - submitting a form

I am using Bootstrap for the easy grid layout and its nice looking aesthetic. I have JavaScript files to create classes. My only page right now is index.html with an index.js.

I have a submit button, and that button needs to take the values of my boxes and create a new object with it, and I have no clue how to go from here.

What do I even do now? In reality I want to do this:

  1. When I fill my text box I want to press the Confirm button and use this information in a JavaScript file to create a new Object with this text, but I don't know how I can deliver this information. Then later I want to get this object for another script and so on.

The JavaScript when just executed in the console works. The issue for me is the delivery :)

If anyone could point me into the right direction I would appreciate it!

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <title>Test Site</title>
  <link rel="stylesheet" href="css/index.css">
  <script type="module" src="js/index.js"></script>
</head>

<body>
  <div class="col-md-4" style="text-align: left;">
    <form>
      <div class="form-group">
        <label for="colFormLabel" class="col-sm-12 col-form-label col-form-label">Enter Text here</label>
        <div class="col-sm-12">
          <input type="text" class="form-control form-control-sm" name="name1" placeholder="Enter your Name">
        </div>
      </div>
    </form>
  </div>

  <div class="col-md-12" style="text-align: center;">
    <button type="button" class="btn btn-primary" onclick="">
            Confirm <span class="badge badge-light"></span>
          </button>
  </div>
</body>
javascripthtml


Solution 1:[1]

You have to put a type="submit" to your form https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/submit

Then you can add an onclick event A nice exemple here : https://stackoverflow.com/a/12944957/10518580

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Romain Crevecoeur

Related Questions