如何将值从 JavaScript 发送到表单并获取该值作为表单 ID

Question

I have a fullcalendar script. I have already created a event for today (for eg), now I want to edit it, so on click on today's date I have to send a value from a JavaScript to my form to edit this event.

This is my onclick JavaScript function

var initialize_calendar;
initialize_calendar = function() {
  $('.calendar').each(function(){
      eventClick: function(event, jsEvent, view) {
        $.getScript(event.edit_url, function() {
          $('#event_id').val(event.id);
        });
      }
    });
  })
};
$(document).on('turbolinks:load', initialize_calendar);

The value from $('#event_id').val(event.id); I'm getting in my form as 32. You can see it in form input field below form

<form class="simple_form edit_event" id="edit_event_#{#event_id}" action="/securities/events/#{#event_id}" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓">
<input type="hidden" name="_method" value="patch">
        <input type="hidden" value="32" name="event[id]" id="event_id">
</form>

My problem is

The same event id 32, I want to append in my form id as id="edit_event_32" and in form action action="/securities/events/32" .

Answer 1

You can use the jQuery parent() method to get the parent of an element. After getting the parent, you can just set the id attribute using the jQuery attr() method. The code would be as below.

$('#event_id').parent().attr('id','edit_event_'+event.id);

Now, to set the form action, you can still use the same technique. The code would be as below.

$('#event_id').parent().attr('action','/securities/events/'+event.id);