表单响应更改值
Form Responses Changing Values
我正在努力让它在你提交我的表格时——如果你在名字中键入"Martin",在姓氏中键入"Neuhard",并在下拉列表中选择"Binghamton University",它会将背景变为绿色,并弹出Binghamton大学的陷阱。如果我使用||,它是有效的,但当我使用&;。
此外,我想这样做,如果两个电子邮件字段不相同,则提醒("错误")
我试了好几个小时都想不通。jsfiddle低于
http://jsfiddle.net/esaunde1/ngjo8aoq/
HTML
<div class="container" id='contact'>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="well well-sm">
<form class="form-horizontal" action="send_form_email.php" method="post">
<fieldset>
<legend class="text-center">Get in touch!</legend>
<div class="form-group">
<label class="col-xs-4 control-label" for="name">First Name</label>
<div class="col-xs-8">
<input id="name" name="name" type="text" placeholder="Your first name" data- trigger="manual" data-content="Can only contain letters!" class=" form-control" pattern="[A-Za-z]+" type="text" required>
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label" for="lname">Last Name</label>
<div class="col-xs-8">
<input id="lname" name="lname" type="text" placeholder="Your last name" data-trigger="manual" data-content="Can only contain letters!" class="name form-control" type="text" required pattern="[A-Za-z]+">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label" for="email">E-mail Address</label>
<div class="col-xs-8">
<input id="email" name="email" type="email" placeholder="What's your email?" class="email form-control" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address" type="text" email required>
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label" for="emailCheck">E-mail Address</label>
<div class="col-xs-8">
<input id="emailCheck" name="emailCheck" type="email" placeholder="What's your email?" class="email form-control" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address" type="text" email required>
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label" for="email">Your Phone Number</label>
<div class="col-xs-8">
<input id="email" name="email" placeholder="What is your phone number?" class="form-control phone" data-placement="top" data-trigger="manual" data-content="Must be a valid phone number" type="text" pattern="[0-9]+" required>
</div>
</div>
<div class="form-group">
<label class='col-xs-4 control-label'>What school do you go to?</label>
<div class='col-xs-8'>
<select class="form-control" id='dropdown'>
<option>Select One</option>
<option>The College of NJ</option>
<option>Rutgers University</option>
<option>Columbia University</option>
<option value="bing">Binghamton University</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input class="btn btn-primary" value="Check Form" onClick='return valid()'>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
JAVASCRIPT
function valid(){
var name = document.getElementById('name');
var lname = document.getElementById('lame');
var home = document.getElementById('home');
if (name.value == 'Martin' && lname.value == 'Neuhard' && ){
$('#home').addClass('green');
$('#contact').addClass('image');
}
else if (document.getElementById('first').value == 'martin'){
alert('thats our profs name!')
}
else return false;
}
类似的东西
$(document).ready(function () {
$('#check-btn').click(function (e) {
e.preventDefault();
var $form = $('form');
var fName = $('#name', $form).val();
var lName = $('#lname', $form).val();
var school = $('#dropdown', $form).val();
if(fName == 'Martin' && lName == 'Neuhard' && school == 'bing'){
//do something here
$('#contact').addClass('green');
}
else if(fName == 'martin'){
alert('thats our profs name!')
}
//if the 2 emails are not the same
var email = $('#email', $form).val();
var repeatEmail = $('#emailCheck', $form).val();
if(email != repeatEmail){
alert('Email does not match!');
}
});
});
http://jsfiddle.net/ngjo8aoq/3/
相关文章:
- 如何创建对表单的自我更新响应
- 使用yii2表单等待ajax响应
- 引导表单向导 - 防止在提交 ajax 响应的每个页面表单出现错误时滚动到下一步
- 如何在 JavaScript 中对表单帖子的响应做出反应
- 提交表单时在弹出窗口中打开响应
- 使用php提交表单,并使用ajax向用户提供响应
- 通过响应按钮单击更改表标题,其中行使用 JSTL for 循环更新
- 异步表单w/Iframe Target——OnLoad适用于FF、Chrome、IE9,不适用于;无法在IE7中得到响应
- 在同一个html页面中显示servlet响应而不隐藏表单
- 使用AJAX提交登录表单并获得响应
- 谷歌表单:将项目添加到响应中
- 如何在java框架(JSF)中基于URL的json响应生成动态表单
- 如果我使用html表单(而不是ajax),则获取服务器的响应代码或返回值
- AJAX表单,通过JSON响应进行php验证
- 表单验证Javascript没有响应
- 移动响应表单不起作用
- 在 ruby 中自动填写、提交和审查 JavaScript 表单的响应
- 如何使用XMLHttpRequest获取响应表单servlet
- 以编程方式添加处理程序来响应表单处理程序
- 如何获得json响应表单parse.com使用query.find();在web应用中使用javascript