0

Please i need help..

@foreach
 <input  id="mar1bags" class="form-control" name="mar1bags" value="">
@endforeach

I am using foreach loop to get some data and also this input field is also inside for me to input data.

But the problem now is i am unable to use GetelementbyID to get the values in javascript. it returns only for the first input field, but the others don't get.

I get this error in my console when i try to submit to javascript function

[DOM] Found 3 elements with non-unique id #mar1bags:

Improve this question

3 Answers 3

Reset to default
1

It seems that this loop create more then one input but keep setting them the same id. Since ID suppose to be unique it is not valid (and also the getElementById method would fail).

You can use the .querySelectorAll method instead, and the syntax is:

document.querySelectorAll('[property=value]');

EDIT to your case: 

<script>
var hht; // declare the var GLOBAL
console.log(hht + ' before function');
function checkVal() { // make a function that will check the value
  let inputData = document.querySelectorAll('[name=mar1bags]');
  // now you can iterate inputData using a loop.
  // Using for loop will be something like this:
  for (var i=0; i < inputData.length; i++) {
    var checkEmpty = inputData[i].value.length; // get each value length
    if (checkEmpty > 0) { // if it holds more then one chareter then
      hht = inputData[i].value; // assign this to the GLOBAL
    }
  }
}
console.log(hht + ' after function');
</script>

Enjoy code!

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

thanks..let me try and get back pls...dont go anywhere my friend...can u iterate for me let me see pls
please help with the iteration let me see how u will do it pls
No problem, give me a sec
inputData[i].value. this is what i see in the console...pls help
yeah... remove the quotes (:
|
0

as mentionned above, your id is duplicated that's why it won't work. instead, i would do:

@foreach <input id="mar1bags-{{ $loop->iteration }}" class="form-control" name="mar1bags-{{ $loop->iteration }}" value=""> @endforeach

<script>
let inputs = document.querySelectorAll('[id^=mar1bags-]');
for (var i=0; i < inputs.length; i++) {
  console.log(inputs[i].value);
}
</script>
Improve this answer

1 Comment

This use different selector but eventually prints the same data on the demo i posted in the chat. Apparently this is not what the OP seeks. You should stay in the chat (:
0

Hey if you are using jquery or javascript to interact with this values you need to add a unique input name and ID: check answer from @erwan

or if you are using a normal form. than maybe just change the input name to accept an array of values , so you can get all the inputs in form of an array on the backend when you submit the form.

@foreach
 <input  id="mar1bags" class="form-control" name="mar1bags[]" value="">
@endforeach
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.