Submit the form in function by a condition

Question

I have made a form in html, bootstrap, php and I used Swift mailer setups for sending the e-mails. In my form, I have a requirement that asks the respondent if he needs Visa, in the case that he answers "YES" another form appears. If he answers "NO", then he should be able to submit the form. But in my case he is not able, because I put in the second form some requirements for validation.

Can you please help me with the next 2 questions? 1. What conditions I need to put in that way that I can keep the validation for those who will choose "YES" and need to complete the form and those who will choose "NO", to submit the form? 2. How can I construct the message body to appear in accordance with this condition? I mean, when the respondent chooses "NO", the message to contain only the information asked for and if he choose YES, then the message to contain also the rest of the information?"

Here is the part of the html code where the condition it is:

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

Here is the JS function:

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

And here a part from 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");
}

There are much more fields before and after the requirement and a part of them are the same but it has to repeat.

Answer 1

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

You can try this link below.May be it will be helpful link:-https://www.formget.com/javascript-submit-form/

Answer 2

You can put the content of ifYes div outside the form and when user choose Yes copy the content from the div out side by:

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

you have form1 and form2 if radio input yes checked second form should be completed , for this use required attr for second form inputs and if radio input No clicked hide form2 and remove required attr from form2 inputs