Using Angular, how to send data from a textbox to a Javascript array

What is the easiest way to input text into a textbox, click a button using ng-click, and then send that text from the textbox to an array? I've indicated where code needs to go with question marks, but I'm unsure of what exactly to write. Here's the code snippet I have:

This is how my HTML appears:

<input class="textBox" style="width: 320px; color:black; margin-bottom:20px" type="text"/>

<input class="button" style="width:100px" ng-click="addWorkflow(?, ?); toggleShow('addWorkflow')" type="submit" value="Add">

Below is the JavaScript array where I want the entered text to be stored in the "Name" and "Description" properties.

 $scope.addWorkflow = function(?, ?) {
  var workflow = {
       Id: 0,
       Name: ?,
       Description: ?,
       Lens: "",
       Focus: "",
       Aperture: ""
   } 

   $scope.workflows.push(workflow);

 };
javascriptarraystexttextbox

Answer №1

Here is a solution you can try:

$scope.addWorkflow = function(newWorkflow) {
var workflow = {
   Id: 0,
   Name:"This is where I want the text from the text box to appear.",
   Description: "",
   Lens: "",
   Focus: "",
   Aperture: ""
} 
var textBox=document.getElementsByClassName("textBox")[0];
workflow.Name=textBox.value;

$scope.workflows.push(workflow);

};

To improve this, consider giving your input an id="textBox" rather than using a class attribute:

<input class="textBox" id="textBox" style="width: 320px; color:black; margin-bottom:20px" type="text"/>

Then, use the following line of code:

var textBox=document.getElementById("textBox");
workflow.Name=textBox.value;

EDITOR'S NOTE:

For capturing input values, utilize individual ids for each input element:

<input class="textBox" id="name" style="width: 320px; color:black; margin-bottom:20px" type="text"/>
<input class="textBox" id="description" style="width: 320px; color:black; margin-bottom:20px" type="text"/>
<input class="button" style="width:100px" ng-click="addWorkflow(); toggleShow('addWorkflow')" type="submit" value="Add">

Adjust your function accordingly:

$scope.addWorkflow = function(newWorkflow) {
var workflow = {
   Id: 0,
   Name:"This is where I want the text from the text box to appear.",
   Description: "",
   Lens: "",
   Focus: "",
   Aperture: ""
} 
var nameText=document.getElementById("name");
workflow.Name=nameText.value;
var descText=document.getElementById("description");
workflow.Description=descText.value;

$scope.workflows.push(workflow);

};

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

What is the best way to link an anchor tag to a specific tab's content section

*Attempting to understand how to implement an anchor tag that will open a specific tab* *JavaScript code for navigation tabs* function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent" ...

javascripthtmlcss

Using useEffect for React login validation

I'm currently working on implementing a login feature in my React application using hooks. My approach involves using the useEffect hook to make an API call for credentials, and then updating the state in context. However, I've encountered an iss ...

javascriptreactjsreact-hooksuse-effect

Guide to showcasing JSON data in a .NET web service with nested arrays?

Here is the code snippet I am currently using: public class WS_Login : System.Web.Services.WebService { [WebMethod] [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] public void Login(string userName, string password) ...

c#asp.netarraysjsonweb-services

Issue with Material UI React JS Select component: Unable to deselect multiple values when more than one item is selected

Implementing a multiselect dropdown in material ui with specific conditions: The dropdown will contain [0 Apples, 1 Oranges, 2 Grapes]. By default, 0 Apples should be selected. None of the options can be unselected. If 0 Apples is selected and the user se ...

javascriptreactjsarraysmaterial-uidropdown

Develop a fresh behavior on-the-fly

Here is the HTML code snippet: <div class="bold knowmore login" id="j-6"> <span>...</span> </div> and this jQuery script: $(function(){ $(".login").on("click", function(){ console.log('login clicked!'); $(" ...

javascriptjquery

Transforming an R object into a suitable format for the tree layout in d3.js

Following up from a previous question regarding converting ctree output to JSON format for D3 tree layout, I have the following code generated by the use of ctree (from Party package) and I aim to create a recursive function to transform the JSON output. ...

javascriptjsonr

The jQuery Multiselect filter contradicts the functionality of single select feature

http://jsfiddle.net/rH2K6/ <-- The Single Select feature is functioning correctly in this example. $("select").multiselect({ multiple: false, click: function(event, ui){ } http://jsfiddle.net/d3CLM/ <-- The Single Select breaks down in this sc ...

javascriptjqueryjquery-ui-multiselect

Responsive mode causing navbar to break

After creating my web portfolio, I encountered an issue when viewing it on my phone. The navbar collapses but is not properly aligned and there is extra space on the right side of the viewport in the hero section that I can't seem to fix. Portfolio L ...

javascripthtmlcssbootstrap-4

Issue with Ionic 2's infinite scroll not triggering method on second scroll attempt

I utilized the ion-tab element to showcase a page (inboxitem) which encompasses ion-list and makes use of ion-infinite-scroll. The following code snippet resides in inboxitem.html <ion-content class="inbox can-swipe-list"> <ion-list> ...

javascriptangulartypescriptionic2

Determine whether a value within one array is present within an object contained in another array

I am attempting to determine if a value from array1 exists within an object in array2. array1: [2,5,1] array2: [ { value: 1, name: 'Monday', isSelected: false }, { value: 2, name: 'Tuesday', isSelected: false }, { value: 3 ...

javascriptarraysreactjs

How to separate a Java string array using a specific parameter

Imagine having a string array like this: {abc,abc,abc,def,def,ghi} How can we create another String array with each unique value occurring only once? e.g. {abc,def,ghi} I've thought about sorting the array and looping through it to remove duplicat ...

javaandroidarraysstring

What happens to CSS specificity when JavaScript is used to change CSS styles?

When JavaScript modifies CSS, what is the specificity of the applied styles? For example: document.getElementById("demo").style.color = "red"; Would this be deemed as inline styling? ...

javascriptcsscss-specificity

Calculating the percentage of two values with jQuery: The Sequel

This is a follow-up from the previous successful discussion on jquery: percentage of two numbers Firstly, I want to express my gratitude for the prompt support provided in the previous post. Now, I am looking to enhance my script further. My goal is to ca ...

javascriptjqueryhtml

Using JSON to pass a dynamic array to Morris Chart

My task involves creating a graph using Morris Charts with a dynamic rectangular array. The array consists of a variable number of columns and looks like this: https://i.sstatic.net/89stw.png To achieve this, I attempted to pass the data to Morris Charts ...

javascriptjqueryarraysjsonmorris.js

Tips for retrieving JSON data in the correct order using AngularJS

I'm a newcomer to using AngularJS and I have an ambition to create an eCommerce website that showcases recipes. I want to fetch all the JSON data related to recipes and display detailed information in grid boxes, similar to what's shown in this e ...

javascriptangularjsjsonajax

The JavaScript array on its second usage had a length of '0', yet it still contained objects within it

About the Task: This task involves working with two arrays: arrNumber, which is a number array, and arrString, which is a string array. The goal is to create a list of objects using the values from arrNumber, where the object keys are numbers or characte ...

javascriptarrays

"Exploring the New Features of Bootstrap 5: Button Collapse and

I am struggling to get two buttons working with Bootstrap 5. The first button is supposed to trigger two JavaScript functions to open a bootstrap carousel. The second button is a simple collapse button designed to reveal a long text string. Unfortunately, ...

javascripthtmlbootstrap-5

What are the steps to resolve the error "TypeError: req.next is not a function"?

I've been working on a project and keep encountering this persistent error that I can't seem to fix. I understand the issue, but unfortunately, I'm at a loss as to how to resolve it. Here is the error message: events.js:292 throw er; ...

javascriptnode.jsexpressmongoose

Steps for adding an image to Firebase

I recently started a project using React and Firebase. After going through some tutorials, I managed to add and read text from Firebase successfully. Now I am working on displaying data like name, estate, and description in a modal on my React Firebase. M ...

javascriptreactjsfirebase

Having trouble bypassing custom points on the reactive gauge speedometer

My current project involves utilizing the npm package react-d3-speedometer to create a custom points-based gauge. The issue I am facing is that while the package works properly with values from 0 to 1000 when passed to the customSegmentValues property, it ...

javascriptreactjsgauge