Using jquery ajax to update dynamically created image by GET - php

Question

My current working situation looks something like this:
<!-- collect user info -->
<form method="GET">
<input name="param1" type="text" />
<input name="param2" type="text" />
<input type="submit" />
</form>
<!-- display image based on user info -->
<img src="color.php?param1=<?php echo $_GET['param1']; ?>param2=<?php echo $_GET['param2']; ?>" alt="" />
This is working perfectly. Now I would like only the image being updated by ajax, while the rest of the HTML remains unchanged. I tried this:
<form method="GET" id="formId">
<input name="param1" type="text" />
<input name="param2" type="text" />
<input type="submit" />
</form>
<div id="result"></div>
<script type="text/javascript">
var frm = $('#formId');
frm.submit(function(){
$.ajax({
type: 'GET',
success: function () {
$('#result').html('<img src="color.php?' + frm.serialize() + '" />');
}
});
return false;
});
</script>
In fact this solution works more or less. However, I have some issues here:
Is this good jquery / ajax code or is it silly (yes, I am new to jquery)?
The field "result" does update only if one of the fields changes. Can I make it update whenever the submit button is being klicked?
I would like to display a spinning load.gif while the color.php calculates the picture. I tried it this way, without success:
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
$('#result').html(ajax_load).html('<img src="color.php?' + frm.serialize() + '" />');
Thank you!

Answer 1

To the jQuery ajax call add the parameter cache : false, to force to refresh the image. To use the loader, just play with the attributo src. Copy / paste the code:
<form method="GET" id="formId">
<input name="param1" type="text" />
<input name="param2" type="text" />
<input type="submit" />
</form>
<div id="result">
<img id="preview" src="img/load.gif" />
</div>
<script type="text/javascript">
var frm = $('#formId');
frm.submit(function(){
$('#preview').attr('src', 'img/load.gif' );
$('#preview').attr('src', 'color.php?' + frm.serialize() + '&_' + new Date().getTime() );
return false;
});
</script>