Tips for creating spacing between text boxes generated by JavaScript and aligning them with another text box from JSP: 1. To add space between text boxes created

Can someone assist me in resolving two issues: 1. Creating space between each additional textbox generated by JavaScript. 2. Aligning the textboxes created by JavaScript (from left) with a textbox created by JSP.

Essentially, there is a textbox on the JSP page, and when a user clicks the Add button, JavaScript adds more textboxes. I would like the original JSP box and the additional JavaScript-generated textboxes to align at a specific position from the left, with space between each JavaScript-generated textbox.

Thank you in advance.

Below are the JavaScript and JSP code snippets:

<SCRIPT language="javascript">
    function addRow(tableID) {
         var table = document.getElementById(tableID);


        var rowCount = table.rows.length;

        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);

        var element1 = document.createElement("input");

        element1.type = "checkbox";

        cell1.appendChild(element1); 
        var cell2 = row.insertCell(1);


        var cell3 = row.insertCell(2);

        var element2 = document.createElement("input");

        element2.name = "choiceEntry";
        element2.type = "text";
        element2.size = "100";


        cell3.appendChild(element2);
        
    }
    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
        }catch(e) {
            alert(e);
        }
    }
 </SCRIPT>
<html>


<form method="post" action="poll_save.jsp">

<TABLE id="dataTable" width="350px" border="0">

    <TR> 

       <!-- <TD> 1 </TD>-->
        <TD><INPUT type="text" class="bigText" value=" 
<%=choice.getChoiceEntry()%>"  size = "100" name="choiceEntry"/> </TD>
        <TD> <INPUT type="checkbox" name="chk"/></TD>
    </TR>

</TABLE>

Answer №1

If you're looking to create a vertical spacing and left margin between inputs, you can achieve that with the following CSS:

form[action="poll_save.jsp"] table input {
  /* Adjust the left offset here */
  margin-left: 125px;
  margin-top: 32px;
}

To dynamically add new inputs using JavaScript, you can try this approach:

const addOne = document.querySelector('#add-one');
const table = document.querySelector('#dataTable tbody');

let i = 0;
addOne.addEventListener('click', () => {
    table.innerHTML += `
    <tr>
        <td>
        <input name="input-${i++}" type="text" />
      </td>
    </tr>
  `;
});

If you need more flexibility, like aligning inputs to the center of their container, please provide a sketch for clarity.

I recommend moving your styling to CSS instead of inline styles and using classes for better organization. Here's a sample working example: https://jsfiddle.net/sigmasoldier/kw8x3b42/2/

Please note that the JSP input shown in the example is not written in actual JSP syntax, but you can adapt it accordingly.

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

Using .get methods with jQuery's .on

I need to retrieve the tag name of the element that is clicked inside an li when the user interacts with it. The li element gets dynamically added to the HTML code. I have implemented the following code, but unfortunately, it does not seem to be functionin ...

AngularJS View not updating when navigating to a third level nested route using angular-ui-router

I'm currently working on organizing my routes with three levels using ui-router. I'll just provide a snippet of my routes that is causing an issue, as they are quite extensive and including everything here may be overwhelming. If you feel more d ...

Implementing Vue.js click event behavior on a component within the template

Encountering an issue while developing Vue's template onclick event. Trying to open a module when clicking a file, I have looked at some samples with native code, but it does not quite fit into my code and I cannot reach the console. Here is my code: ...

The click detection on loaded 3DObjects using threejs raycast is not functioning properly

After loading a .obj file using the following code: var loader = new THREE.OBJMTLLoader(); loader.load( "../obj/machine.obj", '../obj/machine.mtl', this.loadObject); I attempt to detect a click on it with the following code: click: function( ...

Having trouble getting my images to load in React. Seems like a common issue that many people run into

UPDATE: After trying different paths for my image import (such as 'import Github from '../..img/github.png'), the errors have disappeared but the image still won't load on my app. Folder Structure: My-Portfolio node_modules public src ...

Could there be an issue with the couch-nano changesReader batching, or am I overlooking something important?

This particular issue is related to the changesReader API within the couchdb-nano library. Expected Outcome In theory, the code below should wait for 10 seconds before returning a batch of messages from the most recent position in the changes feed. For in ...

The integration of HTML and CSS using ng-bind-html appears to be malfunctioning

<ion-item ng-bind-html="renderHtml(word[key])"> </ion-item> When referring to word[key], it represents: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> This is the CSS being u ...

Transforming a DataUrl containing an image into an actual image

I am working on a Java web application where I need to capture pictures using the webcam. To achieve this, I have implemented Photobooth.js, which allows me to take images in web applications. My current challenge is that after capturing an image by click ...

Using Lightmaps with Three.js

Is it true that lightmaps function independently of other textures? It seems like I need to establish a second set of UVs. I've exported my JSON object with a second set of UVs and included the following code snippet: geometry.faceVertexUvs[0] = ge ...

Using PHP and JavaScript to enhance functionality around a hyperlink

I am trying to incorporate a small piece of Javascript on my website to ensure user confirmation. While I have successfully used the 'onclick' function with buttons, I am facing difficulty implementing it on a link. Here is the link in question: ...

What steps do I need to take to share my Node JS application on my local area network (

I have a Node.js application running on my Ubuntu machine successfully, as I can access it through localhost:8080. However, other machines on the network are unable to reach it. CODE: const portNumber = 8080 let app = express() app.use(express.static(__d ...

The Angular framework's structure is loaded in a combination of synchronous and asynchronous ways once the primeng tableModule

Encountered this error while trying to load the TableModule from primeng into my components module file and running 'npm run packagr': Maximum call stack size exceeded To address this, I switched my primeng version from primeng12 to primeng11.4. ...

Can integers be used as keys in a JavaScript object's storage?

Currently, I am in the process of creating a JSON index file to serve as a database index for a javascript application that is currently under development. The structure of my index will resemble the following: { "_id": "acomplex_indice ...

How can I transfer Gmail message using express rendering parameters?

Using passport-google-oauth for authentication and the node-gmail-api for fetching gmail, I aim to display gmail message after authentication. In order to achieve this, I have written the following code in routes.js: app.get('/profile', isLogged ...

Dynamic anime-js hover animation flickering at high speeds

I have implemented the anime-js animation library to create an effect where a div grows when hovered over and shrinks when moving the mouse away. You can find the documentation for this library here: The animation works perfectly if you move slowly, allow ...

Reorganize JSON data in JavaScript

I am in the process of creating a tree structure, and I want it to be organized in the order of name, desc, then children. However, the JSON data I have received is not in this order. Is there a way to rearrange it efficiently or perhaps optimize the code ...

jQuery form validation not functioning as expected

I'm attempting jQuery form validation but encountering issues with the desired functionality. I would like the border of an input to turn red when it's empty upon focus out. Alternatively, I aim to incorporate the "has-danger" bootstrap class to ...

The webpage becomes unresponsive and gets stuck when sending a stream of requests to the web server via ajax

I am currently working on creating a signal on the webpage that displays either a green or red color based on values retrieved from a database. However, when I send a request after 10 seconds, the page appears to freeze and becomes unresponsive. I am strug ...

What is the best way to conceal an element when another element is given a specific class?

Imagine you have 2 buttons The first button <button class="arguments variation-one">Some text</button> - this button has dynamic classes like: variation-one, variation-two, variation-three, but the .arguments class remains static. a ...

Display issues occur in IE and Edge with Base64-encoded PDF files

I have a PDF with encrypted content encoded as a base64 string. My goal is to display it using an embed element. It works perfectly in Chrome and other browsers, but I'm encountering issues with Microsoft Edge and Internet Explorer. success: function ...