Having trouble getting a new input box to be added when clicking with AngularJS?

I am facing an issue with adding dynamic form fields to the database using PHP. I have utilized angular for this purpose, but only the last form field is getting inserted into the database. To address this, I attempted using arrays and loops to increment and update the form fields in the database. However, the query seems to be malfunctioning as the data is not being inserted properly. Can anyone identify what is causing the problem here? I would appreciate any assistance. Thank you in advance.

Below is the code snippet:


    <form method="post">
    <div class="form-group " >
        <input type="text" placeholder="Campaign Name" class="form-control c-square c-theme input-lg" name="camp_name"> </div>
       ... (code continues)

Answer №1

To prevent page refresh, update the input type to type="button". By not specifying a type, it defaults to type="submit" which causes the page to reload. Be sure to specify the type to avoid this issue.

Answer №2

Give this a try:

<button type="button" class="btn btn-primary btn-lg" onclick="addNewChoice()">Add</button>

Remember to always specify the button type to avoid default submission behavior, which can cause the page to refresh.

I hope this information is helpful!

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 a set formatter in jqGrid within a personalized formatter

Can I incorporate a predefined formatter into a custom formatter? Here is an example using the colModel: colModel: [ ... { name: 'col1', formatter: myFormatter } ... ] Below is the custom formatter function: function myFormatter(cellVal ...

Running a shared function following every Promise resolution

Currently working on a nodejs project and utilizing bluebird.js for Promises. I'm looking to have a function executed after each .then() method in the chain. Does anyone know of a way or API within bluebird.js that supports this? Appreciate any guida ...

Creating a series of text messages for Push Notifications using FCM in conjunction with Ionic 1. Multiple lines of

I've been attempting to send push notifications with multiline text messages. I've experimented with various techniques such as using setBigStyle in FCMService.java, HTML.fromHTML, and others, but haven't been successful in getting the messa ...

What is the process of linking this JavaScript code to an outer stylesheet and integrating it with the HTML document?

After encrypting an email address using Hiveware Enkoder, the result can be found below. obfuscated code I typically include it directly inside the div as is. However, I would like to streamline my code by placing it in an external file. While I know ho ...

Explore the latest update in the AngularJS single page application that introduces a new feature specifically designed for the initial login

Our AngularJS single page application has a new feature that we are ready to launch for customer use. We want to inform the logged in user about this new feature so they can start using it. We are looking for a small animated information symbol with a too ...

Unlocking the Secret: How to Bind a Global Touch Event Handler in Angular 4 to Prevent iOS Safari Page Drag

The issue at hand is that within my Angular 4 application, there is a D3.js chart that relies on user touch input for dragging a needle to a specific value. The drag functionality is triggered by 'touchstart', while the registration of the final ...

Modify visibility or enable state of a text box according to a checkbox in PHP

Currently, I am utilizing PHP to exhibit a vertical list of numbered checkboxes, with one checkbox for each day in a specific month. Next to every checkbox, there is a text box where users can input optional notes for the selected day. To ensure that users ...

Is there a way to utilize a MongoDB plugin to retrieve results directly as a return value instead of within a callback function?

I came across a MongoDB plugin for Node.js that always utilizes callback functions to return search results. However, I am looking for a way to receive the result directly without using callbacks. The code snippet below does not provide me with the desire ...

Is there a way to block the .load() function directly from the browser console?

I am looking to enhance the user experience on my website by dynamically loading certain content after login. This involves using a $.post(...) method to interact with a servlet that verifies the user's credentials, followed by a $.load(url) function ...

Vue-resource is returning a Promise object

How do I access the response data in an Ajax call? When I log response.text(), it displays a PromiseObj. Console PromiseObj context: undefined promise: Promise {status: "resolved", result: ")]}',↵{\"Result\":\"SUCCESS\",&bs ...

Tips for retrieving a selected date from an HTML textbox labeled as "Date"

My goal was to find the differences between two dates by utilizing an HTML Date textbox. <input type="text" name="datein" id="datein" value="" class="inputtexbox datepicker" style="display: none" is-Date/> <input type="text" name="dateto" id=" ...

What is the process for refreshing a user's session from the backend following updates to their metadata?

Currently, I am utilizing Next.js on the client side, auth0 for authentication, and Django Rest Framework for the backend. By following Auth0's Manage Metadata Using the Management API guide, I successfully managed to set new metadata values (verified ...

AdonisJs experiencing issues with web socket.io functionality

Having trouble with Web socket.io in AdonisJs. I have been using a library called adonis5-scheduler to run tasks within Adonis. Shown below is one of my tasks: import { BaseTask } from 'adonis5-scheduler/build' export default class GetRoulette ...

Change the local date and time to UTC in the format of yy:mm:dd H:M

I must change the date format from local time to UTC or ISO as yy:mm:dd H:M, or calculate the difference between local date times with 03:30 as yy:mm:dd H:M 2016-10-22T04:30:00.000Z convert this to 2016-10-22T01:00:00.000Z ...

Experiencing issues with the URL after installing Grunt?

click here to see the image descriptionI have successfully installed AngularJS Development with Yeoman, Grunt, and Bower. When I run the server using grunt server, it starts running without any issues. However, the URL that is being passed looks like this: ...

Collect data from a third-party website that necessitates the activation of JavaScript

Given that phantomjs has been abandoned, I am exploring alternative methods. For instance, using chrome-webdriver may not be ideal as it cannot operate on a remote host like heroku. Is there a way to scrape a website that relies on JavaScript being activa ...

Determining the state update value in useEffect using dispatch and payload in Redux

Apologies for the confusion in the title. I am currently working with React and Redux-toolkit. I encountered an issue where when referencing the updated value in the useState set function, I ended up getting the value before the update. I understand that ...

The website functions properly in Chrome, but encounters issues in IE

Currently working on validating some JavaScript code. Chrome seems to be handling it well, but as expected, IE is causing some issues. Take a look at the code below: function validateData(a,id){ var inputs = document.getElementsByName('attname[] ...

Utilizing D3.js v4 to showcase a JSON file on a map

I am attempting to create a map similar to the one created by Mike Bostock. You can access my JSON file (here), which represents Europe divided into NUTS 2 regions. The structure of the JSON file is as follows: { "type": "Topology", "objects": ...

Is it possible for us to perform an addition operation on two or more items that belong to the same

I am faced with a challenge involving 3 objects of the same type, each having different values for their properties. My goal is to add them together as illustrated below: Consider this scenario: objA = { data: { SH: { propertyA: 0, propertyB: ...