jQuery : How to fill the input form automatically from text on webpage?

Question

I have a project to filter 100k-200k of websites to gather the website's owner's name and emails, by viewing it on iframe. What I really need is if I click/select the name on the website I reviewed, it filled the name input form automatically, and the same for emails.

Anybody know the solution? Any response will be appreciated.

*if you need my code, just tell me and I will put it here. It's only an html page with <iframe> and <form>, though.

Here`s the code:

<div class="container container-harvester">
  <div class="harvester-form">
    <%= form_for(:harvesters, :html => {:class => "form-horizontal"}) do |f| %>
        Name: <%= f.text_field :name %>
        Email: <%= f.text_field :email %>
        <%= f.hidden_field :website, :value => "", :class => "website-harvester" %>
        <%= f.hidden_field :skipped, :value => "true" %>
        <%= f.submit "Submit", :class => "btn btn-primary submit-harvester", "data-disable-with" => "Saving..." %>
        <a href="#" class="delete-website btn btn-danger" data-id="">Delete</a>
    <% end %>
  </div>

  <div class="harvester-iframe">
    <iframe name="harvester-iframe" data-id="<%= @websites.first.id %>" src="<%= @websites.first.url %>" frameborder="0">
    </iframe>
  </div>

  <div class="harvester-link">
    <ul>
      <% @websites.each do |w| %>
        <% unless @registered.collect(&:website).include?(w.url) %>
          <li><a class="" href="<%= w.url %>" target="harvester-iframe" data-id="<%= w.id %>"><%= w.url %></a></li>
        <% end %>
      <% end %>
    </ul>
  </div>
</div>

<% content_for :unobtrusive_js do %>
  <script type="text/javascript">
    $(document).ready( function() {
      $('.harvester-link a').on('click', function (e) {
        var url = $(this).attr('href')
          , id = $(this).attr('data-id')
          , $el = $(e.currentTarget);
        $('.harvester-iframe iframe').attr('src', url);
        $('.harvester-iframe iframe').attr('data-id', id);
        $('.website-harvester').attr('value', url);
        $('.delete-website').attr('data-id', id);
        $('.submit-harvester').attr('data-id', id);

        $('.harvester-link a').removeClass('active');
        $el.addClass('active');
      });
      $('.harvester-iframe iframe').on('load', function (e) {
        var url = $(this).attr('src')
          , id = $(this).attr('data-id')
          , $el = $(e.currentTarget);
        $('.delete-website').attr('value', url);
        $('.delete-website').attr('data-id', id);
        $('.website-harvester').attr('value', url);
        $('.submit-harvester').attr('data-id', id);
      });
      $('.delete-website').on('click', function (e) {
        e.preventDefault();
        var id = $(this).attr('data-id');
        API.delete(Routes.harvester_website_path(id)).done(function (response) {
          window.location.reload();
        });
      })
      $('.submit-harvester').on('click', function (e) {
        var id = $(this).attr('data-id');
        API.delete(Routes.harvester_website_path(id)).done(function (response) {
          window.location.reload();
        });
      })
    });
  </script>
<% end %>

Answer 1

Your first problem is the same origin policy of Javascript (http://en.wikipedia.org/wiki/Same-origin_policy). So you have to get the content from that side to your server e.g. with PHP file_get_contents(). So you could display in your iframe this php and as a get the url.

<iframe src="get_content.php?url=THE_URL"></iframe>

and your get_content.php could look like this:

<?php
echo file_get_contents( $_GET["url"] );
?>

To get the content you select in this iframe, this solution might help: how to get selected text from iframe with javascript?

The iframe might not look like its origin, but should work most of the times fine.

To automatically seperate, if you have now selected the name or the email, take a look at Javascript Regular Expressions and especially the match()-Function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match

Hope, this helps.