使用javascript和输入表单更改html

我创建了一个php html页面，我想用php动态更改图像的位置，我知道怎么做，但我还想在提交值之前进行用户预览。 我的代码：

-px
.伊西
{
位置：绝对位置；
右：0px；
顶部：0px；
}
.掩护
{
位置：绝对位置；
身高：100%；
宽度：100%；
左：0px；
顶部：-400px；
z指数：-1；
}
" />

现在，当用户按下submit按钮时，php将写入400值并在页面中进行回显，现在我不希望用户每次尝试该值都重新加载页面，我希望使用javascript进行实时预览，以查看在提交之前将如何操作

---

因此，JS必须检测表单值，并更改css样式上的400值，以查看用户在提交前此位置的图像如何。

您需要使用Ajax调用PHP脚本，否则当用户提交表单时，页面将始终重新加载。添加事件列表用于将

submit

事件提交到表单的ner。在此处理程序中，对PHP脚本执行Ajax调用，并使用新属性更新

img

标记。确保

返回false；

或

event.preventDefault（）

以防止表单实际提交，从而重新加载页面。祝您好运。

请将您正在处理的JavaScript代码添加到您的问题和提琴中，以便有人可以帮助改进。提琴是无用的。您可以通过提供有效的概念证明来提供帮助，而不是通过复制粘贴一些代码。您尝试了什么？

onkey向下

？我不知道从我的尝试来看这是否正确，它们都不起作用。

<form class="ysize" action="phpchangesize.php" method="get" name="zs"><span style="color:#FF0000"><strong>-<input name="chsize" size="1" type="text" value="400" />px <input name="sb" type="submit" value="Change Cover Top" /></strong></span></form>
<style>
.ysize
{
position:absolute;
right:0px;
top:0px;
}
.cover
{
position:absolute;
height:100%;
width:100%;
left:0px;
top:-400px;
z-index:-1;
}
</style>
<img class="cover" alt="" src="<?php echo $profilecover ?>" />