Question

我是一个php-html页面，我想用PHP改变图像动态的位置，我知道如何做到这一点，但我也希望在提交值之前进行用户预览。我的代码：

<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 ?>" />

现在，当用户按下提交按钮时，php会写入 400 值并在页面中回显它，现在我不希望用户为每次尝试该值重新加载页面，并且我想用 javascript 进行实时预览，看看在提交之前会是怎样的。

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

Answer 1

您需要使用Ajax来调用PHP脚本，否则当用户提交表单时，页面将始终重新加载。将submit事件的事件侦听器添加到表单。在此处理程序中，对您的PHP脚本执行Ajax调用，并使用新属性更新img标记。请务必return false;或event.preventDefault()以防止表单实际提交，从而重新加载页面。祝你好运。

使用带有输入表单的javascript更改html

1 个答案: