按條件提交功能表

Question

我已經用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");
}

需求之前和之后還有更多字段，其中一部分是相同的，但必須重復。

Answer 1

您具有form1和form2，如果單選輸入是，請選中第二個表單，為此必須使用第二個表單輸入的attr，並且單選輸入沒有單擊，隱藏form2並從form2輸入中刪除必需的attr

Answer 2

您可以將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 = '';
 }

Answer 3

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

你可以試試這個鏈接below.May是會有幫助的鏈接： - https://www.formget.com/javascript-submit-form/