テキストエリアの文字をjqueryのappendを使用してliに追加、表示する方法

現在HTML,Javascript,jqueryを用いてサイトを作成しています。
自分の今の技術ではできないと判断したので質問させていただきます。

今実現したいことは2つのテキストエリアに入力されている文字をjqueryのappendを用いてulの中のliに追加、表示することです。

例えば

HTML
1<span>選択：</span><input type="text" size="15" class="sentaku" readonly="readonly" value="img1">
2<span>所有者：</span><input type="text" size="10" class="name" value="name1">

のようなテキストエリアがあり、この中の文字をliに「選択したもの＋所有者の名前」というように追加するというようなものです。

現在下記のコードでliを追加することはできますがinputの内容をliに追加し表示する方法がわかりません。

jquery
1$(function(){
2
3  var x = 0;
4  $(".map_tuika").on("click", function() {
5
6    $(".show_map > ul").append("<li></li>");
7  });
8});
9

当初は選択、所有者のクラスを使ってvalueを指定し追加すればいいのかなと思いましたがうまくいきませんでした。

よろしくお願いいたします。

kei344

2017/04/22 04:21

一般的に「テキストエリア」は<textarea>を指します。この場合「テキスト」のほうが良いと思います。また、「画像のid」とはどういうことでしょうか。具体的に入力文字列例を提示してください。あと、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

dragon_2tree

2017/04/22 05:53

修正ありがとうございます。画像の件はあまり関係のなかったことなので忘れてください。申し訳ないです。

kei344

2017/04/22 05:55

質問本文は編集することが可能なので、編集よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLを見ると、テキストエリアではなく、テキストボックスのようですが。
「画像のid」がよくわからなくて、結果的にどうなれば良いのかわかりかねますが、「選択」テキストボックスがreadonlyなので、とりあえず初期値「img1」を入れておきました。

これで良いのでしょうか？

削除ボタンを追加しました。レイアウトなどはご自身でお考えください。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Add a List Item from Textboxes</title>
6<script src="jquery-3.1.1.min.js"></script>
7<script>
8$(function() {
9
10	$(".map_tuika").on("click", function() {
11
12		$(".show_map > ul").append(
13			$("<li />")
14				.text($(".sentaku").val() + " " + $(".name").val())
15				.append(
16					$("<input />", {
17						type    : "button",
18						"class" : "delete",
19						value   : "削除"
20					})
21				)
22		);
23	});
24
25	// ".delete"は新しく追加された要素なので、上の要素から指定する。
26	$(".show_map > ul").on("click", ".delete", function() {
27		// 削除ボタンの1つ上の要素配下を削除する。
28		$(this).parent().remove();
29	});
30});
31</script>
32</head>
33<body>
34<span>選択：</span><input type="text" size="15" class="sentaku" readonly="readonly"  value="img1">
35<span>所有者：</span><input type="text" size="10" class="name">
36<input type="button" class="map_tuika" value="追加">
37
38<div class="show_map">
39  <ul>
40  </ul>
41</div>
42</body>
43</html>

投稿2017/04/22 05:07

編集2017/04/22 07:18

naomi3

総合スコア1105

dragon_2tree

2017/04/22 05:50

ご回答ありがとうございます。余計な情報を入れて混乱させてしまい申し訳ありません。したかったことはあなたの回答で合っています。ありがとうございます。画像をクリックすることでテキストのvalueに画像のidを内容として入力するようjqueryで書いていただけです。画像をクリック→画像につけたidをテキストに挿入といった感じです。ほぼ関係ないので忘れてください笑もう一つ質問なのですが、このコードを用いてliを追加していき、とある一つのliだけ削除したい場合どうすればいいでしょうか。理想としては追加したliの最後に削除ボタンがあることなのですが…。よろしくお願いいたします。

dragon_2tree

2017/04/22 07:36

完璧です！ご回答ありがとうございました！！

行動規範の内容に同意します