Form submit onClick function not creating 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>  <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</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 field" 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'm new to Javascript and in this example, basically I have created a Shipping Method Page. In the "ADD Delivery Address" link, on clicking there is a address form which needs to be filled out and after pressing the ADD NEW button, all the address form data should appear in the select menu option like in the picture below. But I'm unable to do so. Can someone please enlighten me on his. It would be a immense help to me.I have tried numerous times, it works with a single field data, but with multiple fields it fails. Thank you

enter image description here

you mean to "address" "street" " city" like in dropdown?
– Lalji Dhameliya
Aug 24 at 4:09

@LaljiDhameliya yes exactly.........but i'm not able to do so.
– Sajjad Tabreez
Aug 24 at 4:16

2 Answers
2

first you created model popup add new button add submit so it submit form.
i have used for adding option into select something like.

var select = document.getElementById("dynamic-select"); var option = document.createElement("option"); option.text = "your text"; option.value = "your value"

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"); var option = document.createElement("option"); var data = getFormData(); var text = data.address + data.street + " " + data.route + " " +data.city + " " +data.postcode option.text = text; option.value = "address" select.add(option); $('#myModal').modal('hide'); function getFormData() debugger; var obj = new Object(); obj.address = document.getElementById("autocomplete").value; obj.street = document.getElementById("street_number").value; obj.route = document.getElementById("route").value; obj.city = document.getElementById("locality").value; obj.state = document.getElementById("administrative_area_level_1").value; obj.postcode = document.getElementById("postal_code").value; return obj;

Thanks for explaining the concept in a precise way. :-)
– Sajjad Tabreez
Aug 24 at 4:59

First thing, your are using button type="submit" it is going to post back, Just use <button onclick="addOption()">Add NEW</button>

button type="submit"

<button onclick="addOption()">Add NEW</button>

Secondly the <form> either you remove model from <form> tag or use return false in addOption() function

<form>

return false

addOption()

Third use jquery map() function to collect all fields value in side addOption()

map()

addOption()

Check this code :

Here is the new entered address in select :

Thanks for you kind support. this means a lot.
– Sajjad Tabreez
Aug 24 at 5:01

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

搜尋此網誌

Dfyjkt