HTML, Bootstrap and javascript - submitting a form-CodePudding

this is going to be a little bit specific but i am almost entirely new to this and am a little bit overwhelmed- essentially don't know where to look. Short information on this project: Am using bootstrap for the easy grid layout and its nice looking aestethic. 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 boxe and create a new object with it, and i have no clue how to go from here

<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  style="text-align: left;">
        <form>
          <div >
            <label for="colFormLabel" >Enter Text here</label>
            <div >
              <input type="text"  name="name1"
                placeholder="Enter your Name">
            </div>
          </div>
        </form>
      </div>

    <div  style="text-align: center;">
      <button type="button"  onclick="">
        Confirm <span ></span>
      </button>
    </div>
</body>

My Problem as mentioned before: 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!

CodePudding user response：

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

<button type="button"  onclick="submitForm()">
        Confirm <span ></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"  name="name1" id="name1" placeholder="Enter your Name">

You would then access the value from this input by calling

document.GetElementById("name1")

within your submitForm() function, or anywhere else.

CodePudding user response：

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