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:
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>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
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.