4

So what I want is a button, that when clicked, sends an article id to a php page through GET request, and the PHP page generates a PDF summary of my article.

Now this is fairly simple to do if I had a form tag, but I don't and I can't have one since my button is in a table, and as far as I know, forms cannot exist in tables. I still tried using a form tag but it was breaking my site so that's not an option.

The following is what I have:

echo "<td><button type=\"submit\" formaction=\"wp-content/themes/csed/data-entry/results.php\" formmethod=\"get\"class=\"button\" name=\"id\" value=\"" .$single->idArticle. "\" formtarget=\"_blank\">PDF</button></td>";

As you can see, I tried using the formaction attribute to make this work, but right now, my button does not do anything. Anything at all. What am I doing wrong? Is what I'm trying to achieve even possible?

Ching Ling
  • 301
  • 1
  • 5
  • 14
  • 1
    Submit buttons don't submit if they are not in a form. Not sure why you think form's can't be in a table? – Ivar Apr 22 '18 at 10:13
  • 1
    (As you already wrote in the title:) The button has no form associated to .... - So asking the question contains the answer: Add the form which is yet missing. Reading through will give you multiple options to do this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button - Possible duplicate of: https://stackoverflow.com/q/7020659/367456 ? – hakre Apr 22 '18 at 10:15
  • You can have a table inside a form. The alternative is that you use some sort of JavaScript to send the data instead, but there's nothing stopping you from having a table inside a form. – Qirel Apr 22 '18 at 10:16
  • Doing so is breaking my table. I could probably go in and fix the CSS, but that just seems like too much work. I feel like there should be a simpler solution to this. How about using the onClick attribute to send to javascript? Will that work? – Ching Ling Apr 22 '18 at 10:18
  • @ChingLing: I added an answer with an HTML example which should show how you can work-around your constraints. submit is the default type btw., so you don't need to write it out. See the MDN link for more details and options. – hakre Apr 22 '18 at 10:21

1 Answers1

7

If you can not place the button into the form element, you can associate it to one via the form's ID:

<form id="myform"></form>

...

<button form="myform" ... >

So the <form> element can be anywhere else in the hypertext document, be it before or even after the button. The button must not be a descendant of the form.

I quickly compiled this rudimentary example from the MDN docs which are available in different languages even (although I as non native English speaker normally prefer the English variant):

hakre
  • 193,403
  • 52
  • 435
  • 836
  • I am aware of this approach. However, not what I'm looking for. What I want is a way to submit data via GET without the use of a form. I was just reading up and looks like its possible using jquery and ajax. Thank you for your answer though. – Ching Ling Apr 22 '18 at 10:25
  • @ChingLing: Better read the link instead of stacking even more stuff on top: `formmethod="get"` and the button will do the get request. It is all in there. Don't stop that early, esp. if you're new to the tech you're using, e.g. your HTML seems either quite new *or* rusty (-;. – hakre Apr 22 '18 at 10:29
  • @hakreI am using the formmethod="get" in my button. Its still not working. See my code in the OP. I'm guessing that's because of what you and other's mentioned, I am missing the form tags? What I want to do is achieve this without having a form. Are you saying that that's possible? – Ching Ling Apr 22 '18 at 10:37
  • You probably need to add the query parameters to the action. This is at least how it works in PHP (or you add the input fields but as you only have one parameter I would start w/ query parameters here). And yes, with a standard link it is possible w/o a form as the GET request is the standard request for links. If you understand the basics, you can be creative finding any kind of solution you need. See this Q&A for example: https://stackoverflow.com/q/2906582/367456 (and see the upvotes, you're not alone at all) – hakre Apr 22 '18 at 10:56