Help with javascript script

Asked

Viewed 98 times

-1

I need a hand here !

<script>
  window.onload = function() {
    var oTextbox = document.getElementById('myTextBox');
    for (var i = 0; i < document.oTextbox.length; i++) {
        document.oTextbox[i].onfocus = function() {
            oTextbox.value = this.alt;
        };

    for (var i = 0; i < document.images.length; i++) {
        document.images[i].onclick = function() {
            oTextbox.value = this.alt;
        };
    }
};
</script>

I took this script right here on the stack at script link , and use with an input and various images works perfectly ! but when using the php script in foreach, it creates several inputs but all with the same name, I imagine it is possible to click or set on Focus in the input and click on the image the same can, pass the values to another selected field!

my foreach!

<?php foreach($data["category"] as $categ):?>
<label><?=$categ->name;?></label>
 <input type="text" name="img_ent" id="myTextBox" value="Imagen entrada" 
 class="form-control" placeholder="Imagen Entrada">
<?php endforeach; ?>

Explaining better !

I took the script that I click on the image it automatically already puts the name of the image in the input ok, so everything well works, what I did was to input the loop foreach with php, It’s okay too, it generates several inputs according to my database example 5 ... Dae comes the problem when generating these 5 inputs I click on the image and it does exactly what it does without the loop, it just adds the text in the first input even though I click on the second input it adds to the first one the same way! Dae thought that how to make on Focus the other inputs because Dae by clicking on the input and selecting by clicking on the image it passed the values to the other input. I can’t imagine if it’s possible...

javascript

  • How are you applying the foreach in your code?

  • There’s a problem with that code: the first for makes count of Ids, which is a bad practice in HTML. An ID should be unique on the page, therefore it should not even be counted. Another thing is that your question does not explain clearly what you want and makes confusion: "click or set on Focus in the input and click on the image the same can, pass the values to another selected field"...

  • explaining mlehor recast question!

  • as I said I click on an image it will pro input first but if I click on input 2 instead of going to the second it sends the text pro first

  • var oTextbox = Document.getElementById('myTextBox')!

  • i have 200 images the amount of imagen does not inport what inport and input in case!

  • I believe that you should do this var first = Document.getElementById("textbox1"). value; var Second = Document.getElementById("textbox2"). value;

  • If I’m not mistaken when clicking on the input it has the focus but if you click on something else it loses its focus. The best thing to do is to post all the code so we can test

  • @The problem is that the question has a huge text and says nothing. It’s a confusion of words "click on it, lose focus on that other, click on the image, click on the input, throw the value back and forth"... I had to vote to close for lack of clarity

  • Very obvious, what’s not obvious is pois dae ao clicar no input e selecionar clicando na imagen

  • @dvd the question is clear, you q is sleepy and seeing things :D

  • @Leocaracciolo rsrs... clear as water.

  • https://jsfiddle.net/carloscoelho/5xm84f70/2/

Show 8 more comments

1 answer

2

What you’re trying to do doesn’t work.

  1. With input ids equal, will always fall into the first input
  2. With input ids different, at the end of the loop, it will always fall into the last input

Suggestions

Javascript-enabled:

In php generate input ids with sequential number at the end of the ex value:

id="myTextBox0" id="myTextBox1" id="myTextBox2" etc....

in each img tag add the event with its numbering in the id value

onclick="document.getElementById('myTextBox0').value=this.alt"

onclick="document.getElementById('myTextBox1').value=this.alt"

Upshot

<input type="text" name="Example" id="myTextBox0"/>
<input type="text" name="Example" id="myTextBox1"/>
<input type="text" name="Example" id="myTextBox2"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0ejnQio1K4_9rPAg4gccOyubd9MDsm9EHqFPSj775hxt3NAW2" alt="primary image" onclick="document.getElementById('myTextBox0').value=this.alt" width="100"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrWio0j91C833kB_x-UeRsqc52Ft2TJGDC-YTjyEYb8k7X-PpH" alt="second image" onclick="document.getElementById('myTextBox1').value=this.alt" width="100"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBUDSuBgsJFMgAnDk0qCNvlJtXcEVrqsaH7nXCiCtcUEVMMTT_Jg" alt="third image" onclick="document.getElementById('myTextBox2').value=this.alt" width="100"/>

With Jquery

$(document).ready(function() {
  $('.clickable').click(function(){
    var idimg = $(this).attr('id');
    document.getElementById('myTextBox'+idimg).value = this.alt;
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="Example" id="myTextBox0" />
<input type="text" name="Example" id="myTextBox1" />
<input type="text" name="Example" id="myTextBox2" />
<img id="0" class="clickable" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0ejnQio1K4_9rPAg4gccOyubd9MDsm9EHqFPSj775hxt3NAW2" alt="primary image" width="100" />
<img id="1" class="clickable" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrWio0j91C833kB_x-UeRsqc52Ft2TJGDC-YTjyEYb8k7X-PpH" alt="second image" width="100" />
<img id="2" class="clickable" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBUDSuBgsJFMgAnDk0qCNvlJtXcEVrqsaH7nXCiCtcUEVMMTT_Jg" alt="third image" width="100" />

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.