[英]How to take form input value and insert into div inner html
我試圖能夠創建更多的div類,它們充當表單提交中的按鈕。 該表單有2個字段,一個按鈕的名稱和一個鏈接(例如,用戶輸入Example作為用戶輸入/ pages / example作為鏈接的名稱)。 名稱應為按鈕創建名稱,鏈接輸入應為該div類創建鏈接。
我得到的部分是按鈕將div類添加到行中,但是由於某種原因從輸入中獲取值並將其添加到div類中,innerhtml無法正常工作。
HTML:
<button onclick="showDiv('toggle')" class="addbutton">
<img src="">
</button>
<div id="toggle" class="buttonform">
<form id="form1" class="form1">
<input type="button" value="x" class="close1"></input>
<input class="buttonname" id="buttonname" type="text" placeholder="Button Name" onkeydown="myFunction()">
< /br>
<input class="buttonlink" id="buttonlink" type="text" placeholder="Link, ex:/pages/personal" onchange="myFunction()">
<input class="addbutton1" type="button" value="Submit"></input>
</form>
</div>
<div class="categories">
<ul class="onlinecategories"> <a href=""><li class="oclist">1</li></a>
<a href=""><li class="oclist">2</li></a>
<a href=""><li class="oclist">3</li></a>
<a><li class="oclist" id="addclass" contenteditable="true" style="display:none;"></li></a>
</ul>
</div>
CSS:
#toggle {
z-index:15;
}
.madebutton:hover {
opacity:.8;
}
.addbutton:hover {
opacity:.9;
}
.categories {
width:100%;
}
.onlinecategories {
width:100%;
}
.oclist {
width:90%;
height:30px;
list-style:none;
border-radius:10px;
text-align:center;
margin-bottom:10px;
cursor:pointer;
}
.onlinecategories li {
background: rgb(244, 71, 71);
}
li.oclist:hover {
opacity:.8;
}
.addbutton {
margin-top:7%;
display:block;
width:50px;
height:30px;
background-color:green;
text-align:center;
float:right;
border-radius:5px;
}
.buttonform {
display:none;
float:right;
height:100px;
width:200px;
}
.close1 {
float:right;
width:20px;
text-align:center;
background-color:red;
cursor:pointer;
}
.addbutton1 {
text-align:center;
background-color:green;
cursor:pointer;
z-index:100;
}
jQuery的:
$('.addbutton1').click(function () {
$('.oclist:last').before('<div class="oclist" id="addclass" style="color:black; margin-bottom:12px;border-radius:10px; max-height:32px; background-color:rgb(244, 71, 71); text-align:center; font-family:Cardo; font-style:italic;"type="button" </div><span class="remove" style="z-index:10;"><img style="margin-top:1%; float:right; cursor:pointer; margin-right:2%;"src=""></img></span>');
});
$('.categories').on('click', '.remove', function () {
$(this).parent().remove();
});
function showDiv(toggle) {
document.getElementById(toggle).style.display = 'block';
}
$(".close1").click(function () {
$('#toggle').hide();
});
function myFunction() {
$("#form1").submit(function () {
var input_taker = document.getElementById('buttonname').value;
document.getElementById('testig').innerHTML = input_taker;
});
}
JSFiddle: http : //jsfiddle.net/kunwarsethi/dLv0oxeb/1/
JSFiddle似乎沒有用,但在我的網站上有用。
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
希望這會有所幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.