Question

Here is the form that is inside index.php — I’m trying to programmatically submit it using a click on an image that’s nested inside an ‘a’ anchor:

  <form name="landingForm" id="landingFormId" method="post" action="index.php">
      <input type="text" size="250" maxlength="250" 
                      id="artifactName">Enter an artifact name here...
      </input>
      <a href="javascript:document.landingForm.submit()">    
          <img src="http://localhost/myProj/bronzeAgeCaveDrawing.jpg" 
                      alt="Submit this form" name="imageFormSubmitter" />
      </a>
  </form>

Here is my php code:

<?php
    if(isset( $_POST['imageFormSubmitter']))
    {
       // this fx just echos a javascript 'alert()'
       showAlertBox("The index page form 'landingForm' was just submitted.");
    }
    else
    {
       var_dump($_GET);
       var_dump($_POST);
    }
  ?>

When I type something in the edit box on the form, then click on the image ‘bronzeAgeCaveDrawing.jpg’ the dump of the GET and POST arrays says:

  array
      Empty

  array
      Empty

And for that matter I’m not even sure the above PHP code is getting called for the

      <a href="javascript:document.landingForm.submit()">

case at all because the above php code executes regardless of whether the form submits — the GET and POST
dumps occur when index.php loads due to the ‘else’ clause above that I added because it didn’t appear that the ‘if’ clause was happening.

If the above php code IS in fact executing by the submit() call, the GET and POST are still empty arrays.

I studied examples of using an anchor ‘a’ with an image combined with a call to submit() in a few posts on SO and I don’t see any reason why the POST or GET array is empty. And due to my form method=”post” I’m 100% expecting for the submit() to POST the form, not submit with a GET.

Been staring at this awhile — am I missing something?

UPDATE: Here is the functioning code — thanks for your help folks!

    <form name="landingForm" id="landingFormId" method="post" action="index.php">
      <input type="text" size="250" maxlength="250"  name="itemName_name"
                      id="artifactName">Enter an artifact name here...
      </input> 
      <a href="javascript: document.landingForm.submit()">    
          <img src="http://localhost/myProj/bronzeAgeCaveDrawing.jpg" 
                 alt="Submit this form" name="imageFormSubmitter" />
      </a>
    </form>


   if(isset( $_POST['itemName_name']))
   {
         showAlertBox("The index page form 'landingForm' was just submitted.");
         var_dump($_POST);
   }

Output of the dump of POST array NOW shows:

   array
       'itemName_name' => string 'fffffffffff' (length=11)

TAKEAWAYS:

1) the syntax "document.landingForm.submit()" is 100% fine.
2) the 'name' attribute of my <img> tag does NOT get posted (not sure why,
      but it's not the worst thing happening for me right now so I'll deal with it)
3) giving the text <input> field a 'name' attribute made its way fine to the POST array.
4) the call to submit() does in fact pay attention to the method="post" in my 
   form declaration.

I’m running with it, thanks all. There is more than one equally acceptable answer for me, so I’ll +1 y’all
then have to choose one. Thanks again.

Answer 1

You’re not setting the name attribute on your <input> tag, and the <img> tag is not the right way to submit with an image.

<form name="landingForm" id="landingFormId" method="post" action="index.php">
  <input type="text" size="250" maxlength="250" name="artifactName"
                  id="artifactName" />Enter an artifact name here...
  <input type="image" src="http://localhost/myProj/bronzeAgeCaveDrawing.jpg" 
                  alt="Submit this form" name="imageFormSubmitter" />
</form>

Source: HTML Dog tag reference

Note also that the <input> tag in HTML5 does not / cannot have children.