Looking to incorporate three additional fields by clicking on the "add more" button

I am currently working on a PHP and Bootstrap script designed to collect website addresses. Initially, there is a single field that gathers website names linked to "address1" in the MySQL database. I have expanded the database to include two additional fields known as "address2" and "address3."

My goal is to include an "Add More" button beneath the "address1" field, allowing users to click and add another website if needed. The code snippet I am utilizing is as follows:

             <div class="span12">
             <form class="form-horizontal" id="registerHere" method='post' action=''>
  <fieldset>

<div class="control-group">
      <label class="control-label" for="input01">Website Address 1</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="address1" name="address1">

      </div>
</div>

       <div class="control-group" style="display: none;" id="address2Field">
      <label class="control-label" for="input01">Website Address 2</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="address2" name="address2">

      </div>
         </div> 

        <div class="control-group" style="display: none;" id="address3Field">
      <label class="control-label" for="input01">Website Address 3</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="address3" name="address3">

      </div>
          </div>    
          </div>

In the code above, my intention is to initially hide the "Website Address 2" and "Website Address 3" fields but reveal them upon clicking the "Add More" button placed under "Website Address 1. I am looking for a quick solution, so any guidance would be greatly appreciated. Additionally, I would like to limit the functionality to only two additional fields, preventing users from repeatedly clicking and creating an excessive number of new fields.

Thank you

Demo Image https://i.sstatic.net/lOm7d.png

Answer №1

To display the following address field when the previous one is selected, you can use the following method:

http://jsfiddle.net/KfQbb/

var $group = $('.control-group');

$group.hide().first().show();

$group.on('focus', 'input', function(e) {
    $(this).closest('.control-group').next('.control-group').slideDown();
});

Alternatively, you can implement a version that includes an Add More button: http://jsfiddle.net/KfQbb/4/

var $group = $('.control-group');

$group.hide().first().show();

$group.on('click', '.more', function(e) {
    var $next = $(this).closest('.control-group').next('.control-group').slideDown();
    $(e.currentTarget).hide();    
    if ($next.find('.more').hasClass('last')) {
        $next.find('.more').hide();
    }
});

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

Javascript - issue with accurately retrieving element offset value while scrolling

My goal is to dynamically change classes for elements based on their position during scrolling. I am trying to calculate the top offset element value and adjust the classes accordingly. Here is the function I am using: handleScroll () { const header = ...

From Jquery to PHP to MySQL: Creating dynamic forms with variable fields

I am facing an issue with a multi-page form that uses multiple MySQL tables to store entered values. One of the pages contains a form that should allow users to click a + button to add extra lines for additional information. The user can add any number of ...

Are there any class options that offer a wider width than modal-lg?

I am currently using vue.js along with Bootstrap. Within my modal dive, I am looking for a class that will help me increase the width of the modal div, As you can see from the image below, my modal div looks like this. I plan on adding 12 more tabs, whic ...

Exploring Node.js and Express routing: Strategies for managing client-side promises

I've been working on a routing issue with MongoDB where I'm having trouble retrieving data on the client side from the promise received via $resource. There's a button on the HTML page that triggers the following function on ng-click: $scop ...

Is it possible to create a return using messageEmbed in Discord?

I have been working on creating a Discord bot that responds to the ! status command with the server status. I took inspiration from this existing bot. The only change I made was to ensure that the bot replies immediately to the ! status command without re ...

Ways to remove unnecessary spaces from a JSON Object

I have a generic ajax.post method that takes in data from a function parameter. I'm looking to trim the data properties within the function. Here's the current code snippet: function PostToServer(options) { var defaults = { 'url ...

Creating a child element to fully span the width of its parent using floating techniques

My dilemma involves a child element nested under a floated parent. Is there a way to make the child element full-width without affecting the width of the parent? The current situation The desired outcome, but without using float The workaround suggested ...

Ways to connect a click event to a dynamically generated child element with the help of jQuery?

I am aware that similar questions have been asked elsewhere, but as someone new to jQuery, I am still struggling to attach a click listener to an a element within a dynamically appended ul.li.a structure in the DOM. Below is an example of how the structure ...

Ways to receive attributes prior to the Render event

I am a beginner in React and encountering an issue with retrieving props from the parent before the child is rendered. https://i.sstatic.net/CLAdH.png My problem involves an Editor component that passes a string as props to a button. The string is collect ...

What is the reason that when the allowfullscreen attribute of an iframe is set, it doesn't appear to be retained?

Within my code, I am configuring the allowfullscreen attribute for an iframe enclosed in SkyLight, which is a npm module designed for modal views in react.js <SkyLight dialogStyles={myBigGreenDialog} hideOnOverlayClicked ref="simpleDialog"> <if ...

Loading a chunked polyfill file in webpack only when needed - a step-by-step guide

In order to prevent unnecessary loading of polyfills, it is recommended to add some logic in the <head> section (https://webpack.js.org/guides/shimming/) <script> var modernBrowser = ( 'fetch' in window && ...

Can we establish communication between the backend and frontend in React JS by utilizing localstorage?

Trying to implement affiliate functionality on my eCommerce platform. The idea is that users who generate links will receive a commission if someone makes a purchase through those links. However, the challenge I'm facing is that I can't store the ...

Struggling to make React respond to button clicks without resorting to using addEventListener

Can anyone help me figure out why I can't get the onclick handler to execute in reactjs when specifying it inline for a button? The only solution that worked for me was using addEventListener. From what I understand, this code should work: <button ...

Encountering issues when attempting to send a POST request using Rails, React, and jQuery

I am a beginner in the world of React and I'm currently working on building a Twitter-like app for practice purposes. Although I managed to successfully retrieve a list of my tweets, I have hit a roadblock when it comes to posting a new tweet using AJ ...

javascript/jquery: ensure Android device displays content in full-screen mode

Currently working on developing a web app specifically for an android device that needs to be displayed in fullscreen mode. I came across the code snippet above on stack overflow, which successfully activates fullscreen mode upon click event. However, I a ...

What is the best way to create a sequential number pattern of 1, 2, 3, 4 in Mongoose?

Is there a way to create a similar pattern without coding experience? I'm not familiar with coding, so looking for guidance. Here is the code snippet in question: array = 1,2,3,4,5 const note = new notedModel ({ _id: array, note: args[1] ...

Error: Unescaped string detected in jQuery code

I'm struggling to come up with a name for it, but I'll do my best to explain. $(document).on('click','.swaction',function(event){ var pdfId = $(this).closest('tr').find('td:first').html(); // For examp ...

Trouble with HTML Contact Page Email Delivery

Hello there, I recently set up a contact page for my html website but unfortunately, it's not sending the messages to my email as expected! You can see what I mean in this screenshot -> https://i.stack.imgur.com/2xPXw.png I'm a bit puzzled b ...

Having trouble accessing portlet resource URL from JavaScript in Liferay 6.2

I have been working with Liferay Portal 6.2 CE GA3 and I am facing an issue where I need to execute a custom portlet resource method from another portlet's JSP file. Below is the code snippet I am currently using. <a href ="#" onclick="myfunctio ...

Generating consecutive numerical values within the auto table JSPDF column VusJs

https://i.sstatic.net/idhrw.png columns: [ { header: 'No', dataKey: 'Index', }, { header: 'No Registrasi', dataKey: 'no_register' }, { header: 'Kode Partai', data ...