How to run JS by submitting HTML form?

[shant93]

So I'm trying to make an app, and I need to make dynamic changes to the page. Can this possibly be done when a user slicks submit on an HTML form? If so, how? How do you stop it from actually sending the form, how do you include the values from two dropdown lists in the function called?

Second question: is it possible to refer to a JS function that appears in the page? To avoid having to make layouts over and over again, I essentially used nested PHP includes to generate the pages, and i have no access to the header tag from the generated page.

Reference: http://gdex.tk/cont/?i=0003
The image is JS-generated using the jsDraw2D library. I want to draw an arrow from point x to point y when the user presses go on the form. It should also change who's turn it is and what the last move was, but that I know how to do.

PS
If anyone knows a good way to check if the path created passes once through every point, (If the path created is a Hamiltonian path) please share.

----------
Edit:

PPS
I've only made sure the design works on Google Chrome, and I know the design is faulty on internet Explorer. If you can suggest improvements, again, please share.

 

[lemon-tree]

A form has an onsubmit event that can be used for this purpose and then, if you return false, the form will not actually be sent.
e.g.

<form onsubmit='yourFunction(); return false'>
<input type='text' value='etc'>
<input type='submit' value='Go'>
</form>

Rather than using the inline onsubmit, you could also append a listener to the form that does the same thing but keeps your HTML tidy. You could equally not use a submit button at all and instead replace it with a normal button type that has a click handler, however this will fail if the user hits enter rather than clicks the button.

To get the value of the drop-downs within yourFunction() you can just use ids or names through standard methods.

For that page, I would suggest you scrap the idea of using a form to create the links and instead use click events for the nodes, so to join node 1 to node 2 you would click them in that order. This wouldn't be possible with multiple click handlers as the nodes are within the canvas and are therefore cannot have listeners assigned. Instead, once you calculate their position a single click handler on the canvas could determine which, if any, was clicked and take the necessary action.

If the path is Hamiltonian (it is similar also to check for a full hamiltonian cycle), then the number of arcs will be equal to the number of nodes minus one and every node, except the initial and final nodes, will have order two. If both of those conditions are true then the path should be hamiltonian, although correct me if I'm wrong.

It does work in Safari, although that is to be expected really considering Chrome shares the WebKit backbone.

You should also put a limit on the size of the graph, as I imagine the drawing process is of quadratic order and will get very slow as the numbers increase.
Edit: The complexity of the graph is defined by 0.5n^2 - 0.5n , so if a user enters 100 you will be trying to draw 4950 arcs, which is ridiculous.

 

[shant93]

Wow, thanks for the quick and complete answer!

But I don't see how it would be a Hamiltonian path if there are n-1 paths for two reasons: there could be multiple paths from the same point, and the paths have to have a direction. If that's what you meant by order-two, then please clarify. The most I know about graphs is from a chapter in one of Martin Gardner's collection of his columns, and it's still relatively hazy.

I'll get to implementing the rest of your answer. Thanks again for the rapidity and quality of your answer.