1

誰かがメーリング リストに参加するために Web サイトに入力する標準の iContact サインアップ フォームを変更しようとしています。デフォルトでは、コードはユーザーがサインアップを試みた後、成功ページまたはエラー ページにリダイレクトします。

私がやりたいことは、ユーザーをリダイレクトせず、ページをリロードしないことです: ユーザーがフォームを正常に送信すると、フォーム フィールドが消え、「参加していただきありがとうございます!」というメッセージが表示されます。メッセージのタイプは、フォームがあった場所に表示されます (ページをリロードする必要はありません)。

私はプログラミングの初心者ですが、jQuery と AJAX でこれを達成できると確信しています。いじってみましたが、AJAX を使ったことがないので、まだ成功していません。どんな助けでも大歓迎です。

HTML ページにあるフォームのコードは次のとおりです (アカウント情報を置き換えました)。

<form method="post" action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignupZZZZ" accept-charset="UTF-8" onsubmit="return verifyRequiredZZZZ();" >
<input type="hidden" name="redirect" value="http://www.yoursite.com/newsletter/accepted.html" />
<input type="hidden" name="errorredirect" value="http://www.yoursite.com/newsletter/error.html" />

<div id="SignUp">
<table width="212" class="signupframe" border="0" cellspacing="0" cellpadding="5">
<tr>
  <td width="114" align="right" valign="top">
    <font size="1" face="Arial,Helvetica, sans-serif">*</font> <font size="2">First Name:</font>
  </td>
  <td width="78" align="left">
    <input name="fields_fname" type="text" size="13" maxlength="100" />
  </td>
</tr>
<tr>
  <td valign="top" align="right">
    <font size="1" face="Arial,Helvetica, sans-serif">*</font> <font size="2">E-mail:</font>
  </td>
  <td align="left">
    <input name="fields_email" type="text" size="13" maxlength="100" />
  </td>
</tr>
<tr>
  <td colspan="2"> <font size="1">*</font><font size="2"> = Required Field</font></td>
  </tr>
<tr>
  <td colspan="2"> <input type="image" name="Submit" value="Submit"  src="../images/join-hdr.jpg" alt="Join our E-mail List" /></td>
  </tr>
</table>
<input type="hidden" name="listid" value="XXXXX" />
<input type="hidden" name="specialid:XXXXX" value="ZSMM" />
<input type="hidden" name="clientid" value="YYYYYY" />
<input type="hidden" name="formid" value="ZZZZ" />
<input type="hidden" name="reallistid" value="1" />
<input type="hidden" name="doubleopt" value="0" />
</div>
</form>
<script src="../Scripts/icontact.js" type="text/javascript"></script>

フォームが参照するスクリプトのコードは次のとおりです。

var icpFormZZZZ = document.getElementById('icpsignupZZZZ');

if (document.location.protocol === "https:")

    icpFormZZZZ.action = "https://app.icontact.com/icp/signup.php";
function verifyRequired2745() {
  if (icpFormZZZZ["fields_fname"].value == "") {
    icpFormZZZZ["fields_fname"].focus();
    alert("The First Name field is required.");
return false;
  }
  if (icpFormZZZZ["fields_email"].value == "") {
    icpFormZZZZ["fields_email"].focus();
    alert("The E-mail field is required.");
    return false;
  }


return true;
}

追加情報が必要な場合はお知らせください。どうもありがとう！

4

1 に答える 1

0

上記の質問の仕方がわかりませんでした。しかし、私は解決策を思いつきました：

ページの最初に表示される部分からフォームを削除しました。次に、ユーザーが「電子メール リストに参加する」タイプのグラフィックをクリックしたときに (その中に iframe を含む) 生成される fancyBox を作成しました。次に、fancyBox 内にあるフォームをユーザーが送信すると、ユーザーは成功ページにリダイレクトされますが、ページは fancyBox 内で生成されます。その後、ユーザーは fancyBox を閉じて、元のページに戻ることができます。ユーザーがリダイレクトされないため、これは私にとってはうまくいきます。

うまくいけば、これは他の誰かにも役立ちます！

于 2012-08-06T12:23:03.223 に答える