JavaScript订阅表单更改
javascript subscribe form change
我有这个用于表单输出的代码,但我想更改结果,以便它将加载两个将订阅和取消订阅的按钮,我该怎么做?试
<div><a onclick="$('div#newsletter_message').load('index.php?route=module/newsletter/callback&subscribe=' + $('input[name=''subscribe'']:checked').val(1) + '&email=' + escape($('input[name=''newsletter_email'']').val()) + '&name=' + escape($('input[name=''newsletter_name'']').val()), function() { $('div#newsletter_message').hide(); $('div#newsletter_message').show('slow'); });" class="buttons"><span style="float:left; clear:both;">Subscribe</span></a></div>
和
<div><a onclick="$('div#newsletter_message').load('index.php?route=module/newsletter/callback&subscribe=' + $('input[name=''subscribe'']:checked').val(0) + '&email=' + escape($('input[name=''newsletter_email'']').val()) + '&name=' + escape($('input[name=''newsletter_name'']').val()), function() { $('div#newsletter_message').hide(); $('div#newsletter_message').show('slow'); });" class="buttons"><span style="float:left; clear:both;">Unsubscribe</span></a></div>
但没有效果
<div class="box">
<!-- <div class="box-heading"><?php echo $heading_title; ?></div> -->
<h3><?php echo $heading_title; ?></h3>
<div class="box-content">
<div id="newsletter_message" class="content" style="display:none; background: #FFFFCC; border: 1px solid #FFCC33; padding: 10px; margin-top: 2px; margin-bottom: 15px;"></div>
<form action="<?php echo $action; ?>" method="post" id="module_newsletter" name="module_newsletter">
<div style="text-align: left;">
<span class="required">*</span><b><?php echo $entry_email; ?></b><br />
<input style="width:90%;" type="text" name="newsletter_email" required placeholder="<?php echo $entry_email; ?>"/><br />
<?php if ($name == 'optional') { ?>
<b><?php echo $entry_name; ?></b><br />
<input style="width:90%;" type="text" name="newsletter_name" placeholder="<?php echo $entry_name; ?>"/>
<?php } elseif ($name == 'required') { ?>
<span class="required">*</span><b><?php echo $entry_name; ?></b><br />
<input style="width:90%;" type="text" name="newsletter_name" placeholder="<?php echo $entry_name; ?>"/>
<?php } else { ?>
<input type="hidden" name="name" value="" />
<?php } ?>
<br />
<input name="subscribe" value="1" type="hidden" />
</div>
<table style="align:left;">
<tr>
<td style="width: 100%;">
<table>
<tr>
<td><input type="radio" style="vertical-align: middle;" id="subscribe" name="subscribe" value="1" checked="checked"/><label style="font-size:10px; vertical-align: middle;" for="subscribe"><?php echo $text_subscribe; ?></label></td>
</tr>
<tr>
<td><input type="radio" style="vertical-align: middle;" id="unsubscribe" name="subscribe" value="0" /><label style="font-size:10px; vertical-align: middle;" for="unsubscribe"><?php echo $text_unsubscribe; ?></label></td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
<div><a onclick="$('div#newsletter_message').load('index.php?route=module/newsletter/callback&subscribe=' + $('input[name=''subscribe'']:checked').val() + '&email=' + escape($('input[name=''newsletter_email'']').val()) + '&name=' + escape($('input[name=''newsletter_name'']').val()), function() { $('div#newsletter_message').hide(); $('div#newsletter_message').show('slow'); });" class="buttons"><span style="float:left; clear:both;"><?php echo $button_go; ?></span></a></div>
</form>
</div>
</div>
替换这个...
$('input[name=''subscribe'']:checked').val()
有了这个...
$('input[name=subscribe]:radio:checked').val()
您需要:radio
选择器,因为您还有一个具有相同名称的隐藏表单输入。请记住,对于非JavaScript用户,这一事实可能会对表单产生什么影响。
根据要求,这里有一个更彻底的答案。我无法帮助您修复所有代码,因为这超出了Stack Overflow的范围,但是这里有一些可以帮助您入门的东西。
基本工作示例:http://jsfiddle.net/jeb2x/
假设您有一个表单...
<form id="SubscribeForm">
<input type="radio" name="subscribe" value="1" checked="checked" />
<input type="radio" name="subscribe" value="0" />
<a href="#" id="alert">Alert selected value</a>
</form>
您可以订阅 id 为 alert
的链接的单击事件,并让它提醒所选单选按钮值。这个 Javascript 代码应该在你的 html 的一个单独的文件中,并使用脚本标签包含在头部中。
<script type="text/javascript" src="/pathtofile/scripts.js"></script>
。
$(document).ready(function(){
$('#SubscribeForm').on('click', 'a#alert', function(){
var selectedValue = $('input[name=subscribe]:checked').val();
alert(selectedValue);
});
});
为了理解此处的代码,您需要了解一些原则。
首先,它订阅文档的ready
事件。这可确保代码仅在 DOM 完成加载时运行,因此,您的表单肯定可以使用。还有一种订阅文档就绪的速记方法,即将匿名函数传递给 jQuery,它知道在 DOM ready 上运行它
$(function(){
//...code here
});
然后,它订阅表单的click
事件。此代码使用称为事件委托的原则,值得一读。对于这个简单的示例来说,它并不是真正需要的,但是如果你需要绑定到同一个div中的多个事件,它是有利的。在这种情况下,代码可以简化为...
$('a#alert').on('click', function(){
var selectedValue = $('input[name=subscribe]:checked').val();
alert(selectedValue);
});
。甚至只是$('a#alert').click(function(){
然后,代码使用我的原始解决方案(减去:radio
选择器,因为只有一组名为"subscribe"的输入),以提醒所选值。
在您的情况下,您正在尝试调用外部脚本以订阅或取消订阅用户。执行此操作的一种方法是使用 AJAX 请求。您可以使用多种方法中的任何一种来执行此操作。您正在使用上面的 load
方法,该方法将向提供的 url 发送请求,并将响应插入到所选元素中。
$("#result").load( "test.html" );
在此示例中,来自 test.html 的响应将入到 id result
的元素中。如果你想对响应做一些更复杂的事情,你可以使用 jQuery 的 AJAX 方法之一,例如 $.ajax()
或 $.get()
希望这对:)有所帮助
- 在一次点击中发布到两个表单 JavaScript
- 有人可以告诉我如何调试这个 html 表单/javascript 组合
- 2 函数必须为真才能提交表单.(Javascript)
- 从表单javascript返回值时出现问题
- 从php中的mysql中复制带有嵌入式下拉列表的html表单javascript
- 使用谷歌表单javascript插件而不向公众发布
- 联系表单Javascript/Ajax/PHP不是't工作
- 将信息从表单传递到表单Javascript
- 提交表单javascript后处理完整事件
- 将变量传递给 HTML 表单 Javascript
- 当浏览器窗口关闭时,表单/JavaScript 数据会发生什么
- 从表单 javascript 中读取数字值
- 网页过滤器表单.Javascript 不允许使用多个字段
- 联系表单javascript验证被淘汰了
- 将表单 Javascript 的总数相加
- HTML 表单 JavaScript 被忽略
- 从简单的XSD文件生成HTML表单 - javascript
- 验证表单javascript
- 如果选中了复选框,则不要't验证运输表单-JavaScript
- 在html表单(javascript)中显示变量的内容