0

When I run a JS function (on a button click) it reloads the page and displays the data the function outputs. However, when I run the JS code when the page loads (no function or button) the script runs fine.

I have tried multiple things to fix the issue such as using a button with type="button" instead of an input. I also tried have the JS function return false. The problem is, I do not have access to the JS and can only implement it, not change it.

JS code without function:

var placeHolder = new Sched({
    PID: "Something"
});
placeHolder.write();

When I had a button (with type="button"), removing the placeHolder.write() line would stop the page from reloading, but obviously also prevent the JS from doing its job. I would like to take the HTML produced by placeHolder.write() and add it to some div. I know how to do all this with static data, but I cannot prevent the page from reloading and displaying nothing but what placeHolder.write() prints.

If I need to be more concise, let me know. I had some trouble trying to figure out how to phrase this question...

Edit: Just wanted to add some information to the overall project. I'm making a page for a University. The school provides a page builder which allows for HTML input. The site then takes the HTML you want and adds to it the University's website layout (such as the side bar, header and footer).

The user should be able to enter a certain major's code into an input box, click a button, and the course information should appear below. I've simplified this in my testing to figure out why the page is reloading (also when the button is pressed, the University's website's layout is lost). In my simplification, I've removed the input and form and just have a button which runs a function containing the above code. "Something" is replaced with a major's code (statically). I've tried setting the placeHolder.write() to a div's innerHTML which did not work either.

jlrosenberg
  • 287
  • 4
  • 14

1 Answers1

0

If the button is in form, it automiticaly submits, while you click it. You need to run preventDefault() method on event object or just return false from a function.

You may want to look here: How to prevent form from being submitted?

Community
  • 1
  • 1
Liberat0r
  • 1,852
  • 2
  • 16
  • 21
  • I've tried return false which did not work. I thought that using a button with type="button" prevents the form from submitting. – jlrosenberg Jun 20 '14 at 16:16
  • Could you add fiddle with a whole page? – Liberat0r Jun 20 '14 at 16:19
  • Unfortunately I cannot. Just to be clear I changed up the function variables for protection. I cannot make the fiddle because the function only works when ran from the host site, and therefor nothing would happen on the fiddle. – jlrosenberg Jun 20 '14 at 16:24
  • Have you tried to dive into `Sched` code? It looks like this is what a `Sched.write()` just normaly do. You could check if it has some other methods to provide your desired outcome, without reloading page. – Liberat0r Jun 20 '14 at 16:38
  • I think I'm going to have to have 2 pages. 1 with just a text input and button which posts the input then redirects to the other page. The other page will than take that post and replace "Something" with it. – jlrosenberg Jun 20 '14 at 16:49