OnSubmit change DOM elements values and attributes

Question

I have have two text input elements:

<input type="text" id="Title"/> 
<input type="text" id="URL"/>

One dropdown menu and a submit button. The select drop down menu has several options whose value equals the ID of an element in the page.

If you click the submit button it will change/fill values in the div element whose ID is selected in the dropdown menu.

<img src="https://www.google.com/s2/favicons?domain=$URL" alt="Icon" title="icon">
<a href="$URL" title="$TITLE"> $TITLE </a><br />

into the div with the ID selected in the drop-down menu.

Example

Title input value = "Google"
URL input value = "http://www.google.com"
Select option ID = "Search_Engines"

And you'd press "Submit"

Then that'd permanently write into the element with the id Search_Engines

<img src="https://www.google.com/s2/favicons?domain=http://www.google.com" alt="Icon" title="icon">  
<a href="http://www.google.com" title="Google"> Google </a><br />

Is there anyway this can be achieved?

With Javascript you can access the attribute you want to change. It's basic Javascript and you should be able to find it online, "How to change image source javascript" "Get input value javascript" "Onsubmit event javascript" — Alex

Som1 Som1 · Accepted Answer · 2014-10-31T14:11:51

Javascript:

<script>
        function change(){
           var Title = document.getElementById('Title').value;
           var URL = document.getElementById('URL').value;
           var Element = document.getElementById('Element').value;
           var div = document.getElementById(Element);
           div.innerHTML = Title + " " + URL;
           return false;
        }
    </script>

And html Form

<form>
        <input type="text" name="Title" id="Title"><br />
        <input type="text" name="URL" id="URL"><br />

        <select name="Element" size="1" id="Element">
            <option>1</option>
            <option>2</option>
        </select>
        <input type="submit" name="submit" value="submit" onclick="return change()">
    </form>
    <div id="1">text</div>
    <div id="2">text</div>

Guess there are better solutions but works.

OnSubmit change DOM elements values and attributes

1 Answers