I've been utilizing the jsFiddle below to achieve my desired outcome, but I'm looking to assign a unique ID for each addition. Any suggestions or tips would be greatly appreciated.
Thank you!
<span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X </span>
visit the console to view the width of each item with a unique identifier
let room = 1;
function add_fields() {
room++;
let objTo = document.getElementById('room_fileds')
let divtest = document.createElement("div");
divtest.innerHTML = '<div class="label">Room ' + room +':</div><div class="content"><span>Width: <input type="text" style="width:48px;" name="width[ id='+ room +']" value="" /><small>(ft)</small> X</span><span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span></div>';
objTo.appendChild(divtest)
}
div { padding:10px;}<input type="button" id="more_fields" onclick="add_fields();" value="Add More" />
<div id="room_fileds">
<div>
<div class='label'>Room 1:</div>
<div class="content">
<span>Width: <input type="text" style="width:48px;" name="width[id=1]" value="" /><small>(ft)</small> X </span>
<span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span>
</div>
</div>
</div>Using the length[] and width[] will function correctly, resulting in two arrays within the $_POST variable. To display this data, you can utilize a foreach loop like so:
foreach ($_POST['length'] as $key => $val) {
echo "length: " . $_POST['length'][$key] . ", width: " . $_POST['width'][$key];
}
If you prefer to label them with numbers, you can use a variable called "room" to number each field accordingly:
divContainer.innerHTML = '<div class="label">Room ' + room +':</div><div class="content">';
divContainer.innerHTML += '<span>Width: <input type="text" style="width:48px;" name="width_' + room +'" value="" /><small>(ft)</small> X</span>';
divContainer.innerHTML += '<span>Length: <input type="text" style="width:48px;" name="length_' + room +'" value="" /><small>(ft)</small></span>'
divContainer.innerHTML += '</div>';
Struggling to place a loading element between the top toolbar and bottom tabs on various iPhone models and iOS versions. The challenge arises with iOS 10. Using "margin-top" causes errors, while "padding-top" doesn't work on iPhone X. Is there a CSS s ...
I designed a header image for my website, but I'm struggling to make it extend the full width of the user's web browser with black "bars" on the sides. I've attempted a few solutions, but haven't been successful so far. Currently, my c ...
Hi there! I just started learning Bootstrap today, coming from a background in HTML/CSS. I decided to dive right into Bootstrap 4 instead of starting with version 3, even though I know it's still in alpha. I've been experimenting with it but I ca ...
Utilizing both user drag event and keypresses to adjust the position in an HTML5 video element, I am updating the video time with the following line of code: video.currentTime = toTime; Additionally, I am updating a canvas based on the video's posit ...
If you want to track my progress, you can view it here - . Although clicking on the links in the navigation bar scrolls the page to the correct location, the link itself is not being highlighted. To address this, I had to incorporate an offset. var offset ...
I have an array that contains duplicate items. My goal is to filter out these duplicates and return only the unique items, sorted based on their frequency of occurrence in the initial array. const initialArr = [ { id: 1 }, { id: 1 }, ...
Below is the HTML snippet I am working with: <div class="text">bla bla bla bla</div> <div class="button">Show</div> Here is the corresponding CSS: .text{ height:100px; overflow:hidden; } Imagine the .text div contain ...
Hey folks, I've been using vercel for deploying my project. There's an issue with one of the dependencies in my NextJS project, which is located inside the node_modules folder. This dependency is supposed to read and write files within its own di ...
I am faced with the task of creating a page that allows users to edit content, which will then be converted to HTML and stored in an MS SQL 2008 R2 database. The challenge is to display this information on an announcements page using the data from the data ...
I have an HTML page passing input values to a python script for processing. I want to display the results of the calculations simply on a plain white page with no formatting, just plain numbers. The issue is that despite successfully passing and processin ...
I've dedicated today to strategizing the best approach for revamping our company's website, taking into consideration that less than 1% of web users have JavaScript disabled. Our management team strongly believes in ensuring that our website rem ...
Having multiple dropdowns (select boxes) on my website has led me to desire different alignments for them. For instance, I would like one dropdown to be centered on a specific page while another should appear on the right side of a separate page. Since my ...
When using jQuery, form data is posted: $.ajax('API/Validate/Customer?column=1&rowid=2&vmnr=3&isik=4', { data: JSON.stringify({ headerData: $("#_form").serializeArray() }), async: false, cont ...
Embarking on my journey into the world of node.js (following the steps in the rolling with mongo tutorial), I have created a jade file which looks like this: extends layout block content h1= title form(method="post") div div span Tit ...
Let's say we have a form that submits data to the dataprocess.php file after submission. The dataprocess.php file processes the form variables and outputs the desired results. It can be challenging to directly echo content into a specific div on a pa ...
In my current WordPress project, I am working on dynamically changing an image based on the tab that is clicked. I would like to use jQuery's fade effect to smoothly replace the image with a new one that is relative to the specific tab being clicked. ...
I have been trying to center the input between the two buttons but nothing seems to work:( Here is a snapshot of the current layout, I am looking to make it smaller and position it in a single line. https://i.sstatic.net/ggZJR.png <!-- Bootstr ...
Despite reviewing the existing question here, I still find it confusing. Therefore, marking it as a duplicate is not helpful since it doesn't provide an answer I can grasp. I am seeking a function that can return a value (specifically JSON data from ...
Whenever I execute the post() function below, it triggers an error message stating: Type 'void' must have a '[Symbol.iterator]()' method that returns an iterator. This is the code snippet causing the issue: static async post(options: ...
My journey with Typescript is relatively new, and I've recently built a snackbar component using React Context. However, when attempting to set the Alert severity, I encountered this error: "Type 'string' is not assignable to type 'Colo ...