remotely submit form

gistfile1.txt

<div class="contacts-cnt">
  <%= form_tag admin_user_update_users_path(:id=>@list.user.id), :method => 'post',:id => "#{@list.id}" do%>
  <div class="admin-edit-form-row">
    <div class="user-edit-form-left">Contact Name  </div>
    <div class="user-edit-form-right">
    <%=text_field_tag :first_name, "#{@list.user.first_name.blank? ? ' ' : @list.user.first_name}",:placeholder => "Name" %> 
  </div>
  <div class="admin-edit-form-row">
    <div class="user-edit-form-left">Mobile : </div>
    <div class="user-edit-form-right">
   <%=text_field_tag :mobile, "#{@list.user.phone_number.blank? ? ' ' : @list.user.phone_number}",:placeholder => "Mobile" %>  
    </div>
  </div>
  <div class="admin-edit-form-row">
    <div class="user-edit-form-left">Email : </div>
    <div class="user-edit-form-right">
   <%=text_field_tag :email, "#{@list.user.email.blank? ? ' ' : @list.user.email}",:placeholder => "Email" %>
    </div>
  </div>
  <div class="admin-edit-form-row">
    <div class="user-edit-form-left">&nbsp;</div>
    <div class="user-edit-form-right"><button type="button" class="cancel-button">Cancel</button>
     <%=submit_tag("Save", :class => "save-button") %>
    </div>
    </div>
    <%end%>
  </div>
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 def user_location
    @location = Location.create(:zip => params["location"]["zip"], :city => params["location"]["city"])
    Listing.find(params[:listing_id]).update_attributes(location_id: @location.id)
    @listing=params[:listing_id]
     flash[:notice] = "Location has been saved successfully."
    respond_to :js 
  end

  def user_listing_details
    Listing.find(params[:listing_id]).update_attributes(:title => params["listing"]["title"], :description => params["listing"]["description"], :item_price => params["listing"]["item_price"], :meta_tag => params["listing"]["meta_tag"])
    @doc_listing=params[:listing_id]
     flash[:notice] = "Listing has been saved successfully."
    respond_to :js 
  end
  
  
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++=
  in js .erb
  $('.accordion_body').hide();
$("#flash").html("<%= escape_javascript(render(:partial => "layouts/flash_message"))%>");
$('.doc_listingID').val("<%=@doc_listing%>");
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
third form do klikre this

<div class="accordion_body" style="display: none;">
  <%=form_for(@list, :url => user_listing_details_listings_path, :html => {:remote => true}) do |f| %>
  <div class="admin-edit-form-cnt adminfunction role-edit editmanage-listing cnt-responsive add-your-details">
    <div class="admin-edit-form-row">
      <div class="user-edit-form-left">Listing Type : </div>
      <div class="user-edit-form-right ">
       <!--  <form action="">
          <input type="radio" name="list" value="Buyer">Buyer 
          <input type="radio" name="list" value="Seller">Seller
        </form> -->
      </div>
    </div>
     <%=hidden_field_tag :listing_id ,'', :class=>"listing_ID" %>
    <div class="admin-edit-form-row">
      <div class="user-edit-form-left">Title : </div>
      <div class="user-edit-form-right"><%= f.text_field :title, :placeholder => "Title", :class => "list-title" %></div>
    </div>
    <div class="admin-edit-form-row">
      <div class="user-edit-form-left">Description : </div>
      <div class="user-edit-form-right"><%= f.text_area :description, rows: 5, cols: 35 %></div>
    </div>
    <div class="admin-edit-form-row">
      <div class="user-edit-form-left">Price : </div>
      <div class="user-edit-form-right"><span class="pound-currency"><span>&#163;</span><%= f.text_field :item_price, :placeholder => "price" %></span></div>
    </div>
    <div class="admin-edit-form-row">
      <div class="user-edit-form-left">Search Keyword: </div>
      <div class="user-edit-form-right"><%= f.text_field :meta_tag, :placeholder => "Title", :class => "list-title" %></div>
    </div>
  </div>
  <%=f.submit 'Continue',:class=>"continue-accordion"%>
  <%end%>
</div>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

upload file in html + backed in ruby or another language fallow

Step 1 add form

Step 2 Ajax <script type="text/javascript"> $('body').on('click', '#upload', function(e){ e.preventDefault(); var formData = new FormData($(this).parents('form')[0]); $.ajax({ url: '/listings/document_upload', beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))}, type: 'POST', xhr: function() { var myXhr = $.ajaxSettings.xhr(); return myXhr; }, success: function (data) { alert("Data Uploaded: "+data); $('.accordion_body').fadeout(); }, data: formData, cache: false, contentType: false, processData: false }); return false; }) </script>

Step 3

def document_upload
params[:avatar].each do |file|
@document=Document.new avatar: file
doc_type= check_doc_type(@document.avatar_file_name)
# @document.listing_id=params[:document][:listing_id]
@document.doc_type=doc_type
@document.save
p @document

end
render :text=>"sucess"

end
IF u need preview
dont forget to add a empty div as uploadPreview

<script> function readImage(file) { var reader = new FileReader(); var image = new Image(); reader.readAsDataURL(file); reader.onload = function(_file) { image.src = _file.target.result; // url.createObjectURL(file); image.onload = function() { var w = this.width, h = this.height, t = file.type, // ext only: // file.type.split('/')[1], n = file.name, s = ~~(file.size/1024) +'KB'; $('#uploadPreview').append('

'+w+'x'+h+' '+s+' '+t+' '+n+'
'); }; image.onerror= function() { alert('Invalid file type: '+ file.type); }; }; } $("#choose").change(function (e) { if(this.disabled) return alert('File upload not supported!'); var F = this.files; if(F && F[0]) for(var i=0; i