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

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() 以防止表单实际提交并重新加载页面。祝你好运。