Send a variety of form data using AngularFire

I'm currently exploring the functionality of AngularFire and trying to store a first name and last name in my Firebase database. While I successfully managed to create an input field for the first name and save it in Firebase, I'm facing challenges when adding a last name input field. Here is where I am at the moment:

HTML

<section ng-controller="premiercontrolleur">
<ul>
  <li ng-repeat="client in clients">
    <input ng-model="client.prenom" ng-change="clients.$save(client)" />
    <input ng-model="client.nom" ng-change="clients.$save(client)" />
    <button ng-click="clients.$remove(client)">X</button>
  </li>
</ul>
<form ng-submit="addClient(newClientText)">
  <input type="text" placeholder="First Name" ng-model="newClientText.prenom" />
  <input type="text" placeholder="Last Name" ng-model="newClientText.nom" />
  <button type="submit">Add Client</button>
</form>
</section>

Javascript

var app = angular.module("crmfirebase", ["firebase"]);

app.controller("premiercontrolleur", function($scope, $firebase) {
  var ref = new Firebase("https://mydirebaseurl.firebaseio.com/clients");
  var sync = $firebase(ref);

  $scope.clients = sync.$asArray();

  $scope.addClient = function(prenom, nom) {
    $scope.clients.$add({prenom: prenom, nom: nom});
  }
});

Upon submitting, I encountered this error:

Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('submit') does not support selection.

Answer №1

Make sure to correctly match the values. Keep in mind that 'prenom' is an object with properties for both first name and last name, so consider using this code:

  $scope.addClient = function(prenom) {
    $scope.clients.$add({prenom: prenom.prenom, nom: prenom.nom});
  }

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

unusual behavior when using the CSS property transform: rotate

i'm attempting to enable this element to be both draggable and rotatable. However, when I apply transform:rotate(0deg);, I am able to drag it anywhere within the parent container. But when I set it to 90deg, there are certain areas that become undrag ...

Reply after performing several asynchronous queries using mongoose and express

When trying to create a list of products to send to a client, I am encountering an issue where res.send executes before the loop has completed. I have tried using async/await but it doesn't seem to work. Any suggestions on how to resolve this? Below ...

Utilize key-value pairs to reference variables when importing as a namespace

Is it feasible to utilize a string for performing a lookup on an imported namespace, or am I approaching this the wrong way? Consider a file named my_file.ts with contents similar to: export const MyThing: CustomType = { propertyOne: "name", ...

I must break free! Angular's $sce is failing to manage links to audio files (Strict Contextual Escaping)

I have successfully implemented Angular and $sce in my project to handle HTML special characters and link video files in the database to a video player. However, I am facing issues connecting the HTML audio player to audio files stored in the same database ...

Display Default Start Time with React-Time-Range

I recently built a form using the React-Time-Range component to manage banquet room reservations. Oddly enough, I've encountered an issue where the start time always defaults to the moment() value defined in the state. Could someone please review my ...

Should one consider using Eval?

I encountered a scenario where I needed to dynamically retrieve the object value from an array that contained object keys retrieved from an API. I opted for a solution that involved using the eval function. class App extends React.Component { constru ...

At what point in three.js does the error message "Argument 2 of WebGLRenderingContext.uniform4fv could not be [...]" typically arise?

As I work on expanding a JS game utilizing Three.js as an API, a recent issue has arisen in the form of the following error: TypeError: Argument 2 of WebGLRenderingContext.uniform4fv could not be converted to any of: Float32Array, UnrestrictedFloatSequenc ...

Why React Native's array.map function fails to calculate the sum of a state

I am currently developing a COVID-19 data app for a school project, and I am struggling to sum the total number of tests and positive results from an API. Below is the snippet of code that I am using: function GetDataApi() { if(data !== null) { const ...

Obtaining a string value through a promise retrieval

Within the following code snippet, I am executing an HTTP request where I extract a "token" (a string) from the response. My objective is to assign this token value to the variable foo. foo = request.post( { url: 'http://10.211.55 ...

Creating image filters using an object in jQuery

I am faced with a challenge where I have multiple image tags nested within a div that has the class google-image-layout. Each image is equipped with various data attributes, including: data-anger="0" data-disgust="0" data-facedetected="0" data-fear="0" da ...

Utilizing database information for interactive objects in Three.js: A step-by-step guide

I need to display specific text data for each object based on database entries in my project. However, despite creating a cube for each entry in the database, I'm encountering issues with undefined data. It seems like my code should work, but it' ...

Converting a string into an object using JavaScript

How can I transform the following string into an object? {src:'img/testimage.jpg', coord : {x:17, y:39}, width:200, height, 200} Update: I have a PHP file that generates JSON output. I used AJAX to retrieve the JSON in my JavaScript. By using ...

Display PDF file retrieved from the server using javascript

I am currently working on a web application using JavaScript, jQuery, and Node.js. I need to receive a PDF file from the server and display it in a new browser window. While I believe I have successfully received the file on the client side (the window sh ...

Can JavaScript be used to mimic selecting a location from the autocomplete dropdown in Google Maps API 3?

Currently, I am attempting to automate the process of selecting items from the autocomplete dropdown in the Google Maps API v3 places library using jQuery. However, I am facing difficulty in identifying the necessary javascript code to select an item from ...

Utilizing State Value beyond the Scope of a Function in React JS

I have 2 files, Header and App. App is my parent file and header is the child. I have designed a button in the header to open and close the sidebar, but I am unable to do that. My question is how to pass the state value from the header to the App file. Her ...

Which is Better for Mobile Web Apps: Multiple Pages or AJAX?

I am currently planning a new project focused on mobile web apps. The project will involve creating a mobile web app with multiple screens, a search system, and various other features. One decision I need to make is choosing the primary framework for this ...

Material UI Input Field, Present Cursor Location

Is there a way to retrieve the current cursor (caret) position in a MaterialUI text field? https://material-ui.com/components/text-fields/ I am looking to make changes to the string content at a specific index, such as inserting a character X between cha ...

Locate a specific class inside a div and switch the CSS style to hide one element and reveal another

I have two divs, each containing a span. By default, the display of each span class is set to none. My goal is to toggle the display property of the span within the clicked div. If the span is already visible, I want to hide it; if it's hidden, I want ...

Utilizing jQuery to format HTML code and set it as the text in a Textarea

I am currently working on populating the text for my Textarea using JavaScript (jQuery), as I need to include a variable from JS in it. This is what I have been doing: $("#txt_banner1").text( '<a href="'+producturl+'">< ...

How to center align your application in the desktop using Ionic framework

Query: How can I ensure that my ionic mobile application renders in the center of the screen when viewed on a desktop browser? Attempt 1: I experimented with using a wrapper div with a fixed width, such as max-width:732px; and margin: 0 auto;, however Ion ...