passing data to html elements using jQuery

Question

Now, this is how my page looks like :

.
.
.
<?php
for($i=1;$i<3;$i++)
   {
       <a href="#edit" class="dialog_box" onclick="edit_comment('<?php echo $array[$i]['id'];?>','<?php echo $array[$i]['comment'];?>')">Edit</a>
   }
?>// so, there are 3 links now, all are same
// here, $array[$i]['id'] is 1,2,3,....... and $array[$i]['comment'] is "comment 1","comment 2","comment 3", ...... etc.

<div id="edit">
   <h1>A Header</h1>
   <form method="post" id="edit_form" name="edit_form" action="<?php echo site_url("controller/function");?>">
       <input type="hidden" name="edit_id" id="edit_id" />
       <label>Some Label:<input id="edit_comment" name="edit_comment" type="text" size="10" autofocus /></label>
       <input type="submit" value="Ok" />
   </form>
</div>
<div>
.
.
.
</div>
<script>
// some "dialog_box" related work
</script>
<script>
function edit_comment(id,comment){
    $("#edit_id").attr("value",id);
    $("#edit_comment").attr("value",comment);
};
</script>
</body>
</html>

here, class="dialog_box" is for a dialog box I am using here.

So, I think now its easier to look for the bug. Please please please help me. Its driving me crazy.

Sorry guys, this is still not working. I tried all of your ideas, but still same result. Help me. — user2387319
– user2387319, Commented Jul 17, 2013 at 12:16

Barbara Laird · Accepted Answer · 2013-07-17 16:47:07Z

2

It looks like the problem is with your onclick. You want to pass strings to the function, right?

<a href="#edit" onclick="edit_comment(<?php echo "id";?>,<?php echo "comment";?>)">Edit</a>

should be

<a href="#edit" onclick="edit_comment('<?php echo \"id\";?>','<?php echo \"comment\";?>')">Edit</a>

This works for me. A couple of things to look at: ids should start with a letter, not a number. Your function was the same name as your input. I was seeing the following error: TypeError: '[object HTMLInputElement]' is not a function (evaluating 'edit_comment('1','comment 1')'). The console is your friend.

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
   function fn_edit_comment(id,comment){
      console.log(id);
      console.log(comment);
      $("#edit_id").attr("value",id);
      $("#edit_comment").attr("value",comment);
   };
</script>
</head>
<body>

<a href="#edit" onclick="fn_edit_comment('id1','comment 1');">Edit</a>
<a href="#edit" onclick="fn_edit_comment('id2','comment 2');">Edit</a>  
<a href="#edit" onclick="fn_edit_comment('id3','comment 3');">Edit</a> 
<div id="edit">
    <h1>A Header</h1>

    <form method="post" id="edit_form" name="edit_form" action="">
        <input type="hidden" name="edit_id" id="edit_id" />
        <label>Some Label:
            <input id="edit_comment" name="edit_comment" type="text" size="10" autofocus />
        </label>
        <input type="submit" value="Ok" />
    </form>
</div>

</body>
</html>

edited Jul 17, 2013 at 16:47

answered Jul 16, 2013 at 17:11

Barbara Laird

12.7k2 gold badges48 silver badges58 bronze badges

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

5 Comments

acdcjunior Over a year ago

+1 I think this is it. Also, no need to have $("#edit #edit_form #id") or $("#edit #edit_form label #new_comment"). Since IDs should be unique, using $("#id") and $("#new_comment") would have the same effect.

user2387319 Over a year ago

Actually I am using an array here, so there are several links like this, this is actually : <?php echo $array[$i];?>. This is working, I saw from the source of the web page that this function is getting the values correctly. Don't know what's happening after that. @Barbara Laid

Barbara Laird Over a year ago

You still don't have quotes around your edit_comment parameters. Have you tried a console.log of id and comment within edit_comment? Without the quotes, javascript will think they are variable names and their value will be undefined.

user2387319 Over a year ago

I tried with that quotes also, but same result. Well, I've just edited my question, can you please review it and help me again ? Thanks a lot for your help.@BarbaraLaird

user2387319 Over a year ago

still not working. ok, I'll paste the whole page here.@BarbaraLaird

adeneo · Accepted Answer · 2013-07-16 17:16:23Z

1

I'm guessing you're echoing strings there :

<a href="#edit" onclick="edit_comment('<?php echo "id";?>','<?php echo "comment";?>')">Edit</a>

Note the quotes around the echo's!

And make sure the edit_comment function is in scope, in other words not inside a document ready function or something similar, and do :

function edit_comment(id,comment){
    document.getElementById('#id').value = id;
    document.getElementById('#new_comment').value = comment;
}

remember, ID's are unique, it makes no sense to use a selector with an ID inside an ID, as there can't be more than one of the same ID.

answered Jul 16, 2013 at 17:16

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

Pratheep · Accepted Answer · 2013-07-16 17:19:22Z

1

function edit_comment(id,comment){
    $("#edit_form #id").attr("value",id);
    $("#edit_form #new_comment").attr("value",comment);
};

I removed #edit from the selector since the #edit_form is not inside #edit. And the label is unnecessary.

answered Jul 16, 2013 at 17:19

Pratheep

1,0861 gold badge9 silver badges18 bronze badges

9 Comments

adeneo Over a year ago

Generally, the #edit_form is unneccessary as well, as ID's are unique.

Pratheep Over a year ago

Yup, true..#id and #new_comment should be sufficient.

user2387319 Over a year ago

Yeah, I also used only those ids, nothing else, but still same result.

Pratheep Over a year ago

Check this fiddle. If you still can't make it work then show us the page your working on.

Pratheep Over a year ago

Your edited question has errors PHP syntax wise. Probably that's not the real code you're using? Because that will throw you errors. I think its best if you post your work online. Looking at the whole page will help to debug in your case.

|

tim · Accepted Answer · 2013-07-16 17:09:46Z

0

your HTML form input field id="id" doesn't have a value, so you can't expect to get one.

<input type="hidden" name="id" id="id" />

needs to be

<input type="hidden" name="id" id="id" value="someting here" />

answered Jul 16, 2013 at 17:09

tim

3,9235 gold badges37 silver badges39 bronze badges

2 Comments

Katana314 Over a year ago

I think the point is that he wishes to do this dynamically using JQuery. ie, set the hidden field's value when a button is clicked.

user1 Over a year ago

the user is adding an attribute called value while clicking the button, why shouldn't he/she expect to get a value?

Collectives™ on Stack Overflow

passing data to html elements using jQuery

4 Answers 4

5 Comments

Comments

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related