[RESOLVED] onclick and submit form, with if(confirm())

[Flakes]

Hi all,

i have recently come across a problem with my code while trying to use JavaScript with a form, simply when i use the onclick function my form will not submit, what i want is a confirmation dialogue to pop up and if the user clicks yes the form submits, if they click no nothing will happen. This needs to happen using POST since my code deletes an entry from the database.

heres the code im using in the form.

            echo '
            <form action="editLinks.php" method="post">
              <input type="hidden" name="edit" value="true" />
              <input type=hidden name=delete value=true />';
              
              echo "
              {$row['name']}
              <input type=\"hidden\" name=\"deleteid\" value=\"{$row['id']}\" />
        </td>
        <td>
          <input type=\"submit\" name=\"Delete\" value=\"Delete\" onclick=\"javascript: if(confirm('Are you sure you want to delete?')) this.form.submit();\" />
	        </form>

i already posted this in the PHP section by mistake, would be appreciated if a mod could delete it for me.

[PeejAvery]

A few changes/suggestions...

• Always try to echo as little HTML as possible.
• To use JavaScript interacting with a form, use the onsubmit function of the <form> tag.
• Don't create a form split by a table. You have a random </td><td> in your code. That is invalid since the enclosed tags are not closed first.
• Don't put javascript: inside of the onclick event of the button, because onclick is already a JavaScript event. Adding it is redundant and just wastes more space.

<form action="editLinks.php" method="post" onsubmit="if(!confirm('Are you sure you want to delete?')){return false;}">
  <input type="hidden" name="edit" value="true" />
  <input type=hidden name=delete value=true />
              
  <php echo $row['name']; ?>
  <input type="hidden" name="deleteid" value="<?php echp $row['id']; ?>" />
  </td>
  <td>
    <input type="submit" name="Delete" value="Delete" />
</form>

EDIT: And next time you post in the wrong forum, simply click the Report Post icon and ask that the thread be moved. This helps to keep the forums clean. Thanks.

[Flakes]

Brilliant, thankyou. yeah i was looking for the report post button but couldnt find it lol, first time on these forums.

ill give that code a go right away, and let you know if it works.

Edit,

oh the <td></td> is correct, i just didnt see the point in putting in all the code for the rest of the table, when it was just the form i was having trouble with. cant wait for all the web browsers to catch up so i can use CSS without hacks.

[Flakes]

ok so i tried using onsubmit, and i still get the same results, the dialog appears but when a button is clicked nothing happens, i know its not a bug in the delete, because if i remove the JavaScript everything works.

heres the full code with the while loop included.

  
  echo '<table width="600" style="max-width: 100%; min-width: 90%">';
      
    while($row = mysql_fetch_array($result, MYSQL_ASSOC))
    { 
      //display list of menu items, to edit. 
      echo "
      <input type=\"hidden\" name=\"id\" value=\"{$row['id']}\" />
      <tr>
        <td>";
        
      echo '          
          <form action="editLinks.php" method="post" onsubmit="if(!confirm(\'Are you sure you want to delete?\')){return false;}">
          <input type="hidden" name="edit" value="true" />
          <input type="hidden" name="delete" value="true" />
          '; 
          
        echo "{$row['name']}
          <input type=\"hidden\" name=\"deleteid\" value=\"{$row['id']}\" />
        </td>
        <td>
          <input type=\"submit\" name=\"Delete\" value=\"Delete\" />
          </form>
        </td>
      </tr>";
      
    } 
    echo '
    </table>';

ok i want to apologise for that, that code works great, thankyou very much for your help. i had added a third value to check in the delete(cant remember why it was a late night session), i deleted the value and everything is fine.

[PeejAvery]

Glad it is solved.

oh the <td></td> is correct...

You misundertand what I am saying. Currently, your HTML is invalid. All HTML tags must be nested. In other words, when you open a tag inside of a tag, it must end before its outer tag ends.

You open a <td>, then a <form>, then you close the <td>, and then close the <form>. This is invalid because you are closing the outer tag before properly closing the inner tag.

Yes, it will render correctly in some browsers. But, it is invalid and can cause some browsers difficulty.

[Flakes]

unfortunately im not quite sure how to correct the problem and still have it look the way i want. ive been asked(by the client) to make this website compatible with FF, FF2, FF3, IE6, IE7 and IE8, all of them work so im happy with the result even with the slightly incorrect HTML. Ive also tested in safari, and phone browsers and they all seem to work fine.

[PeejAvery]

Put the form in one <td> and then a button in the other calling the other form to submit.

    <form action="editLinks.php" method="post" id="td<?php echo $row['id']; ?>" onsubmit="if(!confirm('Are you sure you want to delete?')){return false;}">
      <input type="hidden" name="edit" value="true" />
      <input type=hidden name=delete value=true />
      <php echo $row['name']; ?>
      <input type="hidden" name="deleteid" value="<?php echo $row['id']; ?>" />
    </form>
  </td>
  <td>
    <input type="button" value="Delete" onclick="document.getElementById('td<?php echo $row['id']; ?>').submit()" />