user2387319
user2387319

Reputation: 123

passing data to html elements using jQuery

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.

Upvotes: 0

Views: 5033

Answers (4)

Barbara Laird
Barbara Laird

Reputation: 12717

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>

Upvotes: 2

Pratheep
Pratheep

Reputation: 1076

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.

Upvotes: 1

adeneo
adeneo

Reputation: 318182

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.

Upvotes: 1

tim
tim

Reputation: 3903

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" />

Upvotes: 0

Related Questions