CODEWITHSUNDEEP
javascriptgoogle-chrome
Linto
Linto

Reputation: 1282

javascript form submit does not work in chrome

I have the following html:

<body>
<form action="site1">
    <input type="image" name="submit" border="0" src="images/front/search_travel.png" alt=""  onclick="provider_popup();"/>
</form>

<form  name="frmRight1"  action="site2" target="_blank" >
    <input type="hidden" name="sector_id" id="sector_id" value="90" />
    <input type="submit" style="visibility:hidden;" />
 </form>

 <script type="text/javascript">
 function provider_popup (){
        document.frmRight1.submit();
        return false;
  } 
</script>
</body>

And while I submit the button with name submit, I get one another tab and it will load 'site2'

But this process is not working in chrome.

Let me know the reason

Upvotes: 5

Views: 39559

Answers (5)

user2737761
user2737761

Reputation: 115

I had the same problem. Took me all day. In my case the problem with Chrome was that Chrome was blocking my actions and stating that Chrome was blocking popups. Here is the code I used to solve this:

/** This is the script that will redraw current screen and submit to paypal. */
echo '<script>'."\n" ;
echo 'function serverNotifySelected()'."\n" ;
echo '{'."\n" ;
echo '    window.open(\'\', \'PayPalPayment\');'."\n" ;
echo '    document.forms[\'paypal_form\'].submit();'."\n" ;
echo '    document.forms[\'server_responder\'].submit();'."\n" ;
echo '}'."\n" ;
echo '</script>'."\n" ;

/** This form will be opened in a new window called PayPalPayment. */
echo '<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" name="paypal_form" method="post" target="PayPalPayment">'."\n" ;
echo '<input type="hidden" name="cmd" value="_s-xclick">'."\n" ;
echo '<input type="hidden" name="custom" value="'.$transaction_start.'">'."\n" ;
echo '<input type="hidden" name="hosted_button_id" value="'.$single_product->hosted_button_id.'">'."\n" ;
echo '<table>'."\n" ;
echo '    <tr>'."\n";
echo '        <td><input type="hidden" name="'.$single_product->hide_name_a.'" value="'.$single_product->hide_value_a.'">Local</td>'."\n" ;
echo '    </tr>'."\n" ;
echo '    <tr>'."\n" ;
echo '        <td>'."\n" ;
echo '        <input type="hidden" name="'.$single_product->hide_name_b.'" value="'.$single_product->hide_value_b.'" />'.$single_product->short_desc.' $'.$adj_price.' USD'."\n" ;
                // <select name="os0">
                //     <option value="1 Day">1 Day $1.55 USD</option>
                //     <option value="All Day">All Day $7.50 USD</option>
                //     <option value="3 Day">3 Day $23.00 USD</option>
                //     <option value="31 Day">31 Day $107.00 USD</option>
                // </select>
echo '        </td>'."\n" ;
echo '    </tr>'."\n" ;
echo '</table>'."\n" ;
echo '<input type="hidden" name="currency_code" value="USD">'."\n" ;
echo '</form>'."\n" ;

/** This form will redraw the current page for approval. */
echo '<form action="ProductApprove.php" name="server_responder" method="post" target="_top">'."\n" ;
echo '<input type="hidden" name="trans" value="'.$transaction_start.'">'."\n" ;
echo '<input type="hidden" name="prod_id" value="'.$this->product_id.'">'."\n" ;
echo '</form>'."\n" ;

/** No form here just an input and a button.  onClick will handle all the forms */
echo '<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" alt="PayPal - The safer, easier way to pay online!" onclick="serverNotifySelected()">'."\n" ;
echo '<img alt="" border="0" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">'."\n" ;

This code does not appear as a popup to Chrome. It is the code for just one button. When the button is pushed, it changes the current screen to pre-approval AND opens a new page for PayPal to fill.

What I discovered is that if the new window opens WITH a button push, then Chrome does not treat it as a popup. If you try to open that new window with a timer, then Chrome treats the timed window opening as a popup.

Upvotes: 1

James McCormack
James McCormack

Reputation: 9944

Okay, your need to submit both forms simultaneously wasn't clear. This was tricky. The only way I found to do it was to introduce a small wait time:

<script type="text/javascript">
function provider_popup (){
  document.forms['frmRight1'].submit();
  setTimeout("doPost()", 10);
  return false;
}

function doPost()
{
    document.forms[0].submit();
}  
</script>

Upvotes: 0

James McCormack
James McCormack

Reputation: 9944

Okay, you also needed to prevent the image button from submitting its form. Your function returned false, but you need to return that to the onclick, hence the problem. Do it like this:

onclick="return provider_popup();"

I recommend you ditch the <input type="image"> approach anyway, and use a pure element with an onclick attribute. Makes your HTML much simpler i.e.

<body>
    <img src="images/front/search_travel.png" alt="Submit" onclick="provider_popup();" />

    <form  name="frmRight1"  action="site2" target="_blank" >
        <input type="hidden" name="sector_id" id="sector_id" value="90" />
        <input type="submit" style="visibility:hidden;" />
    </form>

     <script type="text/javascript">
     function provider_popup () {
            document.forms['frmRight1'].submit();
      } 
    </script>
</body>

Another alternative is to wrap the image in an anchor <a href... and apply the onclick to that.

Upvotes: 5

James McCormack
James McCormack

Reputation: 9944

document.frmRight1 would only work in some browsers.

try

document.forms['frmRight1'] instead.

Alternatively give the form an id like <form id="frmRight1" name... and refer to it via document.getElementById('frmRight1').

See this for more info about properties of the document: http://www.w3schools.com/jsref/dom_obj_document.asp

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 77966

Replace

document.frmRight1.submit();

with 

document.forms["frmRight1"].submit();

Upvotes: 0

Related Questions