这"预览"按钮有2个功能功能1是发布用户在黑匣子中输入的值,如下所示:
,第二个功能是向我显示一个按钮(默认情况下用css隐藏),名为" button-form-control-generate"像这样的jquery:
$("button.form-control").click(function(event){
$("button.form-control-generate").show();
});
现在我的问题出现了:
如果我点击预览它会刷新页面..所以,如果我点击预览,它会显示隐藏按钮1秒钟,然后刷新页面,按钮返回隐藏状态。所以我尝试删除type="submit"
,但如果我这样做它不会像在图像2中那样发布输入的数据,它会显示隐藏的按钮,但因为提交类型已经消失,所以不会将输入的数据发布到黑匣子。
这是我的代码:
<form class ="form" method="post">
<h3>Select your trademark</h3>
<select class="form-control" name="trademark" action="">
<option></option>
<option>©</option>
<option>™</option>
<option>®</option>
</select>
<h3>Your company name</h3>
<input class="form-control" type="text" name="companyName" placeholder="Your company name" />
<br/>
<br/>
<button class="form-control" type= "submit" name="submit">
Preview
</button>
<br/>
<button class="form-control-generate"name= "submit">
Generate
</button>
</form>
<!-- script for the preview image -->
<div id = "output">
<?php
function footerPreview ()
{
date_default_timezone_set('UTC');
$trademark = $_POST["trademark"];
$company = $_POST["companyName"];
$date = date("Y");
echo "<div id='footer_date'>$trademark $date $company </div>";
}
footerPreview();
?>
jquery:
$("button.form-control").click(function(event){
$("button.form-control-generate").show();
});
已尝试阻止默认但如果我这样做,则用户输入的数据不会显示在预览框中。看起来像preventdefault阻止这一点工作:
<!-- script for the preview image -->
<div id = "output">
<?php
function footerPreview ()
{
date_default_timezone_set('UTC');
$trademark = $_POST["trademark"];
$company = $_POST["companyName"];
$date = date("Y");
echo "<div id='footer_date'>$trademark $date $company </div>";
}
footerPreview();
?>
答案 0 :(得分:1)
如果您不想发布表单,可以使用preventDefault();
功能。
$("button.form-control").click(function(event) {
event.preventDefault();
$("button.form-control-generate").show();
});
&#13;
答案 1 :(得分:0)
$("button.form-control").click(function(event) {
event.preventDefault();
setTimeout(function(){$("button.form-control-generate").show();},100);
});
尝试一次
答案 2 :(得分:0)
以
的形式提交表单$('.form').on('submit', function(e){
$("button.form-control-generate").show();
e.preventDefault();
this.submit();
})
而不是使用click事件。使用提交类型的按钮,submit()动作会自动触发,因此您可以在提交处理程序中显示您的按钮,然后阻止默认操作刷新页面。
更新:
除了使用php,你也可以使用jquery做同样的事情。
$('.form').on('submit', function(e){
e.preventDefault();
var date = new Date();
date = date.getYear() + 1900;
var data = $(this).serializeArray();
var str = data[0].value + date + data[1].value;
$('#output').text(str);
$('.form-control-generate').show();
})
&#13;
.form-control-generate {
display: none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class ="form" method="post">
<h3>Select your trademark</h3>
<select class="form-control" name="trademark" action="">
<option></option>
<option>©</option>
<option>™</option>
<option>®</option>
</select>
<h3>Your company name</h3>
<input class="form-control" type="text" name="companyName" placeholder="Your company name" />
<br/>
<br/>
<button class="form-control" type= "submit" name="submit">
Preview
</button>
<br/>
<button class="form-control-generate" name= "submit">
Generate
</button>
</form>
<!-- script for the preview image -->
<div id = "output"></div>
&#13;
答案 3 :(得分:0)
@ShubhamKhatri几乎做对了
问题是,他认为这是一个提交事件,我不相信它应该是。我相信你在错误的按钮上输入了type =“submit”。当然preview
不会提交表格?您想在generate
上提交,不是吗?
因此对标记略有改动 - 添加了一个id来预览以简化生活
<button class="form-control" id="preview">
Preview
</button>
<br/>
<button class="form-control-generate" type="submit" name="submit">
Generate
</button>
并对@ShubhamKhatri中的代码稍作修改
$("#preview").click(function(e) {
e.preventDefault();
var date = new Date();
date = date.getYear() + 1900;
var data = $('.form').serializeArray();
var str = data[0].value + ' ' + date + ' ' + data[1].value;
$('#footer_date').text(str);
$('.form-control-generate').show();
});
etvoilà