How do I check a javascript submitted form using the POST global

Question

Image one is how the page appears when loaded by the browser. Image 2 is when the list element is double clicked. Image 3 shows the result of clicking the pencil (which is the original form element). You can see that the list item does have an accessible value as it prints the integer in the alert so I am not sure about the comment below pertaining to that . I am also not understanding how this is a duplicate of the previous question suggested as when the img is clicked it satisfies the logic check of $_POST['edit']. Please do not mark this as duplicate as it is not! In the answer my question was marked as a duplicate of it is stated that "img input elements cannot post data to the server and must be encased in a button". This to my mind must be incorrect as how can my page change state based on the img click if it is not delivering data via post, how can the POST variable be set by the img click if it cannot pass data to the server. If a question is marked as duplicate then the original answer must address the same problem and/or contain correct information if it does not then I fell this question should stand as an original!

<html>
<head>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
<?php
  if(isset($_POST['edit']) ) 
  {
  ?>
    <p>window is in edit mode</p>
  <?php
  }
  else
  {
  ?>
    <p>window is not in any mode</p>
    <form id="form-edit"  method="POST" name="form-edit"  action=" <?php echo $_SERVER['PHP_SELF']; ?>">
      <input type="image" id="edit-button" name="edit" value="1"  src="../images/pencil.png" class="course-banner-edit"> 
    </form>
    <?php
    }
    ?>
    <script>
      $(document).ready(function() {

       /**********************************************
       PROBLEM WITH THIS FUNCTION 
       **********************************************/  
        $('li').dblclick(function() {
          $('#form-edit').submit();
       /******************************************
      THE ALERT TRIGGERS AND THE VALUE IS REPORTED AS ONE WHICH IS CORRECT
        *****************************************/  
          alert( $("input[name=edit]").val() );
        });
     }); 
     </script> 
   </body>
  </html>

Wading through your code is impossible. right-click and view-source, copy the RENDERED code and use the `<>` snippet editor to show a [mcve] - do NOT forget to click TIDY before saving — mplungjan, May 21 '17 at 12:50
Thanks for the advice I have removed all the unnecessary code. Any ideas how I can solve this? — jon, May 21 '17 at 15:44

jbe · Accepted Answer · 2017-05-21T17:16:57.363

0

input elements of type image do not accept value attributes. try something like this:

<form id="form-edit" method="POST" name="form-edit" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <button type="button">
        <img src="" alt="">
    </button>
    <input type="hidden" name="edit" value="1">
</form>

to get a better understanding on how it works try to submit this form with the different buttons and see what happens

<html>
<head>
</head>

<body>
<?php var_dump($_POST); ?>
<form id="form-edit" method="POST" name="form-edit" action="#">
    <input type="image" id="edit-button" name="first_submit_button" src="...">
    <input type="image" id="edit-button" name="second_submit_button" src="...">
    <input type="submit" value="third submit button">
</form>

<ul>
    <li>submit via javascript</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('li').click(function() {
      $('#form-edit').submit();
    });
  });
</script>
</body>
</html>

edited May 21 '17 at 17:16

answered May 21 '17 at 16:07

jbe

1,722
1
12
20

"input elements of type image do not accept value attribute"- Please see photo in the middle- this displays the value of "1" when double clicked how is this compatible with what you have said? – jon May 21 '17 at 16:39
That value will not be submitted to the server. Input elements of type image are used to create graphical submit buttons. – jbe May 21 '17 at 16:45
ok I understand now but how do you account for the fact that when the page reloads after the pencil is clicked the POST variable is satisfied? the check this satisfies is if(isset($_POST['edit']) ) this must be altering something at the server end – jon May 21 '17 at 16:54
because that was the button you used to submit the form. try to add a second input image with a different name. when you click the first $_POST will contain data about the first button. when you click second it will contain data about the new button. but both of them are actually not part of the form data. which is why you dont see them when you submit the form with javascript – jbe May 21 '17 at 17:01
Ah ok, so when a form is submitted via javascript through an element event (in my case double clicking the li) that is not marked as having an it does not set the $_POST ['edit'] php global variable as the li element has no such name attached to it? I am understating you correctly? – jon May 21 '17 at 17:07
Almost, input image is not meant to carry data. But when you use an image to submit the form you will get info about that image. ive added an example to my answer. – jbe May 21 '17 at 17:18

How do I check a javascript submitted form using the POST global

1 Answers1