473,699 Members | 2,702 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

how to give a unique id to each input field created with button click

4 New Member
please i have a problem,i create new input field when a button is click,but i want each of the new create field to have a unique id,so i can use it for calculation in javascript.

Expand|Select|Wrap|Line Numbers
  1. function create(){
  2.  
  3.             var newinput = document.createElement('input');
  4.             newinput.placeholder = "test1";
  5.             newinput.id = 'test1'; 
  6.                 document.getElementById("mytest").appendChild(newinput);
  7.             }
May 4 '17 #1
4 1691
Dormilich
8,658 Recognized Expert Moderator Expert
solution: don't use IDs for your calculation but classes. If you're having an unknown number of input fields, you can't base your calculation on IDs anyways.
May 4 '17 #2
chijioke
4 New Member
but i don't know how to do that can you edit my code and fix it
May 4 '17 #3
Dormilich
8,658 Recognized Expert Moderator Expert
Expand|Select|Wrap|Line Numbers
  1. function create()
  2. {
  3.     var newinput = document.createElement('input');
  4.     newinput.placeholder = "test1";
  5.     document.getElementById("mytest").appendChild(newinput);
  6. }
May 4 '17 #4
jmrker
17 New Member
As 'Dormilich' said, I would not recommend this approach for calculations, but it is not impossible to do and can be done like this...
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title> Create Inputs </title>
  6. </head>
  7. <body>
  8. <button onclick="countThem()">Count Them</button>
  9. <div id="mytest"></div>
  10.  
  11. <script>
  12. function create(xx) {
  13.   var newinput = document.createElement('input');
  14.   newinput.placeholder = "test"+xx;
  15.   newinput.id = 'inp'+xx;
  16.   document.getElementById("mytest").appendChild(newinput);
  17.  
  18.   newinput = document.createElement('br');
  19.   document.getElementById("mytest").appendChild(newinput);
  20.  
  21. }
  22.  
  23. function init() { for (var i=0; i<10; i++) { create(i); } }
  24.  
  25. init();
  26.  
  27. function countThem() {
  28.   var sel = document.querySelectorAll('input');
  29.   var str = '';
  30.   for (var i=0; i<sel.length; i++) { str += sel[i].id+'\n'; }
  31.   alert(sel.length+'\n\n'+str);
  32. }
  33. </script>
  34.  
  35. </body>
  36. </html>
  37.  
Jun 4 '17 #5

Sign in to post your reply or Sign up for a free account.

Similar topics

2
19196
by: chris | last post by:
hi all im relativly new to PHP but loving it - its fantastic isnt it (reminds me a lot of BASIC on steroids) my question is this how do i call a function from a button using php?? Thanks
2
17361
by: Rosebud | last post by:
Hello, I'd like some help trying to generate input fields on the fly. What I have on an HTML page is a single text input field labelled #1, e.g. #1 <input type="text">. Next to the field is a button that, on click, I'd like to automatically generate a second text input field below the first, labelled #2. Everytime the button is clicked, another field is created with an incremented label. I explored iframes, but these text fields will...
2
2213
by: Ron Aronica | last post by:
I want to specify the value of an input field using the return from a function. I want to do something this this: <script> function value() { return "the value"; } </script> <form>
2
1796
by: Martin Knott | last post by:
Hopefully an easy answer. I've got a form with 1 input field, and a submit button. I register an event for the button, run in debug mode, push the button and sure enough I'm in the event handler. But when I add a validator to the form and connect it to the input field then I never can debug into the breakpoint in the buttons' handler. The validation works as expected. Why and how does the validator somehow inhibit the buttons' click...
1
1618
by: Adrian Parker | last post by:
v1.1 - After taking off smartnav (due to it not working properly), I've got code that will restore the scroll position of the page on postback, but now I'm looking at how to set focus on either a field that has failed validation or on the next input field down the page. What's the best approach. I've started by adding an onfocus attribute to each input field that records its ID in a hidden field. Can I just read down through the DOM...
17
9665
by: Eric | last post by:
I'm new to JavaScript and I wrote this code to play with. Oddly, if I enter text in a box and then press the button, I only get the onChange event for the text box and not the button's onclick event. But if I press the button without entering text first, the button click event does work. What's up? <html> <body> <h3>Events on Buttons and Text Boxes</h3>
7
6865
by: =?Utf-8?B?bWFydGluMQ==?= | last post by:
Hi, All, I create button in the code ( Dim Button as new Button), not using button web component (means not drap button and drop it ont he webform), after that I try to use button_click event, it is not work, anyone can tell how to use button click event ? Thanks in advance, Martin
3
3456
by: yimma216 | last post by:
I hava a form, which has five lines to enter at start. I want to have a button to add more lines when it is clicked. However, I am having trouble with it. This would be a form in a form using vbscipt and ADO <% Const linesNo = 5 Dim counter <html> .....
1
3184
by: cluless | last post by:
Hey everybody, I have a database with one major form that has a few subforms and a listbox, and on the form there are buttons that link to other forms as well. Once the list box is clicked on, the four subforms automatically populate based on the selection. The buttons that link to the other forms are designed to begin to add a record (based on what subform button was pressed). I want to find a way for the first field in the newly opened...
3
2278
by: Jeff Karli | last post by:
I want to confirm a number was entered before allowing the click to proceed. The click does work on its own but when I add the first If statement below it does not display the message....however when I change to greater than (>), it does run the 1st message below when a number is entered. It just doesn't display the message when it is set to less than (<) and no number is entered. Private Sub Add_Work_Order___Click() If...
0
8685
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9172
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8880
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7745
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5869
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4374
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4626
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2344
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2008
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.