Adding Form Input Values to InnerHTML Output

Question

I am trying to code a form that creates a custom sentence based on the inputs a user selects. For example, my form has one written inputs and two dropdowns. I want this data added to my innerHTML. Say I wanted to create a custom sentence about a dog the layout would look like this:

My dog's name is (value from input 1). (Value from dropdown 1) loves to play fetch. My dog is (value from dropdown 2).

function sentence() {
  document.getElementById("s1").innerHTML = "My dog's name is (value from input 1). (Value from dropdown 1) loves to play fetch. My dog is (value from dropdown 2).";
}

table,
td,
th {
  margin-left: auto;
  margin-right: auto
}

.display {
  display: flex;
  align-items: center;
  justify-content: center;
}

p {
  text-align: center;
}

<table>
  <tr>
    <td> <input type="text" placeholder="Your Dog's Name" name="name" maxlength="100"></td>
    <td>
      <select name="gender">
        <option value="He">He</option>
        <option value="She">She</option>
      </select>
    </td>
    <td>
      <select name="size">
        <option value="Big">Big</option>
        <option value="Medium">Medium</option>
        <option value="Small">Small</option>
      </select>
    </td>
</table>
<br>
<hr>
<br>
<p id="s1">

</p>
<br>

<div class="display">
  <button onclick="sentence()"> Button </button>
</div>

<p id="s1">

</p>

You can get the relevant data using document.getElementById('theid').value. All you need to do is change name to id (name is for forms that get sent to the server). — user5734311
– user5734311, Commented Jun 29, 2018 at 22:28

oldboy · Accepted Answer · 2018-06-29 22:27:32Z

2

The following code will do the trick!

function sentence()
{
  const v1 = document.getElementsByTagName('input')[0].value,
        v2 = document.getElementsByTagName('select')[0].value,
        v3 = document.getElementsByTagName('select')[1].value
  document.getElementById("s1").innerHTML="My dog's name is " + v1 + ". " + v2 + "loves to play fetch. My dog is " + v3 + ".";
}

answered Jun 29, 2018 at 22:27

oldboy

6,0767 gold badges43 silver badges103 bronze badges

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

2 Comments

Phil Motto Over a year ago

Beautiful. Thanks a million.

oldboy Over a year ago

@PhilMotto if it's the answer vote it up or select it as the answer <3 (that's how this site works.) and welcome to the community!

GawiSh · Accepted Answer · 2018-06-29 23:03:06Z

Try this code :)

function sentence() {
	var nameDog = document.getElementById( "name" ),
		
		genderDog = document.getElementById( "gender" ),
		
		sizeDog = document.getElementById( "size" ),
		
		result = document.getElementById( "s1" );
	
	if ( nameDog.value == "" ) {
		
		result.innerHTML = "Write name your dog's";
		
	} else {
		
		result.innerHTML = "My dog's name is " + nameDog.value + ", " + genderDog.value + " loves to play fetch. My dog is " + sizeDog.value;
		
	}
};

table, td, th {
	margin-left: auto;
	margin-right: auto
}

.display {
	display: flex;
	align-items: center;
	justify-content: center;
}

p {
	text-align: center;
}

<table>
	<tr>
		<td><input id="name" placeholder="Your Dog's Name" type="text">
		</td>

		<td><select id="gender">
			<option value="he">
				he
			</option>

			<option value="she">
				she
			</option>
		</select>
		</td>

		<td><select id="size">
			<option value="big">
				big
			</option>

			<option value="medium">
				medium
			</option>

			<option value="small">
				small
			</option>
		</select>
		</td>
	</tr>
</table>
<br>

<hr>
<br>


<div class="display">
	<button onclick="sentence()">Button</button>
</div>


<p id="s1">
</p>

Collectives™ on Stack Overflow

Adding Form Input Values to InnerHTML Output

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related