如何将链接的网址作为模式表单的操作传递?

时间:2017-05-11 13:59:02

标签: javascript jquery ruby-on-rails

我正在编写一个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。

1 个答案:

答案 0 :(得分:1)

这一行:

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

会将ID为action的元素(表单)的new_message属性替换为所点击的元素属性href的值。