如何在不刷新页面的情况下更改表单输入中的预览值

Question

我的形式很简单..

这是代码

<form action="aksi.php?opsi=edit&aksi=update" method="post">
    <input name="cabangID" type="hidden" value="'.$row['id'].'"/>

    <div class="form-group"><label>Image (link)</label><input type="text" class="form-control input-xlarge" name="image_cabang" value="'.$row['image'].'"/>
        <a href="'.$row['image'].'" target="_blank"><img src="'.$row['image'].'" width="420" height="275"></a>
    </div>

</form>

现在，我想改进这样的代码.. 当我更改图像链接时，预览图像会自动更改而不刷新页面 ..
我可以使用的代码是什么？谢谢

Answer 1

尝试此操作（例如，将输入字段更改为http://i.stack.imgur.com/uUHMf.png，然后点击“更改”按钮）：

    function fnOC()
    {
			var oim,oin;
			
			oim=document.getElementById('idImg');
			oin=document.getElementById('idInput');
			oim.src=oin.value;
    }

		<div class="form-group">
			<label>Image (link)</label><input id='idInput' type="text" class="form-control input-xlarge" name="image_cabang" value='http://www.vemix.net/MorningGloryFlower.jpg'/>
			<input type='button' value='Change' onclick='fnOC();'/>
			<img id='idImg' src="http://www.vemix.net/MorningGloryFlower.jpg" width="420" height="275">
<!--http://i.stack.imgur.com/uUHMf.png-->
		</div>

Answer 2

你可以这样做：

<input type="text" oninput="update(this.value)">
<img id="image" />

<script>
function update(value) {
    document.getElementById("image").src = value;
}
</script>

在输入更新函数上调用一个参数 - 输入字段的值，然后将该值分配给图像的属性src。

请注意，没有验证，没有与服务器的通信（您可以通过AJAX执行）它只是数据绑定的一个示例。

你应该学习JavaScript。