Issue with onClick function causing failure to generate options in select menu

    function getOption(){
    var select = document.getElementById("dynamic-select");
    if(select.options.length > 0) {
        var option = select.options[select.selectedIndex];
        alert("Text: " + option.text + "\nValue: " + option.value);
    } else {
        window.alert("Select box is empty");
    }
}

function addOption(){
    var select = document.getElementById("dynamic-select");
    select.options[select.options.length] = new Option('New Element', '0', false, false);
}
<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete Address Form</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        .pac-container {
            z-index: 10000 !important;
        }
    </style>
  </head>

  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h2>Shipping Method</h2>
                <form>
                    <div class="form-group">
                        <div class="radio">
                            <label>
                                <input type="radio" name="optradio" checked>Deliver To *</label>
                        </div>
                    </div>



                    <div class="form-group">

                        <select id="dynamic-select">
                            <option value="None">Select Shipping</option>

                        </select>
                    </div>

                    <div class="form-group">
                        <a data-toggle="modal" data-target="#myModal">Add Delivery Address</a>
                    </div>

                    <!-- Modal -->
                    <div class="modal fade" id="myModal" role="dialog">
                        <div class="modal-dialog">

                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Add your Delivery Details</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="panel panel-primary">
                                        <div class="panel-heading">
                                          <h3 class="panel-title">Address</h3>
                                        </div>
                                        <div class="panel-body">
                                         <input id="autocomplete" placeholder="Enter your address"
                                            onFocus="geolocate()" type="text" class="form-control">
                                            <br>
                                         <div id="address">
                                            <div class="row">
                                               <div class="col-md-6">
                                                  <label class="control-label">Street address</label>
                                                  <input class="form-control" id="street_number">
                                               </div>
                                               <div class="col-md-6">
                                                  <label class="control-label">Route</label>
                                                  <input class="form-control" id="route">
                                               </div>
                                            </div>
                                            <div class="row">
                                               <div class="col-md-6">
                                                  <label class="control-label">City</label>
                                                  <input class="form-control" id="locality">
                                               </div>
                                               <div class="col-md-6"> 
                                                  <label class="control-label">State</label>
                                                  <input class="form-control" id="administrative_area_level_1">
                                               </div>
                                            </div>
                                            <div class="row">
                                               <div class="col-md-6">
                                                  <label class="control-label">Zip code</label>
                                                  <input class="form-control" id="postal_code">
                                               </div>
                                               <div class="col-md-6">
                                                  <label class="control-label">Country</label>
                                                  <input class="form-control" id="country">
                                               </div>
                                            </div>
                                         </div>
                                         <button type="submit" onclick="addOption()">Add NEW</button>
                                      </div>
                                        </div>            
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

  </body>
</html>

I just started learning Javascript and I've developed a Shipping Method Page. When the user clicks on the "Add Delivery Address" link, an address form is displayed. After filling out the form and clicking the "ADD NEW" button, the data should appear in the select menu option. I'm encountering some difficulties in implementing this feature. Could someone please provide guidance on how to achieve this? Your help would be greatly appreciated. Thank you

https://i.sstatic.net/chir1.png

Answer №1

There seems to be a line bug here, as the id "newopt" does not currently exist in the HTML.

let newoptValue = $('#newopt').val(); 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some ways to apply selector combinators to hashed CSS module classes?

Seeking advice on overriding a style in a CSS module for a third-party datepicker component used within a custom component. The challenge lies in targeting the correct element with a selector combinator, complicated by the dynamic creation of class names i ...

What is the specific table element compatible with Polymer3?

I stumbled upon iron-data-table (), but it relies on bower which is used in Polymer2. However, I am working with npm in Polymer3. Is there a suitable table element or an alternative solution compatible with Polymer3? ...

The functionality of alpine.js x-for update is not functioning as intended

I have implemented a basic x-for loop on data from the Alpine Store (need it to be global). My objective is to modify a specific row after the table has been rendered by the x-for. Codepen: https://codepen.io/roniwashere/pen/oNMgGyy <div x-data> ...

Using for loops in Vue.js to dynamically generate HTML elements

I have a JSON object passed into an EJS template, and I want to achieve the same table structure in VUE.js. However, it seems like v-for in Vue only works with li tags. Is there a way to create a similar loop in VUE that generates HTML elements like show ...

Using the power of jQuery to send a Rails form for processing

Currently, I am facing an issue with submitting a Rails form using jQuery and Ajax. Even though I have utilized remote: true for AJAX functionality, I need to incorporate additional jQuery actions upon button click along with providing feedback on the acti ...

Using conditional rendering within the map function in React

I am working with the code snippet below and I am looking to implement a conditional rendering to exclude index 0 from being displayed. How can I achieve this? return ( <section> {pokemonCards.map((pokemon, index) => ...

Compatibility of Blackberry Webworks

As I prepare to build a Webworks app, the documentation indicates that it is designed to function only on devices equipped with OS 5.0 or later. However, I am curious if there exists a way to make the app compatible with devices running an OS version lower ...

React JS for loop not displaying any output

I am trying to create a component that loops from 0 to the value entered as a prop. if (props.number !== "" && props.toPow !== "") { for (let i = 0; i < props.toPow; i++) { return ( <div> & ...

Include a link in the email body without displaying the URL

My concern revolves around displaying a shortened text instead of the full link within an email. When the recipient clicks on "Open Link," they should be redirected to the URL specified. The text "Open Link" must appear in bold. My current development fram ...

SharePoint 2013 only allows the first AJAX request to work successfully, except when in Edit Mode

I am facing a challenge of making two AJAX requests simultaneously on a SharePoint page. One request originates from the current site, while the other comes from a team site. When I use different URLs (/events) and (/travel), each one works fine when use ...

Material UI Alert component not appearing on screen?

Greetings, I have been working on polishing my app now that it is finally complete. I decided to enhance the aesthetics by replacing all instances of window.alerts with Alerts from MUI (since they look way better). However, for some reason, they are not sh ...

Insert a page break after content for desktop browsers

Is it possible to control the display of sections on different screen sizes? I have a page that looks good on 15" laptops, but larger resolutions cause the next section to appear on the first screen. Is there a way to show the next section only on th ...

Can a FilePicker be Cleared Automatically through Code?

Currently, I am implementing an‘<input type="file" . . .’ to select files individually and then attach them to a table located right under the file picker. This functionality is quite similar to using the attachment button on a SharePoint form’s r ...

A guide on changing the background color to complement the light/dark theme in Bootstrap 5.3

In the latest version of Bootstrap, 5.3, users have the ability to select a theme for their websites. The built-in options include a Dark theme and a Light theme. For instance, by setting <html data-bs-theme="dark">, you can specify that t ...

Revive your Chart JS visualization with interactive re-animation via onclick action!

I've been exploring Chart.js and trying to achieve something simple, but I'm having trouble. I just want the chart to re-animate when clicking on a button, but I can't seem to make it work. I attempted to attach chart.update to the onclick e ...

How can I locate and substitute a specific script line in the header using Jquery?

I need to update an outdated version of JQuery that I have no control over, as it's managed externally through a CMS and I can't make changes to it. But I want to switch to a newer version of JQuery. Here is the old code: <script type="text/ ...

The alignment of the image is malfunctioning

I'm currently in the process of creating a personalized website for my niece, designed to be akin to a homepage just for her. While I have some experience with coding, I've hit a roadblock when it comes to positioning an image on the page. Someth ...

Unable to load the node modules

In my development journey, I created an ASP.NET MVC project using Angular 2 in Visual Studio 2017 and set up node for package management. Here is a snippet from the package.json file: { "version": "1.0.0", "name": "asp.net", "private": true, ... ...

The test suite encountered an error (EBUSY: resource busy or locked) and unfortunately failed to run at Nx version 14.5.10 and Jest version 27.5.1. It seems there was an

I have recently upgraded my NX Monorepo from version 13 to 14, and everything seems to be working fine except for the Jest migration. I keep encountering this error even after trying various solutions like clearing the cache, deleting node_modules, and rei ...

Steps for moving data from a JavaScript variable to a Python file within a Django project

I have created a unique recipe generator website that displays each ingredient as an image within a div. When the div is clicked, it changes color. My goal is to compile the ids of all selected divs into one array when the submit button is clicked. I have ...