1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Form with javascript button will not submit

Discussion in 'Web Design & Development' started by twmprys, Apr 15, 2010.

Thread Status:
Not open for further replies.
Advertisement
  1. twmprys

    twmprys Thread Starter

    Joined:
    Jun 4, 2009
    Messages:
    111
    I've got an input text area that pops out when a button is pressed - this needs to be submitted as a form when a new submit button (input type = "image") is pressed. Both buttons use javascript to toggle their appearance. Unfortunately, when you press the submit button, nothing happens (i.e. nothing is submitted, the browser does not move to the appropriate page). Can anyone spot where I've gone wrong?

    HTML:
    <table id="thetable" border="0" cellspacing="0" cellpadding="0" bgcolor="#CDCDCD" >
      <tr><td>Forum</td></tr>
      <tr><td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','but1_on.png',1)"><input type="image" onClick="insRow();delRow();" src="but1_off.png" name="Image4" width="125" height="35" border="0" id="Image4" /></a></td></tr>
    <form action="forum2.php" method="POST" ENCTYPE="multipart/form-data" name="comment">
    <script type="text/javascript">
    <!--
      function delRow() {
      document.getElementById('thetable').deleteRow(1)
    }
    
    function insRow()
    {
       var newRow = document.getElementById("thetable").insertRow(2); // Insert third row
    var newCell1 = newRow.insertCell(0); // Insert   cell
    newCell1.innerHTML = "Comment: <textarea cols='30' rows='1' name='enw'></textarea><br />
    <a href=\"#\" onmouseout=\"MM_swapImgRestore()\" onmouseover=\"MM_swapImage('Image5','','but2_on.png',1)\"><input type=\"image\" src=\"but2_off.png\" name=\"Image5\" width=\"125\" height=\"35\" border=\"0\" id=\"Image5\" /></a></span>"; //Cell content
    }
    </script>  
      </form></table>
     
  2. allnodcoms

    allnodcoms

    Joined:
    Jun 30, 2007
    Messages:
    613
    Have another look at your code, you don't actually tell the button that it's supposed to submit the form. In fact, the word submit does not appear in that code at all...

    As you're using Dreamweaver, check out 'Form Button Fever!' on the exchange. That's a cool little tool that allows any HTML element to be used as a submit or reset button.

    I'd also rethink the roll-over code, CSS is a far 'cleaner' way of doing it. Set up a class for the button and then give it a :hover state.

    Hope that helps...

    Danny
     
  3. twmprys

    twmprys Thread Starter

    Joined:
    Jun 4, 2009
    Messages:
    111
    Thanks so much for your reply! I thought that type=image was enough for the submit button? Doesn't type=submit just give you one of those ugly stock buttons? I have to admit I've never used extensions on DM before - I installed the one you suggested but what's my next step? It's not clear in DM at all.

    Thanks
     
  4. allnodcoms

    allnodcoms

    Joined:
    Jun 30, 2007
    Messages:
    613
    Activating "FBF" is a doddle... Select the image you want to be the 'submit button' and go to the behaviours window / tab (should be in the 'Tag Inspector', the 'Window' menu or just <SHIFT>+F4, on my set up, but I run Macs so it might be different on yours). Add Behaviour ('+' sign) and select Form Button Fever from the list. Select the form to send and the behaviour of the button (submit or reset) and hit OK... Job done! The image doesn't even need to be in the form, it can be anything, anywhere on the page (as long as it's in the same frame). You may need to edit the event trigger (it may default to onFocus, so click that and change to onClick).

    Any more probs just drop me a line...

    Danny
     
  5. twmprys

    twmprys Thread Starter

    Joined:
    Jun 4, 2009
    Messages:
    111
    Thanks - following your explanation, it was simple to activate. But the form is still just sitting there - doesn't submit. I wonder if it's anything to do with having the form wrapped up in Javascript?
     
  6. allnodcoms

    allnodcoms

    Joined:
    Jun 30, 2007
    Messages:
    613
    Probably... Just noticed the other issues. Now you're using FBF there is no need for the image to be of type <input>, it's irrelevant so just make it a straight rollover. I'd also move the closing form tag up the page, just before the script marker. Can't see why that would cause issues, but there's no need for it to enclose the script, so may as well move it, can't hurt...

    Keep me posted.

    Danny
     
  7. twmprys

    twmprys Thread Starter

    Joined:
    Jun 4, 2009
    Messages:
    111
    Thanks - you were right about making it a straight rollover. The browser now shifts to page 2, as per form action. But strangely I can't post anything from the form - $_POST is empty.
     
  8. allnodcoms

    allnodcoms

    Joined:
    Jun 30, 2007
    Messages:
    613
    That's a tricky blighter... Only thing I can suggest is that when the form is rendered by the browser it has no content - There is nothing 'to' POST. You rely on a client side event to trigger the creation of that content, and while I've not heard of this causing problems, I'm hard pushed to suggest anything else.

    My advice would be to do away with the insert and delete javscript, just render it all in html, and see if the data goes through. If it does then the java is the problem and maybe you should be thinking about using CSS visibility on a div and switching that with JS. Using CSS to control visibility means that your content would be there all the time, the browser knows it's there and that it's linked to the form.

    Give it a go and let me know...

    Danny
     
  9. twmprys

    twmprys Thread Starter

    Joined:
    Jun 4, 2009
    Messages:
    111
    Actually, I tried working the form tags into the javascript variables using escapes, and it can now send data (or would be able to if the form didn't launch itself automatically as soon as I put the cursor in the textarea - I know data can be sent because when I press the back button on the browser, I can fill the form out: I can then post the data to another page). But I'm going to have to work out why the bally form is automatically submitting now...
     
  10. allnodcoms

    allnodcoms

    Joined:
    Jun 30, 2007
    Messages:
    613
    Sounds like it's doing the submit in the onMouseOver of the input, could also be that default onFocus thing I mentioned earlier.
    If you can't figure it out, just post the revised code, I'll take a look...

    Danny
     
  11. twmprys

    twmprys Thread Starter

    Joined:
    Jun 4, 2009
    Messages:
    111
    Just noticed that the onclick instruction is both in the form tag and in the image - I've taken it out of the form tag and everything seems to work OK now - thanks so much for sticking with me on this one!
     
  12. allnodcoms

    allnodcoms

    Joined:
    Jun 30, 2007
    Messages:
    613
    No worries mate, you're welcome. Glad you got it all sorted...

    Danny
     
  13. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/917049

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice