Submitted input in a text field is automatically displayed in a separate text box

Below is a snippet of HTML code from my AngularJS application

<input type="text" class="input-xlarge" id="user_name" ng-model="myModel.text" 
       name="user_name" rel="popover" data-content="Enter your first and last name."
       data-original-title="Full Name">

<input type="text" class="input-xlarge" id="user_email" ng-model="myModel.text"
        name="user_email" rel="popover" data-content="What’s your email address?" 
        data-original-title="Email">

This is the controller code being used

    function MyCtrl2($scope) {
         var initial = {text1: 'initial value'};
         var ini = {text2: 'initialvalue'};
         $scope.myModel = angular.copy(initial);
         $scope.myModel = angular.copy(ini);
}

MyCtrl2.$inject = ['$scope'];

When typing in the first text box, the content gets automatically populated in the second text box as well.

I'm trying to understand why this is happening and how to prevent it.

Answer №1

Since both fields share the same ng-model, this issue arises.

To resolve this, ensure unique values are used for the ng-model in each input field.

Answer №2

Due to the fact that both of your input fields are linked to the same model name myModel.text

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

jQuery cannot access a hidden CSS property

I'm working on a form for my new project and have assigned the same class to all input fields. In my CSS file, I've set the text to be capitalized and it displays correctly. However, when I use jQuery's .val() to get the value of the field, ...

Tips for adding CSS attributes to a <style> tag in Internet Explorer

My current issue involves an ajax web application that loads all parts on a single page, specifically index.html. The inner parts being loaded in index.html have exceeded 32 pages (html, js, css). Now I am facing difficulties with the CSS files that need ...

What causes the width of input fields to increase as more inputs are added in flexbox?

I'm working on a form that consists of multiple sections, each with varying numbers of input fields. I've noticed that when I apply display: flex to the parent div and set the input fields to 100% width, the widths are calculated differently depe ...

Schedule Master: A sophisticated tool for time management

I have been following the instructions to implement a date time picker from this tutorial. I downloaded the necessary js and css files and placed them in the respective directories. However, when I click on the calendar icon, the calendar does not pop up. ...

Having trouble rendering the response text from the API fetched in Next.js on a webpage

I've written some code to back up a session border controller (SBC) and it seems to be working well based on the output from console.log. The issue I'm facing is that the response comes in as a text/ini file object and I'm unable to display ...

What could be the reason for esbuild not being included in the installation process of a fresh Rails 7 application that

After initiating a fresh Rails 7 app, I utilized the command line syntax: $ rails new app_name --css=bootstrap An error occurred during app creation specifically when including --css=bootstrap: Install esbuild run yarn add esbuild from ".& ...

What is the best way to access the inputName element using the ng-messages directive?

Is there a way to trigger error messages without knowing the input name? Take a look at the code snippet below: <input class="form-control" id="{{field.field_id}}" set-name="{{field.field_id}}" type="text" ...

I am experiencing issues with my images not appearing on my Laravel website despite trying various solutions found online. The images upload successfully but fail to display on the site

I'm facing an issue where the image uploads correctly but does not display. Is there something missing in my code? <div class="col-md-4"> <img class="img img-fluid img-thumbnail" src="/storage/profile_images/{{$prof ...

Picture in a clear background without any alteration

Is there a way to create a background-color with opacity inside an image without affecting the image itself? The issue lies in the fact that the transparent background-color makes everything underneath it, including text and the image, transparent. Below ...

What could be causing me to have to click the button twice in order to view my dropdown list? Any suggestions on how to

I am facing an issue where I have to click twice on the "Action" button in order to see my dropdown list. How can I resolve this? Is there a way to fix it? $(document).ready(function() { $(".actionButton").click(function() { $dropdown = $("#cont ...

The div element is finally loading properly after multiple clicks

I need some assistance with loading dynamic divs in Angular. I have created a button that adds new divs each time it is clicked in a specific area. However, once these new divs are added, they appear incorrectly: After adding the divs, the editor and cale ...

What could be the reason for Internet Explorer pulling styles from the media=print CSS?

The HTML below incorporates a DHTML behavior into a CSS class. Unfortunately, Internet Explorer (specifically version 8 in compatibility mode) does not read the top style exclusively; instead, it also recognizes the @media print. <!--[if IE]> < ...

What is the best way to display data from an Excel spreadsheet on my website?

I'm faced with a challenge in my Excel spreadsheet- I have a mix of numbers and text that I want to turn into graphical representations on a webpage. I'm considering using Python or PHP to achieve this as HTML alone doesn't seem up to the ta ...

Submit the form without displaying any output in the browser, not even in the view source code

I have a basic form that needs to be submitted multiple times, but I want the submission process to be hidden from the browser. Simply using "hidden" or "display:none" won't completely hide the form code when viewing the page source. I tried using PHP ...

Use jQuery to switch out certain text with specified HTML elements

I am looking to use jQuery in order to dynamically wrap any text that matches a specific regular expression with a particular HTML tag. For instance: <div class="content"> <div class="spamcontainer"> Eggs and spam is better than ham and spam. ...

Is the image flickering non-stop when the button is pressed?

Every time I push the button, the image on the HTML 5 canvas flickers. After investigating, it seems like the issue might be related to the ctx.clearRect(0,0,100,500) function. Any suggestions on how to fix this problem? I'm currently working on anim ...

Styling the Sidebar with a Tucked-In Header Ribbon in CSS

There are numerous methods to achieve this desired effect: I initially used a table to achieve this, but I have now chosen against using tables for that purpose. What is the most effective way to accomplish this while maintaining a right border? ...

Generating the templateUrl dynamically with ui-router

Looking to dynamically generate a template URL using the ID from my ng-click. However, running into an error: Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to: TypeError: filename.indexOf is not a function Below is my rou ...

I continuously encounter "undefined" when attempting to retrieve collections

Despite my best efforts, I am unable to retrieve the data from the server using the snapshot docs. I have verified that the collection is named "creaciones" in lowercase. There is one document in the collection with existing data. I have double-checked fo ...

Tips for eliminating unnecessary space in a text area

I have a textarea and a button. I wanted them to be placed in the same horizontal line from the bottom. However, when I place them inline with no style applied, there is extra margin at the bottom of the textarea that is causing them not to align properly: ...