Category: javascript

I’m building a react app with parcel. I have an eslint config set up that I like, and use VSCode tools to catch eslint errors and fix them as I code. The app builds correctly as of now. So all that is fine.

However, as an added precaution, I would like to set up parcel to run eslint, using my config, and to halt the build process and output an error when I havent followed the eslint rules, either when running dev server or building for production.

I’m aware of this npm package from googling, but the package doesnt have a readme, and i can’t find setup instructions in the parcel docs: https://www.npmjs.com/package/@parcel/validator-eslint

For reference I am using parcel 1.12.3 but would be open to changing to parcel 2.x.x if that is neccesary.

Thanks!

I have an array of html. I am trying to run remainderHtml.toString() but result is

[object HTMLLabelElement],[object HTMLLabelElement],[object HTMLLabelElement]

How can I run a toString command (or any other command) and create an html string Exactly like my array? I do not want to remove the tags, or extract any data, just plain want to make this array of html one long connected string…

Here is my array of html from the console.log

(4) [label.p-1.font-weight-bold.bg-primary.ml-2.text-white.rounded-capsule.shadow-none.fs--3, label.p-1.font-weight-bold.bg-primary.ml-2.text-white.rounded-capsule.shadow-none.fs--3, label.p-1.font-weight-bold.bg-primary.ml-2.text-white.rounded-capsule.shadow-none.fs--3, label.p-1.font-weight-bold.bg-primary.ml-2.text-white.rounded-capsule.shadow-none.fs--3]

When I put the above into a variable called remainderHtml and try to run a toString() on it, I get [object HTMLLabelElement],[object HTMLLabelElement],[object HTMLLabelElement]

When I click on the arrow in the console to show the html array I get this below

0: label.p-1.font-weight-bold.bg-primary.ml-2.text-white.rounded-capsule.shadow-none.fs--3
1: label.p-1.font-weight-bold.bg-primary.ml-2.text-white.rounded-capsule.shadow-none.fs--3
2: label.p-1.font-weight-bold.bg-primary.ml-2.text-white.rounded-capsule.shadow-none.fs--3
3: label.p-1.font-weight-bold.bg-primary.ml-2.text-white.rounded-capsule.shadow-none.fs--3
length: 4

hi I’m trying to create a JavaScript object based on a template I received as a test. I use Ajax to get the data from my database but i cant seem to create the object.

 $(document).ready(function() {
          
          $.ajax({
              type: 'POST',
              url: 'fetch.php',
              datatype:'JSON',
              success: function(response) {
               
                var test=JSON.parse(response);
                var products = {};                 
                for (var x = 0; x < test.length; x++) {
                  products[x] = {productName: test[x]['name']};
                  products[x] = {category: test[x]['category']};
                  products[x] = {price: test[x]['price']};
                 
                }

                


              }
          });
     
  }); 

I’m trying to create something like this object below

products = {data: [

{
  productName: "test_item_1",
  category: "category1",
  price: "49",
  image: "test_image.jpg",
},
{
  productName: "test_item_2",
  category: "category3",
  price: "99",
  image: "test_image.jpg",
},
{
  productName: "test_item_3",
  category: "category3",
  price: "29",
  image: "test_image.jpg",
},],}; 

I’m new to JSX, I’m building a Nextjs app, and I’m having this irritating error:
“failed to process internal error: entered unreachable code: assign property in object literal is invalid”

This is my index.js

import CardsContainer from "../components/layout/CardsContainer";
import SideNav from "../components/layout/side-nav/SideNav";
import TopNav from "../Components/layout/top-nav/TopNav";


const cards = [
  {id = 1, city = "Riyadh", gender = "Male", image = "1"},
  {id = 2, city = "Riyadh", gender = "Male", image = "1"},
  {id = 3, city = "Riyadh", gender = "Male", image = "1"},
  {id = 4, city = "Riyadh", gender = "Male", image = "1"},
  {id = 5, city = "Riyadh", gender = "Male", image = "1"},
  {id = 6, city = "Riyadh", gender = "Male", image = "1"}
];

export default function Home() {
  
  return (
    <Fragment>
      <TopNav />
      <SideNav/>
      <CardsContainer cards={cards}/>
    </Fragment>
  );
}

This is my CardsContainer.js

export default function CardsContainer(props) {
  //const cards = props.cards;
  const cards = props.cards;

  return (
    <div class="w-9/12 bg-gray-400">
      {cards.map((card) => {
        return (<CatCard cat={card} />);
      })}
    </div>
  );
}

And this is my CarCard.js

import Image from "next/image";
import Link from "next/link";

export default function CatCard(props) {
  
  const id = props.cat.id;
  const city = props.cat.city;
  const gender = props.cat.gender;
  const image = props.cat.image;

  return (
    <Link href={`/catdetails/${id}`}>
      <a>
        <div
          class=" p-2 pb-5 bg-white w-80 rounded-xl border-2"
          id="card-with-image"
        >
          <div class="rounded-xl w-full h-52 overflow-hidden">
            <Image
              className="min-h-full object-cover object-left"
              src={`/images/cats/${image}.jpg`}
              alt="Tumbnail Image"
              width="300"
              height="200"
            />
          </div>
          <div class="px-2 my-4">
            <h2 class="my-3 font-medium text-lg">City:</h2>
            <p class="my-3 text-base text-[#425466]">
              {city}
            </p>
          </div>
          <div class="px-2 my-4">
            <h2 class="my-3 font-medium text-lg">Gender:</h2>
            <p class="my-3 text-base text-[#425466]">
              {gender}
            </p>
          </div>
        </div>
      </a>
    </Link>
  );
}

What do you guys think? I have fiddled with all brackets and curly brackets (and semi-colons), nothing resolved.

I’m asking for help as I’m new to react and javascript. There are similar solutions to my problem but I still can’t get it working.
I’m trying to create a redux store with an option to be able to update quantity in the shopping cart.

This is my store

const cartSlice = createSlice({
  name: "cart",
  initialState: {
    products: [],
    quantity: 0,
  },
  reducers: {
    addProduct: (state, { payload }) => {
      const product = state.products.find(
        (product) => product.id === payload.id
      );
       if (product) {
        state = state.products.map((product) =>
          product.id === payload.id
            ? {
                ...product,
                quantity: (product.quantity += payload.quantity),
              }
            : product
        );
      } else {
        state.products.push(payload);
        state.quantity += 1;
      }
    },
    incQuantity: (state, { payload }) => {
      const product = state.products.find((product) => product.id === payload);
      product.quantity++;
    },
    decQuantity: (state, { payload }) => {
      const product = state.products.find((product) => product.id === payload);
      if (product.quantity === 1) {
        const index = state.products.findIndex(
          (product) => product.id === payload
        );
        state.products.splice(index, 1);
      } else {
        product.quantity--;
      }
    },
    removeProduct: (state, { payload }) => {
      const index = state.products.findIndex(
        (product) => product.id === payload
      );
      state.products.splice(index, 1);
    },
  },
});

export const { addProduct, incQuantity, decQuantity, removeProduct } =
  cartSlice.actions;

export default cartSlice.reducer;

This is how I update quantity on the product page where you can add a product to the cart

const handleQuantity = (type) => {
  if (type === "dec") {
    quantity > 1 && setQuantity(quantity - 1);
  } else {
    setQuantity(quantity + 1);
  }
};

<Remove onClick={() => handleQuantity("dec")} />
<span className="product-detail-amount">{quantity}</span>
<Add onClick={() => handleQuantity("inc")} />

<button className="product-detail-button"
onClick={() => dispatch(addProduct({ ...product, quantity }))}>
Add to Cart </button>

What it does now it keeps adding quantity to the same product without displaying a new one, same issues with updating the quantity (it changes the quantity only for the first product and when it’s gone it starts updating another one)

Your help is much appreciated!

I have a server and a client set up using the net module for Node.js.

Here is my server’s code:

const server = net.createServer(function(socket) {
    socket.on("data", function(data) {
        // Do stuff with the connection
        socket.end();
    });
});
server.listen(this.port);

Here is my client’s code:

const client = new net.Socket();
client.connect(this.port, this.host, function() {
    client.write("Test Message");
});

When run on the same machine, both of these work fine, but when I try to connect from a different computer, the client hangs at client.connect() forever (until I terminate the process). When I tried to use the telnet command in command prompt, I don’t get a response from the server, but the client doesn’t just say connection refused. What’s going on here?

this is a new question, based off this question which was nicely resolved.

Changing menu options is NOT changing the active class even though I followed the solution in the link below

Here’s the link to the temp site which I’m creating for the client: http://wtr2022.webparity.net/index.html

That all being said, however, when you scroll to or click on PROJECT, you’ll be scrolled to the completed projects section. This is good.

However, when you click or SCROLL to Blog, Roofing or Contact, the targeting is off.

Blog is not active but Roofing is and so on for Roofing and Contact.

Here’s the NAV code which points DIRECTLY to the ID’s of the sections…

            <nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light sticky-top" id="ftco-navbar">
                <div class="container">

                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="fa fa-bars"></span> Menu
                    </button>
                    <div class="collapse navbar-collapse" id="ftco-nav">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li>
                            <li class="nav-item"><a href="#aboutus" class="nav-link">About</a></li>
                            <li class="nav-item"><a href="#serviceslink" class="nav-link">Services</a></li>
                            <li class="nav-item"><a href="#projectslink" class="nav-link">Project</a></li>
                            <li class="nav-item"><a href="#bloglink" class="nav-link">Blog</a></li>
                            <li class="nav-item"><a href="#roofinglink" class="nav-link">Roofing</a></li>
                            <li class="nav-item"><a href="#contactlink" class="nav-link">Contact</a></li>
                        </ul>
                        <div class="d-flex align-items-center justify-content-center">
                            <img src="images/logos/weathertight-logo.png" class="logosmaller" alt=""/>
                            <!-- <span class="flaticon-roof-2"></span> -->
                        </div>
                        <div class="col-3 d-flex justify-content-end align-items-center">
                            <div class="social-media">
                                <p class="mb-0 d-flex">
                                    <a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-facebook"><i class="sr-only">Facebook</i></span></a>
                                    <a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-twitter"><i class="sr-only">Twitter</i></span></a>
                                    <a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-instagram"><i class="sr-only">Instagram</i></span></a>
                                    <a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-dribbble"><i class="sr-only">Dribbble</i></span></a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>

Here’s the code for the section: Blog

        <section id="bloglink" class="ftco-section">
            <div class="container">
                <div class="row justify-content-center pb-5 mb-3">
                    <div class="col-md-7 heading-section text-center ftco-animate">
                        <span class="subheading">News &amp; Blog</span>
                        <h2>Latest news from our blog</h2>
                    </div>
                </div>
...

And the code for the section Roofing

        <section id="roofinglink" class="ftco-section bg-light">
            <div class="container">
                <div class="row justify-content-center pb-5 mb-3">
                    <div class="col-md-12 heading-section text-center ftco-animate">
                        <span class="subheading">Roofing</span>
                        <h2>Roofing that Pays for Itself</h2>
                        <div class="sec-title text-center wow animated fadeInDown">
                            <h2>Commercial Roofing that Pays for Itself!</h2>
                            <p>The heating and AC loss you have been experiencing in your commercial building can be significantly reduced with one of our energy saving roofing systems! WeatherTight Systems’ completely air-tight roofing systems seal in your building’s cool air and heat. For most of our flat top roofing materials we also apply a seamless, high-solids silicone and acrylic based material as a way of ensuring there will be no water leaks into your commercial building. The result is a roof that is truly protected from the scorching sun and other destructive weather elements.</p>
                        </div>
                    </div>
                </div>
...

And finally the code for the Contact Section

        <section id="contactlink" class="ftco-section bg-light">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <div class="wrapper">
                            <div class="row no-gutters">
...

So, I don’t understand when you scroll past or into or click to Blog, Roofing and Contact, the Active feature is off kilter. @kmoser helped with my previous question and I didn’t want to turn it into a discussion so I made a new question. Thank you everyone.

I am using react “^17.0.2” and @tensorflow/tfjs “^3.14.0”

I am trying to build a predictive algorithm to predict the class of iris, depending on the data inserted into the system through input fields
I have made a training and testing JSON file on my react app.

the code is like the following

    import react, { Component } from "react";
import * as tf from "@tensorflow/tfjs";
import trainingSet from "../training.json";
import testSet from "../testing.json";

import './form.css';

const Form = () => {



    let trainingData, testingData, outputData, model;
    let training = true;
    let predictButton = document.getElementsByClassName("predict")[0];

    const init = async () => {
        splitData();
        createModel();
        await trainData();
        if (!training) {
            predictButton.disabled = false;
            predictButton.onclick = () => {
                const inputData = getInputData();
                predict(inputData);
            };
        }
    };

    const splitData = () => {
        trainingData = tf.tensor2d(
            trainingSet.map(item => [
                item.sepal_length,
                item.sepal_width,
                item.petal_length,
                item.petal_width
            ]),
            [130, 4]
        );

        testingData = tf.tensor2d(
            testSet.map(item => [
                item.sepal_length,
                item.sepal_width,
                item.petal_length,
                item.petal_width
            ]),
            [14, 4]
        );

        outputData = tf.tensor2d(
            trainingSet.map(item => [
                item.species === "setosa" ? 1 : 0,
                item.species === "virginica" ? 1 : 0,
                item.species === "versicolor" ? 1 : 0
            ]),
            [130, 3]
        );
    };

    const createModel = () => {
        model = tf.sequential();

        model.add(
            tf.layers.dense({
                inputShape: 4,
                units: 10,
                activation: "sigmoid"
            })
        );

        model.add(
            tf.layers.dense({
                inputShape: 10,
                units: 3,
                activation: "softmax"
            })
        );

        model.compile({
            loss: "categoricalCrossentropy",
            optimizer: tf.train.adam()
        });
    };

    const trainData = async () => {
        let numSteps = 15;
        let trainingStepsDiv = document.getElementsByClassName("training-steps")[0];
        for (let i = 0; i < numSteps; i++) {
            let res = await model.fit(trainingData, outputData, { epochs: 40 });
            trainingStepsDiv.innerHTML = `Training step: ${i}/${numSteps - 1}, loss: ${res.history.loss[0]
                }`;
            if (i === numSteps - 1) {
                training = false;
            }
        }
    };

    const predict = async inputData => {
        for (let [key, value] of Object.entries(inputData)) {
            inputData[key] = parseFloat(value);
        }
        inputData = [inputData];

        let newDataTensor = tf.tensor2d(
            inputData.map(item => [
                item.sepal_length,
                item.sepal_width,
                item.petal_length,
                item.petal_width
            ]),
            [1, 4]
        );

        let prediction = model.predict(newDataTensor);

        displayPrediction(prediction);
    };

    const getInputData = () => {
        let sepalLength = document.getElementsByName("sepal-length")[0].value;
        let sepalWidth = document.getElementsByName("sepal-width")[0].value;
        let petalLength = document.getElementsByName("petal-length")[0].value;
        let petalWidth = document.getElementsByName("petal-width")[0].value;

        return {
            sepal_length: sepalLength,
            sepal_width: sepalWidth,
            petal_length: petalLength,
            petal_width: petalWidth
        };
    };

    const displayPrediction = prediction => {
        let predictionDiv = document.getElementsByClassName("prediction")[0];
        let predictionSection = document.getElementsByClassName(
            "prediction-block"
        )[0];

        let maxProbability = Math.max(...prediction.dataSync());
        let predictionIndex = prediction.dataSync().indexOf(maxProbability);
        let irisPrediction;

        switch (predictionIndex) {
            case 0:
                irisPrediction = "Setosa";
                break;
            case 1:
                irisPrediction = "Virginica";
                break;
            case 2:
                irisPrediction = "Versicolor";
                break;
            default:
                irisPrediction = "";
                break;
        }
        predictionDiv.innerHTML = irisPrediction;
        predictionSection.style.display = "block";
    };

    init();



    return (

        <div>


            <h1>Define, train and run a machine learning model in JavaScript with Tensorflow.js</h1>

            <section className="data-inputs">
                <h3>Iris classification</h3>
                <p>Training in progress...</p>
                <p className="training-steps"></p>
                <div className="input-block">
                    <label htmlFor="sepal-length">Sepal lenth:</label>
                    <input name="sepal-length" type="number" min="0" max="100" placeholder="1.5" />
                </div>

                <div className="input-block">
                    <label htmlFor="sepal-width">Sepal width:</label>
                    <input name="sepal-width" type="number" min="0" max="100" placeholder="0.4" />
                </div>

                <div className="input-block">
                    <label htmlFor="petal-length">Petal length:</label>
                    <input name="petal-length" type="number" min="0" max="100" placeholder="1.0" />
                </div>

                <div className="input-block">
                    <label htmlFor="petal-width">Petal width:</label>
                    <input name="petal-width" type="number" min="0" max="100" placeholder="0.7" />
                </div>

                <button className="predict" disabled>Predict</button>
            </section>

            <section className="prediction-block">
                <p>Iris predicted:</p>
                <p className="prediction"></p>
            </section>


        </div>


    )
}


export default Form;

in the browser I get the following errors, these are 4 of them:

ERROR in ./src/component/form.js 32:19-30

export 'tensor2d' (imported as 'tf') was not found in '@tensorflow/tfjs' (possible exports: version)

export 'sequential' (imported as 'tf') was not found in '@tensorflow/tfjs' (possible exports: version)


ERROR in ./src/component/form.js 39:14-29

export 'layers' (imported as 'tf') was not found in '@tensorflow/tfjs' (possible exports: version)


ERROR in ./src/component/form.js 44:14-29

export 'layers' (imported as 'tf') was not found in '@tensorflow/tfjs' (possible exports: version)


ERROR in ./src/component/form.js 51:17-30

export 'train' (imported as 'tf') was not found in '@tensorflow/tfjs' (possible exports: version)

I was trying to develop reusable text field component using Material UI and reach-hook-form. I was referring following examples:

• Example 1 ^ref:

    type FormProps<TFormValues> = {
      onSubmit: SubmitHandler<TFormValues>;
      children: (methods: UseFormReturn<TFormValues>) => React.ReactNode;
    };
  
    const Form = <TFormValues extends Record<string, any> = Record<string, any>>({
      onSubmit,
      children
    }: FormProps<TFormValues>) => {
      const methods = useForm<TFormValues>();
      return (
        <form onSubmit={methods.handleSubmit(onSubmit)}>{children(methods)}</form>
      );
    };
  

• Example 2 ^ref:

   //https://github.com/Mohammad-Faisal/react-hook-form-material-ui/blob/master/src/form-components/FormInputProps.ts
  
   export interface FormInputProps {
     name: string;
     control: any;
     label: string;
     setValue?: any;
   }
  
   //https://github.com/Mohammad-Faisal/react-hook-form-material-ui/blob/master/src/form-components/FormInputText.tsx
  
   import React from "react";
   import { Controller, useFormContext } from "react-hook-form";
   import TextField from "@material-ui/core/TextField";
   import { FormInputProps } from "./FormInputProps";
  
   export const FormInputText = ({ name, control, label }: FormInputProps) => {
     return (
       <Controller
         name={name}
         control={control}
         render={({
           field: { onChange, value },
           fieldState: { error },
           formState,
         }) => (
           <TextField
             helperText={error ? error.message : null}
             size="small"
             error={!!error}
             onChange={onChange}
             value={value}
             fullWidth
             label={label}
             variant="outlined"
           />
         )}
       />
     );
   };
  

After analyzing both, I came up with following:

 import { TextField } from "@mui/material";
 import { Controller, UseFormReturn } from "react-hook-form";

 interface IRhfTextBoxProps<TFormValues> {
   name: string;
   methods: UseFormReturn<TFormValues>;
 }

 // export const RhfTextBox = <TFormValues extends unknown>(props : IRhfTextBoxProps<TFormValues>) => {  //##1
 export const RhfTextBox = <TFormValues extends Record<string, any> = Record<string, any>>(  // ##2 similar to example 1
   props: IRhfTextBoxProps<TFormValues>
 ) => {
   return (
     <Controller
       control={props.methods.control}
       name={props.name}  // ##3
       render={({ field, fieldState, formState }) => (
         <TextField
           error={!!fieldState.error}
           helperText={fieldState.error?.message ?? ""}
           key={props.name}
         />
       )}
     />
   );
 };

Both lines ##1 and ##2 in above code gives following error at line ##3:

Type 'string' is not assignable to type 'Path<TFormValues>'.

The detailed error message is as follows:

The expected type comes from property 'name' which is declared here on type 'IntrinsicAttributes & { render: ({ field, fieldState, formState, }: { field: ControllerRenderProps<TFormValues, Path<TFormValues>>; fieldState: ControllerFieldState; formState: UseFormStateReturn<...>; }) => ReactElement<...>; } & UseControllerProps<...>'

Q1. Why am I getting this error?
Q2. Should I just use non generics FormInputProps as in example 2, instead of generics based FormProps in example 1.

I am trying to build a complete solution (both server code and client code) where i have one of the backend servers hosted in a public cloud exposed to the internet and another backend server behind a firewall with NO internet access to the outside world apart to a specific client that run in a browser which can authenticate and access both of these servers at the same time.

The main goal is to share a larger file (video for example) between the 2 servers, basically pull it from the public one and upload it to the one behind the firewall.

I have a few possible solutions but I am still looking for something better as it has been a challenge to find more specific resources on the topic.

1. Build a web client which prompts to download the file to the downloads folder, then have a another prompt (file input field) after its done for the client user to select it and upload it again to a different endpoint. – This is simple enough but the UX is kinda bad as it involves a person taking action to complete the process

2. Create socket connections between server 1 and client (channel 1) and server 2 and client (channel 2). On server 1 split the file into parts and send each part as a separate message in channel 1 which can be immediately piped to the channel 2. The receiving system will piece the file together and store it. – I feel i am adding complexity here and there might be a simpler way to do it. Chunked HTTP requests come to mind but have no idea how to go about it or if it’s doable.

3. Download the file as a blob from server 1 in the browser client then upload it to server 2. – Concern here is the file size considering the blob will be contained in memory as iOS and Android would need to be supported as clients.

Any advice on how to solve this better, or if i am missing something in those 3 options above is much appreciated!

Write function, which returns transformed array based on function, which is passed as a parameter.

 map([2, 5, 8], function(el) { return el + 3; }) // returns [5, 8,11]
 map([1, 2, 3, 4, 5], function (el) { return el * 2; }) // returns [2, 4, 6, 8, 10]

I want to create a basic online midi piano webpage. I know Python very well but not JavaScript yet. What is the best way to do this? Is Django or Flask relevant here? Essentially I just want a super basic midi piano on a webpage and am just looking for a point in the right direction, thanks.

Context: I have made a PyQT5 Desktop App but have now decided I want it as a webpage so I need to completely remake it. I’ve never done any web development. I need Midi and not audio files.

Can someone explain me what is payload in redux-toolkit?

Where does this value came from?

import { createSlice, PayloadAction } from ‘@reduxjs/toolkit’

export interface CounterState {
value: number
}

const initialState: CounterState = {
value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

I have some tabs, each containing their own form and their own submit button. I want to fire off all the forms and send requests for each form at the click of one button. That one button should essentially click each individual submit button for each form (in this case that button would be the button with class “submit_all”. The html:

div class="tab-content" id="tab_content_one"
 div id="#tab1" class="tab-pane fade in active"  
        = form_tag({ action: "route1" }, method: method) 
          .form-group  
            textarea.form-control  name="words" 
          input.btn.btn-primary type="submit" class="submit" 
 div id="tab2" class="tab-pane fade"  
         = form_tag({ action: "route1" }, method: method)  
          .form-group  
            textarea.form-control  name="words" 
          input.btn.btn-primary type="submit" class="submit" 
 div id="tab3" class="tab-pane fade"  
         = form_tag({ action: "route1" }, method: method) 
          .form-group  
            textarea.form-control  name="words" 
         input.btn.btn-primary type="submit" class="submit" 
input.btn.btn-primary type="submit"  class="submit_all" onclick="goBack()"

I tried using javascript to retrieve all the submit buttons for each of the forms and iterating through and clicking each submit button however that did not work. It ended up only firing off the final form.

function goBack() {
var submit2 = document.getElementsByClassName('submit')

console.log(submit2)
for (i=0; i<=(submit2.length); i++){
  submit2[i].click()
}

Am I doing something wrong? and how else can I go about this?

Is there a native built-in way to list running Workers in Javascript?
( aside from Web Inspector Threads panel or your own list of references )