窗體導致鏈接不能正常工作？

我正在開發一些有不可編輯的HTML的電子商務網站。他們提供的功能之一是一個「快速」添加到購物車按鈕，當你點擊它時，你仍然在你的頁面上，但一個小窗口彈出窗口顯示你的購物車的內容，包括你剛剛添加的項目。我寫了一個小腳本，當在產品的類別列表中顯示時，將這個快速添加鏈接添加到所有產品中，但是當您單擊此鏈接時，它會將您發送到實際購物車頁面，而無需啓動迷你窗口。窗體導致鏈接不能正常工作？

我想這是因爲它是在一個窗體內發生的。我可能是錯的，但那是我能想到它發生的唯一原因。該培訓相關HTML：

<form class="search_results_section" method="post" name="MainForm" id="MainForm" action="/searchresults.asp" onsubmit="return OnSubmitSearchForm(event, this);"> 
    <!-- other stuff --> 
     <a class="addit" href="/ShoppingCart.asp?ProductCode=BBB-DWCB">Add To Cart</a> 
    <!-- other stuff --> 
</form> 

<a class="addit" href="/ShoppingCart.asp?ProductCode=BBB-DWCB">Add To Cart</a>

的兩個環節是完全一樣的，但是當我點擊形式的外底部的一個，但它確實我想要的東西，這是使你的頁面上，但打開迷你車窗口。形式上的產品本身就帶我到另一個頁面。有沒有人有任何見解，爲什麼這可能會發生，或者我能做些什麼來解決它？

有一件事我已經試過（但不工作）：

$(document).ready(function(){ 
    var $form = $('form[action="/searchresults.asp"]'); 
    $form.submit(function(){ 
     $.post($(this).attr('action'), $(this).serialize(), function(response){ 
      // 
     },'json'); 
     return false; 
    }); 
});

任何幫助表示讚賞！

來源

2013-09-27 user1925805

你能告訴我們結合事件的鏈接代碼？ – ComFreek

同意ComFreek，必須有一個JavaScript事件綁定到該超鏈接。請通過搜索打開彈出窗口的函數的名稱來查找'.on（）'或'.bind（）'事件。 – Blaise

我其實不確定他們是怎麼做的，或者什麼事件都是有約束力的。但我剛剛通過代碼搜索，現在編輯我的問題，並鏈接到我認爲他們在的js文件。我已經搜索「.on」和「.bind」沒有運氣，但也許你會比我更清楚嗎？ – user1925805

您的形式是這樣的

<form class="search_results_section" method="post" name="MainForm" id="MainForm" action="/searchresults.asp" onsubmit="return OnSubmitSearchForm(event, this);">

刪除onsubmit="return OnSubmitSearchForm(event, this);和使用以下代碼

$(document).ready(function(){ 
    $('#MainForm').submit(function(e){ 
     e.preventDefault(); 
     $.post($(this).attr('action'), $(this).serialize(), function(response){ 
      console.log(response) 
     },'json'); // you suppose to return json from the server 
    }); 
});

由於您在表單中有一個ID（MainForm），所以最好在代碼e.preventDefault();中使用它，以防止表單提交（停止提交）的默認行爲。

更新：

此外，在形式，你有一個a標籤像

<a class="addit" href="/ShoppingCart.asp?ProductCode=BBB-DWCB">Add To Cart</a>

使用button/submit相反，這是你的代碼的主要問題是導航到另一個頁面，而不是表單提交。讓你的形式看起來像

<form class="search_results_section" method="post" name="MainForm" id="MainForm" action="/searchresults.asp"> 
    <!-- other stuff --> 

    <input type="submit" class="addit" name="btn_sub" /> 
</form>

更新：

如果您不能編輯表格，需要使用<a>標籤，而不是一個submit按鈕，那麼你必須處理程序的綁定點擊該鏈接的情況下，像

$('#MainForm a.addit').click(function(e){ 
    e.preventDefault(); 
    $.get($(this).attr('href')+'&'+$(this).closest('form').serialize(), function(response){ 
     console.log(response) 
    },'json'); 
});

而且，在服務器端，從$_GET陣列獲取值，因爲使用的是params與您的網址<a>標記（href="/ShoppingCart.asp?ProductCode=BBB-DWCB"），所以只需將序列化的表格數據添加到當前url的末尾，並避免post（如果不是必要的話）。所以，你url最終會看起來像

/ShoppingCart.asp?ProductCode=BBB-DWCB&forminput1=value1&forminput2=value2

因爲這個代碼

$(this).attr('href')+'&'+$(this).closest('form').serialize()

來源

2013-09-27 20:38:15

不幸的是，所有的表單內容都是不可編輯的，除非我有辦法通過jQuery來完成它。 – user1925805

不可編輯！爲什麼？你如何獲得表格？ –

該網站正在使用電子商務服務Volusion。他們爲他們的網站提供的大部分代碼都是自動生成的，並且直接不可編輯，但我可以使用JavaScript。然而，沒有PHP。 – user1925805

如果你提交表單回本身，你不需要指定動作：

<form name="MyForm" method="post" action="" ...>

來源

2013-09-27 20:37:56

窗體導致鏈接不能正常工作？

回答

相關問題