1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How do I create a simple form that can edit the text links on an html page?

Discussion in 'HTML & Website Design' started by mike323, Jul 6, 2020.

  1. #1
    I'm trying to create a simple personal offline home page with text links that can be edited without the user having to go into the html code.

    I have the home page with some blank links done but need some way to edit the links from a form for people who don't understand html.
    SEMrush
    Maybe there is a simple code I could add to each link entry where you can right click it and a mini pop up editor opens like when you right click on a link in your firefox toolbar, click on "properties" and you can edit the link?

    Thanks for any help!
     
    Last edited: Jul 6, 2020
    mike323, Jul 6, 2020 IP
    SEMrush
  2. sarahk

    sarahk iTamer Staff

    Messages:
    26,386
    Likes Received:
    3,931
    Best Answers:
    111
    Trophy Points:
    665
    #2
    I'd probably do it using jquery but it's equally do-able with vanilla javascript.

    Page comes up
    Click links
    Box pops up
    Paste link
    Save
    Stored in Javascript Local storage.
     
    sarahk, Jul 6, 2020 IP
    mike323 likes this.
  3. mike323

    mike323 Well-Known Member

    Messages:
    1,590
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    160
    #3
    Thank you ..sounds exactly like what I'm looking for....I will investigate this further.
     
    mike323, Jul 6, 2020 IP
  4. CactusWren

    CactusWren Greenhorn

    Messages:
    35
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    18
    #4
    I spun up a minimal implementation for you.
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
     <title>URL editor</title>
    </head>
    
    <body>
    
     <form name="form1">
     <p>
     Here is the link:
     <a href="#" id="link1">Link1</a>
     <p>
     <p>
     Enter the link's new name:
     <input type="text" name="newName">
     <p>
     Enter the new link url:
     <input type="url" name="newUrl">
     </p>
    
     <input type="button" name="button" value="Change Link">
    
     </form>
    
     <script>
     myForm = document.form1;
    
     newName = form1.newName;
     newUrl = form1.newUrl;
    
     linkToBeChanged = document.getElementById("link1");
    
     button = form1.button;
    
     function editLink() { 
     linkToBeChanged.innerHTML = newName.value;
     link1.setAttribute("href", newUrl.value);
     }
    
     button.addEventListener("click", editLink);
    
     </script>
    </body>
    </html>
    
    
    Code (markup):
     
    CactusWren, Jul 22, 2020 IP
    mike323 likes this.
  5. mike323

    mike323 Well-Known Member

    Messages:
    1,590
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    160
    #5
    I just saw this...You're phenomenal! If this works I want to throw some cash at you for your work if you let me. Very cool of you. Thank you so much. I will text it out as soon as I find the time!

     
    mike323, Jul 26, 2020 IP
  6. mike323

    mike323 Well-Known Member

    Messages:
    1,590
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    160
    #6
    Well, the link changes don't save when you refresh the page but it was a valiant effort!
     
    mike323, Jul 26, 2020 IP
  7. CactusWren

    CactusWren Greenhorn

    Messages:
    35
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    18
    #7
    I think we could use localstorage to make it permanent (well, permanent up until they manually clear their browser/cookies/etc). The program I made only works for a single link. You wanted to be able to edit a series of links, right? If I had a better idea of your goals, I can try to code it up. It's good practice for me, plus people on this site have been very generous helping me out previously.
     
    CactusWren, Jul 26, 2020 IP
    mike323 likes this.
  8. mike323

    mike323 Well-Known Member

    Messages:
    1,590
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    160
    #8
    Yes I wanted to be able to edit links from within the browser essentially but have the save stick.

    It actually can be done through a right click "inspect element" and then "edit html", then "save file". But the page is for my father and I'm not sure if that route will be too complicated to remember because it takes him into the html.

    I imagine what I want would involve a lot of code and slow down the launching of the page, which kind of defeats the purpose.
     
    mike323, Jul 26, 2020 IP
  9. mike323

    mike323 Well-Known Member

    Messages:
    1,590
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    160
    #9
    I have say while that code is not quite what I was looking for, it's pretty fun. Thanks for doing that.
     
    mike323, Jul 26, 2020 IP
  10. CactusWren

    CactusWren Greenhorn

    Messages:
    35
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    18
    #10
    I think that JavaScript can't edit the source file. I believe that can be done with PHP. Usually they recommend that one uses a database for security purposes. Probably a bare-bones WordPress installation with some kind of plugin could do it and still load in a few seconds.
     
    CactusWren, Jul 26, 2020 IP
    mike323 likes this.