Question 10947 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to log array value without hard coding position in the array? – Jquery

I have a loop that gets input from three different input boxes. The loop works fine for logging the inputs but I am trying to log the values from the input without specifying and hard coding the exact location.

var getInput = $("input");
for (var i = 0; i < getInput.length; i++)
  console.log(getInput[i].id, " => Input", i, " = ", getInput[i].value);

I can use console.log(index[1]), console.log(index[2]), console.log(index[3]), etc etc but the problem is I have a table that can have additional rows. So their might be one, two, three rows, etc so as you can imagine hard coding every single index does not make sense. What I am trying to figure out is how to log the value of the input without specifying the index position but instead use the attribute or id of the variable. So if I have

<input
  type="text"
  id="DEPLOYER_PROJECT"
  name="Project Name"
  class="vcheck"
  placeholder=""
> 
<input
  type="text"
  id="OBJ_TYPE"
  name="OBJ_TYPE"
  class="vcheck"
  placeholder=""
>

than I am trying to log all instances of OBJ_TYPE or console.log(getInput[OBJ_TYPE]));

The reason for this is I have to insert the data into a database (I know about sql injection this is temp)

DB(INSERT INTO TABLE(DEPLOYER_PROJECT, OBJ_TYPE) VALUES (‘" + getInput[1] + "’, ‘" + getInput[2] + "’))

As you can imagine hardcoding the array works fine with only one instance of each instance but if the tables has additional rows I can’t just hard code getInput[3], getInput[4], getInput[5], getInput[6], etc. The goal is where ever there an input with the id OBJ_TYPE it would take the input associate with it and insert it into the Database with the correct position already assume.

Tags:

2

Answers


  1. 0

    You can use the className of the input to loop through it using forEach loop

    var getInput = document.querySelectorAll(".vcheck");
    
    getInput.forEach(element => {
        console.log(element.value)
    });
    Login or Signup to reply.
  2. 0

    Based on the SQL use-case, what you want is a structure representing keys (column names) and values.

    You can use Object.fromEntries() to create this

    const columnValues = Object.fromEntries(
  Array.from(document.querySelectorAll("input.vcheck"), ({ id, value }) => [
    id,
    value,
  ])
);

    This will look something like this

    {
  DEPLOYER_PROJECT: "some value",
  OBJ_TYPE: "some other value",
}

    You can then send this to your backend to construct your SQL query…

    // assuming something like req.body.columnValues

// Valid column names
const COLUMN_NAMES = new Set(["DEPLOYER_PROJECT", "OBJ_TYPE"]);

// array of columns to use in your query
const cols = Object.keys(req.body.columnValues).filter((col) =>
  COLUMN_NAMES.has(col)
);

// array of values to bind in your query
const values = cols.map((col) => req.body.columnValues[col]);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search