CODEWITHSUNDEEP
javascript
Kamran Teymurov
Kamran Teymurov

Reputation: 25

How can I get value of input array

**I want to get value of input ** 

 <input class="text-left" readonly id = "editable_text" name = "editable_text[<?php echo $order['id']; ?>]" style="vertical-align: middle" value="<?PHP echo $order['issued_to']; ?>">
 <input  type="checkbox" class="checkbox" name="orders[]" id ="orders"  value="<?php echo $order['id']; ?>" onclick="uncheckMain_arayish()">

    var x = document.getElementsByName("orders[]");
    var text = document.getElementsByName("editable_text[]");
     for (var i = 0; i < x.length; i++) {
                    if (x[i].checked) {
                        var order = x[i].value;
                        text[order].readOnly = false;
                    }
                    else{
                        text[i].readOnly = true;
                    }
                }

"text" is not working properly.

Upvotes: 1

Views: 80

Answers (3)

palaѕн
palaѕн

Reputation: 73926

The issue here is you are trying to get all text elements like:

var text = document.getElementsByName("editable_text[]");

But the name of the attribute is not exactly like editable_text[] but more like editable_text[12] or editable_text[67] and so on. So, you can get all these text elements like:

var text = document.querySelectorAll("input[name^='editable_text']");

Demo:

var text = document.querySelectorAll("input[name^='editable_text']");
text.forEach(function(el) {
  console.log(el.name, el.value) // use this for debugging purpose
})
<input class="text-left" readonly name="editable_text[10]" value="1">
<input class="text-left" readonly name="editable_text[12]" value="2">
<input class="text-left" readonly name="editable_text[14]" value="3">
<input class="text-left" readonly name="editable_text[16]" value="4">

Also, using text[order].readOnly = false; will not work, as text is a DOM element we cannot simply call it like that. You can instead use:

document.querySelector("[name='editable_text[" + order + "]']").readOnly = false;

Demo:

var text = document.querySelectorAll("input[name^='editable_text']");
var order = 12;

text.forEach(function(el) {
  // Disable only the name="editable_text[12]" input like
  document.querySelector("[name='editable_text[" + order + "]']").disabled = true;
})
<input class="text-left" readonly name="editable_text[10]" value="1">
<input class="text-left" readonly name="editable_text[12]" value="2">
<input class="text-left" readonly name="editable_text[14]" value="3">
<input class="text-left" readonly name="editable_text[16]" value="4">

Upvotes: 0

Radu Diță
Radu Diță

Reputation: 14191

You are getting an array from var text = document.getElementsByName("editable_text[]"); and then you try to access an object based on order.id

This will only work in a very specific case.

You should generate unique id's for text based on order ids

<input class="text-left" readonly id = "editable_text[<?php echo $order['id']; ?>]" name = "editable_text[<?php echo $order['id']; ?>]" style="vertical-align: middle" value="<?PHP echo $order['issued_to']; ?>">

And then you can use document.getElementById inside your for to get the associated text element.

Upvotes: 0

WolverinDEV
WolverinDEV

Reputation: 1524

document.getElementById("editable_text").value

https://www.w3schools.com/jsref/prop_text_value.asp

Upvotes: 1

Related Questions