On click get this variable in javascript with these ids

Question

On click h2 I need this variable $post_id in this two places in javascript like I have added with img and input in html.

How can I get this variable in javascript and add with those two ids ?

<h2  id="view" data-target="#Modal_<?php echo $post_id;?>"> view  </h2>

<img id="pic<?php echo $post_id; ?> " />

<input id="input<?php echo $post_id; ?>" >

js:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#pic').attr('src', e.target.result); // here with #pic
        }

        reader.readAsDataURL(input.files[0]);

    }
}

$("#input").change(function(){                    // here with #input
    readURL(this);
});

UPDATE:

when li is clicked change the ids.

 <li data-toggle="modal" data-target="#myModal_<?php echo $post_slug;?>"><a>View</a></li>

<div id="myModal_<?php echo $post_slug;?>"  >


<input type="file" class="file" id="imgInp<?php echo $post_slug;?>"/>

<img id="blah<?php echo $post_slug;?>"   />

</div>

js:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result); // here in id add this blah<?php echo $post_slug;?>
        }

        reader.readAsDataURL(input.files[0]);

    }
}

$("#imgInp").change(function(){   // here in id add this imgInp<?php echo $post_slug;?>
    readURL(this);
});

what do you mean "add", do you want to set the ids of object or add the first one to them? — Maher Fattouh
– Maher Fattouh, Commented Feb 2, 2017 at 10:34

Zakaria Acharki · Accepted Answer · 2017-02-02 12:29:48Z

1

You've to add click event to the h2 then get the data-target using jQuery method .data() and extract the post_id from it using split() method then set the id to the img/input using .prop() method :

$("h2").on('click', function(){
    var target = $(this).data('target');

    $('img').prop('id', 'pic'+target);
    $('input').prop('id', 'input'+target);
});

You should also adapt the other event/function to deal with dynamic id's like :

function readURL(input, post_id) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#pic'+post_id).attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

// here with all inputs that has the 'id' start with 'input'
$("input[id^='input']").change(function(){
    var post_id = $(this).prop('id').split('input')[1];
    readURL(this, post_id);
});

Hope this helps.

$("h2").on('click', function(){
  var target = $(this).data('target');
  var post_id = target.split('_')[1]; //Remove the #Modal_

  console.log('---Before', $('img').prop('id'), $('input').prop('id'));
  
  $('img').prop('id', 'pic'+post_id);
  $('input').prop('id', 'input'+post_id);
  
  console.log('---After', $('img').prop('id'), $('input').prop('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2  id="view" data-target="#Modal_100"> view  </h2>
<img id="pic" />
<input id="input" />

edited Feb 2, 2017 at 12:29

answered Feb 2, 2017 at 10:22

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

6 Comments

True speaker Over a year ago

after adding this click function do i need to change #pic and #input in the existing js code ??

True speaker Over a year ago

I added the click function. Should I change this line $("#input").change(function(){ to $('input').prop('id').change(function(){

True speaker Over a year ago

this what i need what have you done but i need to change this to ids onclick h2 in the lines where i have pointed . 1. $('#pic').attr('src', e.target.result); // here with #pic and 2. $("#input").change(function(){

True speaker Over a year ago

h2 will be clicked and those 2 ids will be changed in my code .

Zakaria Acharki Over a year ago

Check my update @Truespeaker... (Downvoters comments helps.)

|

Maher Fattouh · Accepted Answer · 2017-02-02 10:34:35Z

0

document.getElementById("view").onclick = function() {
    var img = this.nextSibling;
    var input = img.nextSibling;
    var dataTarget = this.getAttribute('data-target');
    var imgID = img.getAttribute('id');
    var inputID = input.getAttribute('id');
};

answered Feb 2, 2017 at 10:34

Maher Fattouh

1,86018 silver badges25 bronze badges

1 Comment

Pavlo Over a year ago

Some explanation might help.

jmtalarn · Accepted Answer · 2017-02-02 11:32:13Z

0

You are getting the elements IMG and INPUT by and incomplete Id as you added a number in your php code.

You can put that data with an data attribute and get it on the javascript with jQuery

php code

<h2  id="view" data-target="#Modal_<?php echo $post_id;?>"> view  </h2>

<img id="pic<?php echo $post_id; ?>" />

<input id="input" data-postid="<?php echo $post_id; ?>" >

js:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {

            postid = $(input).data("postid"); // will contain $post_id

            $('#pic'+postid).attr('src', e.target.result); // here with #pic
        }

        reader.readAsDataURL(input.files[0]);

    }
}

$("#input").change(function(){                    // here with #input
    readURL(this);
});

edited Feb 2, 2017 at 11:32

answered Feb 2, 2017 at 10:26

jmtalarn

1,7551 gold badge14 silver badges19 bronze badges

2 Comments

True speaker Over a year ago

postid = $(this).data("postid"); how this line will contain $post_id ??

jmtalarn Over a year ago

You're right, I corrected it. The idea is checking for the attribute in the input element.

Collectives™ on Stack Overflow

On click get this variable in javascript with these ids

3 Answers 3

6 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related