リンクのURLをモーダルフォームのアクションとして渡すにはどうすればよいですか？

Question

私は、データベースに資格情報を格納する必要があるRailsアプリケーションを作成しています。このデータを保護するために、私はActiveSupport::MessageEncryptorオブジェクトを使用してJSONオブジェクトとして暗号化しています。

私はこのデータを受け入れてデータベースに格納するフォームを持っています。

問題が発生しているのは、ユーザーが情報を変更する必要がある場合です。名前と説明が表示されたテーブルがあります。名前はデータへのリンクです。リンクをクリックするとその情報の暗号化パスワードを尋ねるポップアップが表示されるようにしようとしています。

私はフォームで表示するためのポップアップを取得することができましたが、私はそれがフォームのアクションであるようにリンクのURLを送信する方法です。

これは私がこれまで行ってきたことですが、これを行うより良い方法があれば、私はこの解決策に執着しません。

はJavaScript：

function deselect(e) { 
    $('.pop').slideFadeToggle(function() { 
    e.removeClass('selected'); 
    });  
} 

$(function() { 
    $('.edit_credential').on('click', function() { 
    if($(this).hasClass('selected')) { 
     deselect($(this));    
    } else { 
     $(this).addClass('selected'); 
     $('.pop').slideFadeToggle(); 
    } 
    return false; 
    }); 

    $('.close').on('click', function() { 
    deselect($('.edit_credential')); 
    return false; 
    }); 
}); 

$.fn.slideFadeToggle = function(easing, callback) { 
    return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback); 
}; 

HTML：

<div class="row"> 
    <div class="col-md-8 col-md-offset-2"> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th>Type</th> 
        <th>Name</th> 
        <th>Description</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td><img src="/assets/type.png" alt="Azure" /></td> 
        <td><a class="edit_credential" href="/information/26">My Info</a></td> 
        <td>Information for me</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

<div class="messagepop pop" id="cred_password"> 
    <form method="post" id="new_message" action="/messages"> 
    <p> 
     <label for="password">Encryption Password</label> 
     <input type="password" size="30" name="password" id="password" /> 
    </p> 
    <p> 
     <input type="submit" value="Edit Credential" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a> 
    </p> 
    </form> 
</div> 

私はこのSOポストからこのコードを得た - How to generate a simple popup using jQuery。

私は自分のニーズに合わせて簡単に修正できると思っていましたが、現時点では失敗しました。

TIA

更新：として

私はJSFiddleを作成している要求 - https://jsfiddle.net/urwoqy0m/また、私は、私はこのためにCSSを追加しなかったことを実現し

：

.messagepop { 
    background-color:#FFFFFF; 
    border:1px solid #999999; 
    cursor:default; 
    display:none; 
    margin-top: 15px; 
    position:absolute; 
    text-align:left; 
    width:394px; 
    z-index:50; 
    padding: 25px 25px 20px; 
} 

.messagepop p, .messagepop.div { 
    border-bottom: 1px solid #EFEFEF; 
    margin: 8px 0; 
    padding-bottom: 8px; 
} 

だから私は/messagesに設定されているフォームアクションをURLに変更したいクリックされたリンク。

Answer 1

このライン：

$('#new_message').attr('action', $(this).attr('href')); 

がクリックされた要素の属性hrefの値に、ID new_messageを持つ要素（フォーム）のaction属性を置き換えます。