Javascript, Jquery - Adding url images

Question

i am trying to get an image from a given url. but i am unsure where i am going wrong in my coding. The url link is displayed but not the image of the url

for example, i would like to paste this url link https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg for my coding to display the image and not the link

Any help would be much appreciated

$(function() {
  var dialog, form,

    // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
    emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
    url = $("#url"),
    // url = $('#elementId').attr('src');
    name = $("#name"),
    email = $("#email"),
    company = $("#company"),
    password = $("#password"),
    allFields = $([]).add(url).add(name).add(email).add(company).add(password),
    tips = $(".validateTips");

  function updateTips(t) {
    tips
      .text(t)
      .addClass("ui-state-highlight");
    setTimeout(function() {
      tips.removeClass("ui-state-highlight", 1500);
    }, 500);
  }

  function checkLength(o, n, min, max) {
    if (o.val().length > max || o.val().length < min) {
      o.addClass("ui-state-error");
      updateTips("Length of " + n + " must be between " +
        min + " and " + max + ".");
      return false;
    } else {
      return true;
    }
  }

  function checkRegexp(o, regexp, n) {
    if (!(regexp.test(o.val()))) {
      o.addClass("ui-state-error");
      updateTips(n);
      return false;
    } else {
      return true;
    }
  }

  function addUser() {
    var valid = true;
    allFields.removeClass("ui-state-error");

    valid = valid && checkLength(name, "username", 3, 16);
    valid = valid && checkLength(email, "email", 6, 80);
    valid = valid && checkLength(name, "company", 3, 16);
    valid = valid && checkLength(password, "password", 5, 16);

    valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter.");
    valid = valid && checkRegexp(email, emailRegex, "eg. [email protected]");
    valid = valid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");

    if (valid) {
      $("#users tbody").append("<tr>" +
        "<td>" + url.val() + "</td>" +
        "<td>" + name.val() + "</td>" +
        "<td>" + email.val() + "</td>" +
        "<td>" + company.val() + "</td>" +
        "<td>" + password.val() + "</td>" +
        "</tr>");
      dialog.dialog("close");
    }
    return valid;
  }

  dialog = $("#dialog-form").dialog({
    autoOpen: false,
    height: 510,
    width: 400,
    modal: true,

    buttons: {
      // addClass: "account-btn",
      "GET STARTED": addUser,
      // Cancel: function() {
      //   dialog.dialog( "close" );
      // }
    },
    close: function() {
      form[0].reset();
      allFields.removeClass("ui-state-error");
    }
  });

  form = dialog.find("form").on("submit", function(event) {
    event.preventDefault();
    addUser();
  });

  $("#create-user").button().on("click", function() {
    dialog.dialog("open");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- modal/dialog form -->
<div id="dialog-form" title="">
  <form>
    <fieldset>
      <label for="name">Your Name:</label>
      <input type="text" name="name" id="name" value="username" class="text ui-widget-content ui-corner-all">
      <label for="email">Your Email:</label>
      <input type="text" name="email" id="email" value="[email protected]" class="text ui-widget-content ui-corner-all">
      <label for="company">Your Company Name:</label>
      <input type="text" name="company" id="company" value="example ltd" class="text ui-widget-content ui-corner-all">
      <label for="password">Your Password:</label>
      <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
      <label for="url">Image Url</label>
      <input type="text" name="url" id="url" value="http://example.com/picture.jpg" class="text ui-widget-content ui-corner-all" />
    </fieldset>
  </form>
</div>

<!-- table -->
<div class="L-1-1" id="users-contain" class="ui-widget">
  <h1 class="table_title">Existing Users</h1>
  <table id="users" class="ui-widget ui-widget-content">
    <thead>
      <tr class="ui-widget-header ">
        <th class="first">Image</th>
        <th>Name</th>
        <th>Email</th>
        <th>Company Name</th>
        <th class="last">Password</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>image</td>
        <td>Richill Tamakloe</td>
        <td>[email protected]</td>
        <td>Example Ltd</td>
        <td>coder1</td>
      </tr>
    </tbody>
  </table>
</div>
<button id="create-user">CREATE NEW USER</button>

Inside the <td>{IMG_ELEMENT}</td> to show the image, place the image url inside: <img src="{IMAGE_PATH_GOES_HERE}" /> — Mr. Polywhirl
– Mr. Polywhirl, Commented Feb 11, 2015 at 11:58

somethinghere · Accepted Answer · 2015-02-11 12:00:39Z

1

You should replace this line:

"<td>" + url.val() + "</td>" +

with something like this:

"<td><img src='" + url.val() + "' /></td>" +

so that the actual image is shown in the table cell.

edited Feb 11, 2015 at 12:00

somethinghere

17.5k2 gold badges36 silver badges47 bronze badges

answered Feb 11, 2015 at 11:59

Veselin Vasilev

3,8032 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript, Jquery - Adding url images

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related