Hi guys,
I was developing a site search for someone and I got it fully functioning-- the php calls on the input field with #searchField.
All the user has to do is begin typing and the results appear underneath without ever having to click submit or enter/return.
However, the customer was wondering if I could integrate the Wolfram Alpha Computational Search as well.

So that a page visitor or user would type in the search field the results searching his site would appear below, as mentioned above; but, if one typed a query and hit enter then it would search WolframAlpha.

I first made a page, here, that uses the code Wolfram Alpha's developer community was giving to developers that creates an input field and searches wolfram Alpha one hits enter. (It writes the necessary html in a messy way and includes this base.css file)
Here is a screenshot of the html code that the wolframAlpha.js file writes from chrome dev tools.

After doing so, I put the code of the page I developed for my client and the above page together and what I got was two separate input fields, one that searches the site (top, but it doesn't work due because I did not attach that file as where this is located can't parse PHP) and one that searches wolfram alpha (bottom -- does work).
You can see the result of the combined code here.

I was wondering and hoping if you could help me or have any suggestions on how to combine these two input fields (and edit the wolframalpha javascript so that it does not write its own input, but uses the site search (top) one if and only if enter/return is pressed)

Thank you again & Kind Regards,
Team 1504.