Changing content in a DIV

[terrymold]

Hi everyone
I need a bit of help with a problem involving HTML, JavaScript and PHP which I'm hoping someone here can help me with.

I have a working PHP script which uses a FORM section to get data input, which actions itself to do some PHP and JavaScript calculations etc, and it then opens a second PHP script to display the results. Now, all of this works perfectly, or at least how it was originally designed.

What I am trying to do is to do away with the second PHP script, and display the results (of the calculations) within the same page.

I have found a bit of code which will probably do what I want, but I just need a bit of help. This is part of the code...

<FORM method="POST">
   <div id="example">
      <P>This text is already in the DIV</P>
   </div>

   <input type="button" name="name" value="Hello" onclick="document.getElementById('example').innerHTML='<p>Hello</p>'">
</FORM>

When this is run, it's obviouse that the text "This text is already in the DIV" will be magically replaced with "Hello".

What I would really like to know how I can get a 2 or 3 hundred line PHP/JavaScript section of code, mostly complex calculations with an output basically consisting of 6 times (05:35 08:49 and so on) into the onclick above where the Hello is?

For example, could I put all the calculations into a function or something similar, and put just the function call where the Hello is?

Or maybe there is a better or more efficient way of doing it?

Thanks
Terry

There are quite a few ways to do it. Do you want to have js do the calculation or php?

If you want php to do it, you'll need to use Ajax. If you go down this route, I suggest using jQuery. In fact, I'd use jQuery anyway.

If you just want js to do all the calculations:

1) Have an external js file (or you can just paste the function directly into a script tag in the head area of your page).
2) Call the function on button click. You can attach an 'onclick' attribute as you've done, or you can place and event handler in the head area. Let's keep it simple and just use an onclick attribute for now:

<input type="button" name="name" value="Hello" onclick="calcMe();return false;">

Your calcMe function could be something like:

function calcMe(){
 var time1 = $('#time1').val();
 var time2 = $('#time2').val();
 var time3 = $('#time3').val();
 var time4 = $('#time4').val();
 var time5 = $('#time5').val();
 var time6 = $('#time6').val();

 $('#example').html(time1 + " " + time2 + " " + time3 + " " time4 + ...);
}

Note that the above will only work if you reference the jQuery library first in the head area of your page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

[terrymold]

Hi Ardav

I'm afraid that you've misunderstood what I wanted, but you might be on the right track anyway.

It isn't how to do the calculations that I want. I've already done them and they work fine. The two times I had in my original post were just examples.

What I need is to somehow put ALL my calculation code, which is about 50/50 PHP and JavaScript, into or in place of the "Hello" in my onclick line.

So, if I were to click on the button, the text in the example div will be replaced by "Hello". But what I want is to see the RESULTS of those calculations in that div instead.

Maybe I'm not explaining it properly? So ask whatever if you're still not sure.

Terry

> It isn't how to do the calculations that I want.
I realise that, if you notice my example doesn't contain any calculations. I was replying to WHERE to place your JS.

If you need php to be involved in your calculation after a button click, you're gonna need Ajax. As mentioned, I'd use jQuery. Everything I posted above is valid except for the js script itself:

function calcMe(){
 var v1 = $('#v1').val();
 //the above just gets data from a form field
  $.ajax({
   type: "POST",
   url: "includes/slott.php",
   data: "v1=" + v1,
   success: function(retval){
   	$('#example').html(retval);	
   }
 });
}

[terrymold]

Hi again Ardav

Sorry about that. I guess I didn't examine your answer enough?

I can see where you're at now, and I will give it a try and let you know how I get on with it.

Thanks again
Terry