Search code examples
javascriptwindow.open

center window.open on form submit


My code looks like this:

<script type="text/javascript">
      function directions(sacred) {
        var x = screen.width / 2 - 700 / 2;
        var y = screen.height / 2 - 450 / 2;
        window.open(sacred.action, 'Directions', 'height=485,width=700,left=' + x + ',top=' + y);
        return false;
      }
</script>

<form action="http://maps.google.com/maps" method="get" target="Directions"
      onsubmit="return directions(sacred);">

I don't understand js, so take it easy on me if it looks sloppy.

I can get this to work fine:

<form action="http://maps.google.com/maps" method="get" target="Directions"
    onsubmit="Directions=window.open('about:blank','Directions','width=600,height=400');">

Once I try to connect the onsubmit to the above script, I get lost. I don't even know if the above function is reliable.

I have popped open the hood here: jsFiddle

The problem there is the form submits into a new tab, and ignores window.open altogether.

Thank you in advance for your help.


Solution

  • Try this out: http://jsfiddle.net/333Qy/1/

    <script>
      function directions(sacred) {
      var x = screen.width / 2 - 700 / 2;
      var y = screen.height / 2 - 450 / 2;
      console.info(sacred);
      window.open(sacred.action, 'Directions', 'height=485,width=700,left=' + x + ',top=' + y);
      return false;
    }
    </script>
    <p>
      <form action="http://maps.google.com/maps" method="get" target="Directions"
      onsubmit="directions(this);">
        <input class="directions-input" id="saddr" name="saddr" type="text" placeholder="enter zip-code"
        value="enter zip-code" onfocus="this.value = this.value=='enter zip-code'?'':this.value;"
        onblur="this.value = this.value==''?'enter zip-code':this.value;" />
        <input type="submit" class="directions-submit" />
        <input type="hidden" name="daddr" value="210+East+Northampton+Street,+Bath,+PA"
        />
        <input type="hidden" name="hl" value="en" />
      </form>
    </p>
    

    onsubmit should be a function call. Also, sacred is undefined. I have made the changes in the above code