pass array into ajax function

deepson2 · May 6, 2009

Hello

i want to update my database record using AJAX. but i am stucked where pass my row value(array) into the ajax function. for the button save, i think its working because if i put it in while loop of my fetching record function its updating my last record.

so i want to pass my each textarea value in to my AJAX function.

function setClickable() {
$("p").click(function() {

$(this).hide();

var textarea = '<div><input type="text" id="'+this.id+'_edit" name="'+this.id+'" rows="1" cols="1">'+$(this).html();

var button = '<div><input type="submit" name="save[<?=$row['id']?>]" value="save" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>';

$(this).after(textarea+button);

$(this).remove();

$('.saveButton').click(function(){saveChanges(this);});

$('.cancelButton').click(function(){saveChanges(this, true);});

});

$("p").mouseover(function() {

$(this).addClass("editable");

});

$("p").mouseout(function() {

$(this).removeClass("editable");

});

}

php code

 <div  id='id'></div>

     <table width="100%" border="0" cellspacing="3" cellpadding="0">

      <tr bgcolor="#FDFAEE">
          <br/>
       <p class="edit-this" id="desc">

         <textarea name="friends[<?=$row['id']?>]"><?=$row['friends']?></textarea></td>,/tr></table>

</p>

can anyone tell me how can i pass my textarea's value into my AJAX function?

thanks in advance.

JonnoTheDev · May 6, 2009

Use Google

http://bytes.com/topic/javascript/answers/848204-how-get-textarea-value-into-javascript-variable

deepson2 · May 6, 2009

thanks for your reply neil.johnson,

I tried whay you have suggested to me like this

<?php
    $conmsg=$_POST['conmsg'];
    ?>

<html>
<head>
</head>
<script>



    function conflag()
    {
    var jflagcapt="<?php echo $flagcapt ?>";

                   if(jflagcapt==0)
            {
               alert("hello");
            var jconmsg="<?php echo $conmsg ?>";
                   alert(jconmsg);
                    document.getElementById('idconmsg').value = jconmsg;
           }
   }


</script>
    <form action="<?php echo $PHP_SELF; ?>" method="post"  >

    <textarea id="idconmsg" name="conmsg" cols="50" rows="10" wrap="physical" title="Please type your message"
            onKeyDown="textCounter(this.form.conmsg,this.form.remLen,500);"
            onKeyUp="textCounter(this.form.conmsg,this.form.remLen,500);"
            ></textarea>
            <br />
<input type="submit" name="submit" value="submit" onsubmit="return conflag();">
</form>
</head>
</html>

I dont find any ajax effect there. could you please see my code and suggest me somthing.

JonnoTheDev · May 6, 2009

The first issue is that this is not AJAX. AJAX is used to access a server side script i.e. PHP without the user having to refresh the browser, i.e prepopulate a select list from a database query based on the choice from another form element such as a checkbox. What you have is a Javascript function.

Your second issue is that your HTML is incorrect. Checkout the number of HEAD tags you have and where is your BODY tag?

3rd issue

<?php echo $PHP_SELF; ?>

is defunct and should be

<?php echo $_SERVER['PHP_SELF']; ?>

4th issue

Your onSubmit event handler is in the wrong place

<input type="submit" name="submit" value="submit" onsubmit="return conflag();">

should be

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" onSubmit="return conflag();">

5th issue

You cannot acheive this by using the onSubmit event handler. You wouldn't even use Javascript if you are submitting the form. PHP will insert the database record.

You cannot display the textareas value using Javascript in the way you have and if you are submitting the form the value is in php's $_POST array so can be printed within the textarea without JS.

Simple refactored code

<html>
<head>
<script language="Javascript">
function conflag() {
   var value = document.getElementById('idconmsg').value;
   alert(value);
}
</script>
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<textarea id="idconmsg" name="conmsg" cols="50" rows="10" wrap="physical" title="Please type your message" onChange="conflag();"></textarea>
</form>
</body>
</html>

I suggest you getting a book. What you are trying to acheive is not logical, you are using the wrong methodology or you haven't explained yourself fully.

deepson2 · May 6, 2009

ok, i ll explain first what i want to do exactly.

I am fetching records on page at the same time updating these records on each record's save button

like this

id friends myid

1 meera 3 save

2 john 3 save

when i ll click on meera it ll automatically give me the cursor to change the value with save and cancel button.so on each save button i want to change only that particular row. now the status is whtver i update. its updating only last value. I mean i am getting the only last id. but i should get different id with each row. can anyone tell me how can i do that?

here is my code

<html>
<head>
<title>Edit inplace with ajax</title>
<link rel="stylesheet" href="login.css" type="text/css"/>
<script type="text/javascript" language="javascript" src= "ajax_framework.js"></script>
<link href="editinplace.css" rel="Stylesheet" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//JQuery ready is quicker than onload
setClickable();
});
function setClickable() {
$("p").click(function() {
$(this).hide();
var textarea = '<div><input type="text" id="'+this.id+'_edit" name="'+this.id+'" rows="1" cols="1">'+$(this).html();

var button	 = '<div><input type="submit" name="save[<?=$row['id']?>]" value="save" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>';
$(this).after(textarea+button);
$(this).remove();
$('.saveButton').click(function(){saveChanges(this);});
$('.cancelButton').click(function(){saveChanges(this, true);});
});

$("p").mouseover(function() {
$(this).addClass("editable");
});
$("p").mouseout(function() {
$(this).removeClass("editable");
});
}

</script>
</head>
<div class="wrapper">
<!-- <?if($userid){ ?>
<div class="wide top img">
<p class="top_nav">
<a href="add.php" title="Add Friends">Add Friends</a>|<a href="logout.php" title="Logout">Logout</a></p><? }?>
</div> -->

<div class="wide top img">
<p class="top_nav">
<a href="add.php" title="Add Friends">Add Friends</a>| <a href="login.php" title="Add Friends">Login</a>| <a href="logout.php" title="Logout">Logout</a></p></div>
<?if(!$userid){ echo "<p>You need to <a href='login.php' title='login'>login</a> to Add friends<br /><br />If you are not a registered user, <a href='registerib.php'>click here to register</a></p><br />";?>
<body id="free">
<?}else{?>
<body>

<div class="outer">


<p><?=ucfirst($blogdata->myname);?>'s profile</p>
<div id="insert_response"></div>

<form action="<?$PHP_SELF;?>"  method="post">
<table width="700px" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="100%">
<?
$result =  $op->runsql("SELECT * FROM friends WHERE myid = '$userid' ORDER BY id ASC");

$num=mysql_numrows($result);
     $result1                = $op->runsql($result);
     $total_records         = mysql_num_rows($result1);
     $limit_value           = 10;
     $top                   = $total_records/$limit_value;
     $total_pages           = ceil($top);
    while($row = $op->select($result)){

   // $num=mysql_numrows($result);

   //$i=0;
 //$id=mysql_result($result,$i,"id");


?>
           <div  id='id'></div>

     <table width="100%" border="0" cellspacing="3" cellpadding="0">

      <tr bgcolor="#FDFAEE">
          <br/>
<!--        <p class="edit-this" id="desc">	 -->

     <tr>
     <td>
     <textarea name="friends[<?=$row['id']?>]"  value ""><?=$row['friends']?></textarea></td>
     <td><input type="submit" name="save[<?=$row['id']?>]" value="save"></td>
</tr>
        <input type="hidden"  name="id"   value="<?=$row['id'];?>"  id="<?=$row['id'];?>" size="25" maxlength=2 />

<!--         </p>   -->
        </tr>
</table>
     <?

     }


if (isset($_POST['save'])) {

$friends_id_array = array_keys($_POST['save']);
   $friend_id = $friends_id_array[0];
$link = mysql_connect('xxx', 'xx', 'xxx')
  	          or die('Could not connect: ' . mysql_error());
  	      mysql_select_db('xxxx') or die('Could not select database');

   $sql = "UPDATE friends SET friends = '".$_POST['friends'][$friend_id]."' WHERE id = $friend_id ";

$result = mysql_query($sql) or die('Query failed: ' . mysql_error());


 	     // Printing results in HTML
 	      if(mysql_affected_rows() > 0){

 	    echo "Updation is done". mysql_affected_rows();

 	      }else{

 	    echo "not done";
        }
 	  }


// mysql_query($query);



     } ?>

</body>
</html>

neil.johnson ,please help me. here is my whole code.

please help me.

Sign In

pass array into ajax function

Recommended Posts

deepson2

Link to comment

Share on other sites

JonnoTheDev

Link to comment

Share on other sites

deepson2

Link to comment

Share on other sites

JonnoTheDev

Link to comment

Share on other sites

deepson2

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information