A js Question

Discussion in 'Web Design and Development' started by zlinuk, May 15, 2009.

  1. zlinuk macrumors member

    Joined:
    Jul 8, 2008
    Location:
    UK
    #1
    This is hopefully an easy one for those amongst you that are js guru's.

    So here is the scenario;

    I have a very simple form which contains a couple of text fields and a single button.

    When the button is pressed, I want three things to happen;

    1 The form data is submitted.
    2 The form is reset.
    3 A hidden link is "clicked"

    So, I created (copied from internet) the following function;

    HTML:
    <script type="text/javascript">
    function submit_form()
     {
    	document.form1.submit();
    	document.form1.reset();
    	document.getElementById("mb2").click();
    	}
    </script>
    The function is called when the button is clicked.

    HTML:
    <input name="Button" type="button" class="submit1" id="submit1" onclick="submit_form()" value="Submit" />
    The situation is that the submit and the reset works fine across the board, the ".click()" works in IE and throws an error in FF.

    Can anyone offer a solution please?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
  3. zlinuk thread starter macrumors member

    Joined:
    Jul 8, 2008
    Location:
    UK
    #3
    Thanks for that, it seems that I can only use .click on form elements.

    I'm actually trying to activate a lightbox from a hidden <a> tag.

    The page can be found here http://www.exac-one.com/Contact/index.html

    I accept that what i'm trying to do is a poor implementation, but my knowledge of javascript is virtually zero.
     
  4. GregE macrumors 6502

    Joined:
    Nov 28, 2007
    #4
  5. effenay macrumors newbie

    Joined:
    May 13, 2009
    #5
    Try:

    Code:
    <script type="text/javascript">
    function submit_form()
     {
    	document.form1.submit();
    	document.form1.reset();
    	document.getElementById("mb2").click();
            [b][color=green]return false;[/color][/b]
    	}
    </script>
    The additional line will prevent the default submit event from firing, which is probably preventing Firefox from completing the call to click().
     
  6. effenay macrumors newbie

    Joined:
    May 13, 2009
    #6
    Ah, forgetful me. The real problem is that Firefox does not support calling click() on <a> tags, as angelwatt pointed out above.

    But, we can still make invoke your lightbox by calling it directly instead of trying to fake a click. Try this:

    Code:
    <script type="text/javascript">
    var box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true , fixedTop: 118 , showControls: false });
    function submit_form() {
        document.form1.submit();
        document.form1.reset();
        box.open(document.getElementById("mb2"));
        return false;
    }
    </script>
    BTW, I also noticed that you're referencing Spry.Widget.ValidationTextarea, but you've forgotten to link to SpryValidationTextarea.js

    HTH.
     
  7. dalvin200 macrumors 68040

    Joined:
    Mar 24, 2006
    Location:
    Nottingham, UK
    #7
    you could also change the hidden <a> element to an <input button>..
    here is the code which works in safari and firefox

    Code:
    <html>
    
    <head>
    <script type="text/javascript">
    function submit_form()
     {
    	document.form1.submit();
    	document.form1.reset();
    	
    	document.getElementById("mb2").click();
    }
    
    function alertMsg()
    {
    	alert("Hidden Click Worked");
    }
    	
    </script>
    <style type="text/css">
    input.hidden{
    	display: none;
    }
    </style>
    </head>
    <body>
    <form name="form1">
    <input name="Button" type="button" class="submit1" id="submit1" onclick="submit_form()" value="Submit" />
    <input type="button" name="mb2" id="mb2" value="" onclick="alertMsg()" class="hidden"/>
    </form>
    
    </body>
    
    </html>
    
     
  8. zlinuk thread starter macrumors member

    Joined:
    Jul 8, 2008
    Location:
    UK
    #8
    Thanks for all your help and suggestions.

    I eventually went with this;

    HTML:
    function submit_form()
     {
    	document.form1.submit();
    	document.form1.reset();
    	if (navigator.appName=="Microsoft Internet Explorer") 
     	document.getElementById("mb2").click();
     	else box.open(document.getElementById("mb2"));
    	}
    which seems to work ok across the board.
     

Share This Page