最受欢迎

按条件提交函数中的表单

Submit the form in function by a condition

本文关键字：表单 函数 条件 提交 | 更新日期: 2023-09-27

我已经在html, bootstrap, php和我使用Swift邮件设置发送电子邮件的形式。在我的表单中，我有一个要求，询问应答者是否需要Visa，如果他回答"YES"，则出现另一个表单。如果他回答"否"，那么他应该可以提交表格。但在我的情况下，他不能，因为我在第二种形式中加入了一些验证要求。

你能帮我回答下面两个问题吗?1. 我需要添加什么条件，才能让那些选择"是"并需要填写表格的人以及那些选择"否"的人保持提交表格的有效性?2. 如何构造消息体以符合此条件?我的意思是，当被调查者选择"否"时，消息只包含要求的信息，如果他选择"是"，那么消息也包含其余的信息?"

这是html代码的一部分，它的条件是:

 <label for="firstName" class="control-label">Full name:</label>
 <div class="form-group">
  <div class="col-sm-6 padding-top-10">
    <input type="text" name="firstName" class="form-control" required data-parsley-pattern="^[a-zA-Z ]+$" id="firstName" placeholder="First" />
  </div>
  <div class="col-sm-6 padding-top-10">
    <input type="text" name="lastName" class="form-control" required data-parsley-pattern="^[a-zA-Z ]+$" id="lastName" placeholder="Last" />
  </div>
</div>
<div class="col-sm-12 padding-top-10">
  <label for="visa" class="control-label padding-top-10">Do you need a visa to come to course venue?</label>
  <label class="radio-inline">
    <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck" value="option1" /> YES
  </label>
  <label class="radio-inline">
    <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck" value="option1" /> NO
  </label>
</div>
<div id="ifYes" style="display:none">
  <div class="col-sm-12 padding-top-10">
    <h1 span style="color:red">If you need visa, please complete the following data:</h1></br>
  </div>
  <label for="firstName" class="control-label">Full name(as written in the passaport):</label>
  <div class="form-group">
    <div class="col-sm-6 padding-top-10">
      <input type="text" class="form-control" name="first_name" required data-parsley-pattern="^[a-zA-Z ]+$" id="first_name" placeholder="First" />
    </div>
    <div class="col-sm-6 padding-top-10">
      <input type="text" class="form-control" name="last_name" required data-parsley-pattern="^[a-zA-Z ]+$" id="last_name" placeholder="Last" />
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-4 padding-top-10">
      <label for="dateofBirth" class="control-label">Date of birth:</label>
      <input type="text" class="form-control" name="dateof_birth" required data-parsley-trigger="keyup" data-parsley-pattern="/^('d{1,2})('/|.)?('d{1,2})('/|.)?('d{4})$/" placeholder="MM.DD.YYYY" data-date-format="MM.DD.YYYY" id="dateof_birth" />
    </div>
    <div class="col-sm-4 padding-top-10">
      <label for="placeofBirth" class="control-label">Place of birth:   </label>
      <input type="text" class="form-control" name="placeof_birth" required data-parsley-pattern="^[a-zA-Z ]+$" id="placeof_birth" placeholder="your place of birth" />
    </div>
    <div class="col-sm-4 padding-top-10">
      <label for="nationality" class="control-label">Nationality:</label>
      <input type="text" class="form-control" name="nationality" required data-parsley-pattern="^[a-zA-Z ]+$" id="nationality" placeholder="your nationality"/>
    </div>
  </div>
</div>
下面是JS函数:

function yesnoCheck() {
     if (document.getElementById('yesCheck').checked) {
         document.getElementById('ifYes').style.visibility = 'visible';
     } else  {
         document.getElementById('ifYes').style.visibility = 'hidden';
     }
 }

这里是PHP的一部分:

$firstName = filter_input(INPUT_POST, 'firstName');
$lastName = filter_input(INPUT_POST, 'lastName');
$yesCheck=filter_input(INPUT_POST, 'yesno');
$noCheck=filter_input(INPUT_POST, 'yesno');
$first_name = filter_input(INPUT_POST, 'first_name');
$last_name = filter_input(INPUT_POST, 'last_name');
$dateof_birth=filter_input(INPUT_POST, 'dateof_birth');
$placeof_birth=filter_input(INPUT_POST, 'placeof_birth');
$nationality=filter_input(INPUT_POST, 'nationality');
$data= "Name: " . $firstName . ' ' . $lastName . "'n" .
    "Name: " . $first_name . ' ' . $last_name . "'n" .
    "Date of birth: " .$dateof_birth . "'n" .
    "Place of birth: "  .$placeof_birth . "'n" .
    "Nationality: " .$nationality . "'n"/;
if( $firstName && $lastName && $first_name && $last_name && $dateof_birth && $placeof_birth && $nationality ) {
// Create the Transport
$transport = Swift_SmtpTransport::newInstance('localhost', 25)
->setUsername('user')
->setPassword('password');
$mailer = Swift_Mailer::newInstance($transport);
//http://swiftmailer.org/docs/sending.html
// Create the message
$message = Swift_Message::newInstance()
// Give the message a subject
->setSubject('From CRCE ROMANIA - The Power of Nonformal form')
// Set the From address with an associative array
->setFrom(array('office@crceromania.ro' => 'CRCE ROMANIA'))
// Set the To addresses with an associative array
->setTo(array(EMAIL_TO))
// Give it a body
->setBody($data, 'text/plain');
$result = $mailer->send($message);  
header("Location: index.php?pagina=success");
}

在需求前后有更多的字段，其中一部分是相同的，但必须重复

你可以把ifYesdiv的内容放在表单外面，当用户选择Yes时，通过:

if (document.getElementById('yesCheck').checked) {
     document.getElementById('ifYes').style.visibility = 'visible';
     var add_text = document.getElementById('out_form').innerHTML;
     document.getElementById('ifYes').innerHTML = add_text;
 } else  {
     document.getElementById('ifYes').style.visibility = 'hidden';
     document.getElementById('ifYes').innerHTML = '';
 }

您有form1和form2，如果单选输入是选中，则应完成第二表单，为此需要为第二表单输入添加attr如果单选输入为No，则单击隐藏form2和从form2输入中删除所需的attr

css

/* Below line is used for online Google font */
@import url(https://fonts.googleapis.com/css?family=Raleway);
h2{
background-color: #FEFFED;
padding: 30px 35px;
margin: -10px -50px;
text-align:center;
border-radius: 10px 10px 0 0;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 40px;
}
div.container{
width: 900px;
height: 610px;
margin:35px auto;
font-family: 'Raleway', sans-serif;
}
div.main{
width: 300px;
padding: 10px 50px 10px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
float:left;
margin-top:60px;
}
input[type=text]{
width: 100%;
height: 40px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border-radius: 5px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
#btn_id,#btn_name,#btn_class,#btn_tag{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 47.5%;
border-radius: 5px;
margin-bottom:10px;
padding: 7px 0;
}
#btn_id:hover,#btn_name:hover,#btn_class:hover,#btn_tag:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
#btn_name,#btn_tag{
margin-left: 10px;
}


<div class="container">
<div class="main">
<form action="#" method="post" name="form_name" id="form_id" class="form_class" >
<h2>Javascript Form Submit Example</h2>
<label>Name :</label>
<input type="text" name="name" id="name" placeholder="Name" />
<label>Email :</label>
<input type="text" name="email" id="email" placeholder="Valid Email" />
<input type="button" name="submit_id" id="btn_id" value="Submit by Id" onclick="submit_by_id()"/>
<input type="button" name="submit_name" id="btn_name" value="Submit by Name" onclick="submit_by_name()"/>
<input type="button" name="submit_class" id="btn_class" value="Submit by Class" onclick="submit_by_class()"/>
<input type="button" name="submit_tag" id="btn_tag" value="Submit by Tag" onclick="submit_by_tag()"/>
</form>
</div>
</div>

js 

// Submit form with id function.
function submit_by_id() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (validation()) // Calling validation function
{
document.getElementById("form_id").submit(); //form submission
alert(" Name : " + name + " 'n Email : " + email + " 'n Form Id : " + document.getElementById("form_id").getAttribute("id") + "'n'n Form Submitted Successfully......");
}
}
// Submit form with name function.
function submit_by_name() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (validation()) // Calling validation function
{
var x = document.getElementsByName('form_name');
x[0].submit(); //form submission
alert(" Name : " + name + " 'n Email : " + email + " 'n Form Name : " + document.getElementById("form_id").getAttribute("name") + "'n'n Form Submitted Successfully......");
}
}
// Submit form with class function.
function submit_by_class() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (validation()) // Calling validation function
{
var x = document.getElementsByClassName("form_class");
x[0].submit(); //form submission
alert(" Name : " + name + " 'n Email : " + email + " 'n Form Class : " + document.getElementById("form_id").getAttribute("class") + "'n'n Form Submitted Successfully......");
}
}
// Submit form with HTML <form> tag function.
function submit_by_tag() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (validation()) // Calling validation function
{
var x = document.getElementsByTagName("form");
x[0].submit(); //form submission
alert(" Name : " + name + " 'n Email : " + email + " 'n Form Tag : <form>'n'n Form Submitted Successfully......");
}
}
// Name and Email validation Function.
function validation() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var emailReg = /^(['w-'.]+@(['w-]+'.)+['w-]{2,4})?$/;
if (name === '' || email === '') {
alert("Please fill all fields...!!!!!!");
return false;
} else if (!(email).match(emailReg)) {
alert("Invalid Email...!!!!!!");
return false;
} else {
return true;
}
}

你可以试试下面的链接。也许会有帮助链接:https://www.formget.com/javascript-submit-form/

相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习