CODEWITHSUNDEEP
javascriptjqueryruby-on-rails
Russell Seymour
Russell Seymour

Reputation: 1423

How can I pass the URL of a link as the action for a modal form?

I am writing a Rails application that requires users to store credential information in the database. To protect this data I am encrypting it as a JSON object using the ActiveSupport::MessageEncryptor object.

I have got the form working that accepts this data and puts in the database.

Where I am having issues is when a user needs to be modify the information. I have a table with the name and description displayed. The name is a link to the data. I am trying to make it so that when they click on the link a popup is displayed asking for the encryption password for that information.

I have been able to get the popup to display with a form, but what I have not worked out is how to send the URL of the link so that it is the action of the form.

This is what I have so far, but I am not wedded to this solution if there is a better way to do this.

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>

I got this code from this SO post - How to generate a simple popup using jQuery.

I was hoping I would be able to easily modify it for my needs but I have failed at the moment.

TIA

Update:

As requested I have created a JSFiddle - https://jsfiddle.net/urwoqy0m/

Also I realise that I did not add the CSS for this:

.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;
}

So I want to change the form action which is set to /messages to the URL for the link that is clicked on.

Upvotes: 0

Views: 49

Answers (1)

RiesvGeffen
RiesvGeffen

Reputation: 1589

This line:

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

will replace the action attribute of the element (form) with ID new_message, to the value of the clicked element attribute href.

Upvotes: 1

Related Questions