How to insert radio buttons in alert box

Question

I am generating a table based on user input. Finding the table cell index on click function. I am trying to include a alert with radio buttons. On click of cells alert will be generate and that alert box should have radio buttons. I tried this but something went wrong.

 function CreateTable() { var rowCtr; var cellCtr; var rowCnt; var cellCnt; var myTableDiv = document.getElementById("myDynamicTable"); var table = document.createElement('Table'); table.setAttribute("contenteditable", "true"); table.border = '1'; table.id = 'myTable'; var tableBody = document.createElement('Tbody'); table.appendChild(tableBody); rowCnt = document.getElementById('txtrows').value; cellCnt = document.getElementById('txtcols').value; for (var rowCtr = 0; rowCtr < rowCnt; rowCtr++) { var tr = document.createElement('tr'); tableBody.appendChild(tr); for (var cellCtr = 0; cellCtr < cellCnt; cellCtr++) { var td = document.createElement('td'); td.width = '120'; td.appendChild(document.createTextNode("Click me," + rowCtr + +cellCtr)); tr.appendChild(td); } } myTableDiv.appendChild(table); CellIndex(); } function CellIndex() { $(document).ready(function() { $('#myTable').on('click', 'td', function() { var columnIndex = $(this).parent().find('td').index(this); var rowIndex = $(this).parent().parent().find('tr').index($(this).parent()); //alert('ColumnIndex' + " " + columnIndex + 'RowIndex' + rowIndex); var popUpList = $('<input type="radio">Insert Before<br><input type="radio">Insert After'); alert('popuplist' + popUpList); }); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table contenteditable="true"> <tr> <td>Row Count</td> <td>Column Count</td> <td></td> </tr> <tr> <td><input type="text" id="txtrows" /></td> <td><input type="text" id="txtcols" /></td> <td><button onclick="CreateTable()">Create Table</button></td> </tr> </table> <div id="myDynamicTable"></div> 

Answer 1

An alert() is a graphical component generated and rendered by the browser (client) software. It's not part of the web page and is not capable of rendering HTML inside of it - only plain text.

You can, however get the result you want by building your own dialog out of HTML and CSS and keeping it hidden until needed. When that occurs, you can show it via JavaScript.

Here's an example:

 let selectedColor = ""; // Get DOM references to elements we'll want to refer to multiple times let dialog = document.getElementById("dialog"); let result = document.getElementById("result"); let mask = document.getElementById("mask"); // Set up event handlers for the buttons document.getElementById("show").addEventListener("click", function(){ mask.classList.remove("hidden"); // Show the mask dialog.classList.remove("hidden"); // Show the dialog }); document.getElementById("hide").addEventListener("click", function(){ mask.classList.add("hidden"); // Hide the mask dialog.classList.add("hidden"); // Hide the dialog result.textContent = "You chose: " + selectedColor; }); // Set up event listener on dialog for radio button clicks dialog.addEventListener("click", function(event){ // If the source of the click was a radio button, capture its value if(event.target.type === "radio"){ selectedColor = event.target.value; } }); 

 .hidden { display:none; } /* used by the dialog by default */ /* When the dialog is shown, the mask will cover the main web page */ #mask { position:absolute; background-color:rgba(0,0,0,.25); top:0; left:0; right:0; bottom:0; z-index:1; /* This layers the mask on top of the main web page content. */ } /* Style the dialog and the elements in it as you wish */ #dialog { position:absolute; /* So the dialog can be in its own layer and placed anywhere we want */ top:20%; left:25%; border:10px double #222; background-color:aliceblue; padding:10px; width:50%; height:125px; text-align:center; z-index:10; /* Make sure the dialog is in the top layer */ } #dialog > h1 { margin-top:0; } #dialog > footer { margin-top:1.5em; } #result { text-align:center; font-weight:bold; font-size:2em; margin:2em; } 

 <input type="button" value="Show Dialog" id="show"> <!-- This div will be as big as the entire page and it will be layered in front of the main content, but under the dialog, creating a "modal" effect --> <div id="mask" class="hidden"></div> <div id="dialog" class="hidden"> <h1>Please pick a color</h1> <div> <label><input type="radio" name="color" value="red">Red</label> <label><input type="radio" name="color" value="white">White</label> <label><input type="radio" name="color" value="blue">Blue</label> </div> <footer> <input type="button" value="Hide Dialog" id="hide"> </footer> </div> <div id="result"></div> 

Answer 2

Natively, with the Window Object Methods , you only can:

• Displays an alert box with a message and an OK button - Window alert() Method
• Displays a dialog box with a message and an OK and a Cancel button - Window confirm() Method
• Displays a dialog box with a message and an OK and a Cancel button - Window prompt() Method

HTML has to be used inside a Form into the body of the document.