HTML, Bootstrap and javascript - submitting a form

Question

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:

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/bootstrap@5.1.3/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>

Do you want to submit the form data to a server, validate the data and submit it to a server if it passes validation, or pass the data to a script running on the front end without ever submitting the form? — traktor, Mar 04 '22 at 10:38
@traktor this is all just intended for locahost testing, already got an answer for it that works for me. Thank you though! — , Mar 04 '22 at 11:12

score 0 · Answer 1 · answered Mar 04 '22 at 10:35

0

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

answered Mar 04 '22 at 10:35

Romain Crevecoeur

33
7

score 0 · Accepted Answer · edited Mar 04 '22 at 14:41

In your JavaScript, create a function called submitForm(), and change the onclick attribute for your button to submitForm().

<button type="button" class="btn btn-primary" onclick="submitForm()">
        Confirm <span class="badge badge-light"></span>
</button>

This allows you to call the function when the button is pressed.

To get values from the various input elements, you'll need to give them IDs. For example, you could have

<input type="text" class="form-control form-control-sm" name="name1" id="name1" placeholder="Enter your Name">

You would then access the value from this input by calling

document.GetElementById("name1").value

within your submitForm() function, or anywhere else.

`onclick` is an _attribute_, not a tag. – isherwood Mar 04 '22 at 14:41 — isherwood, Mar 04 '22 at 14:41

HTML, Bootstrap and javascript - submitting a form

2 Answers2