jquery return value by php echo command

Question

I have these codes:

Contents of main.php:

Javascript

function grab()
{
    $("#div_id").load("/test.php");
}

HTML & PHP

<? $original_value = 'Original content'; ?>

<div id='div_id'><?=original_value;?></div>

<form action="javascript:grab($('#div_id').val())">

    <input name="submit" type="submit" value="submit">

</form>

also test.php

<?... 
$update_value = "Update content";
echo $update_value;?>

the result of test.php will be written into #div_id and the result for div content is:

Original content
Update content

But i like to overwrite original div value and the result should be:

Update content

I mean echo append a new line in #div_id, but i like to overwrite existing #div_id content.

Answer 1

Change the following in your code.

1. Remove the javascript in your action attribute. It doesn't look right.

   <form action="">
   
       <input name="submit" type="submit" value="submit">
   
   </form>
   

2. Add the following javascript.

   $(document).ready(function () {
       $('form').on('submit', function (e) {
           e.preventDefault(); // Prevents the default submit action. 
           // Otherwise the page is reloaded.
   
           grab();
       });
   });
   

The function grab will be called when the form is submitted. I'm not sure if this is what you want, but you should see the new contents in the div.

UPDATE 1:

I have removed the parameter from grab because the function doesn't need one.