通过条件

时间：2016-10-15 12:19:37

标签： javascript php jquery html forms

我在html，bootstrap，php中创建了一个表单，并使用Swift邮件程序设置来发送电子邮件。 在我的表格中，我要求被访者询问他是否需要签证，如果他回答“是”，则会出现另一个表格。如果他回答“否”，那么他应该能够提交表格。但就我而言，他无法做到，因为我在第二种形式中提出了一些验证要求。

你可以帮我解决接下来的两个问题吗？ 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");
}

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

3 个答案:

答案 0 :(得分：1)

你有form1和form2如果无线电输入是检查第二个表格应该完成，为此使用需要attr为第二个表格输入 如果无线电输入没有点击隐藏form2和从form2输入中删除所需的attr

答案 1 :(得分：1)

您可以将ifYes div的内容放在表单之外，当用户选择Yes时，可以通过以下方式复制div的内容：

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 = '';
 }

答案 2 :(得分：0)

<强> 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;
}

<强> HTML 

<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/

相关问题
最新问题