Отправка формы в функцию по условию

ProgramBox

Отправка формы в функцию по условию

Post author:admin
Запись опубликована:22 августа, 2022
Post category:Вопросы по программированию

#javascript #php #jquery #html #forms

#javascript #php #jquery #HTML #формы

Вопрос:

Я создал форму в html, bootstrap, php и использовал настройки почтовой программы Swift для отправки электронных писем. В моей форме у меня есть требование, которое спрашивает респондента, нужна ли ему Visa, в случае, если он отвечает «ДА», появляется другая форма. Если он ответит «НЕТ», то он должен иметь возможность отправить форму. Но в моем случае он не может, потому что я ввел во вторую форму некоторые требования для проверки.

Не могли бы вы помочь мне со следующими 2 вопросами? 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 amp;amp; $lastName amp;amp; $first_name amp;amp; $last_name amp;amp; $dateof_birth amp;amp; $placeof_birth amp;amp; $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");
}

Есть гораздо больше полей до и после требования, и часть из них одинакова, но она должна повторяться.

Ответ №1:

Вы можете поместить содержимое ifYes div за пределы формы, и когда пользователь выберет Да, скопируйте содержимое из 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:

у вас есть form1 и form2, если радиовход установлен да, вторая форма должна быть заполнена, для этого используйте обязательный attr для ввода второй формы, а если радиовход нет, нажмите скрыть form2 и удалить требуемый attr из form2 входов

1. Я не уверен, что понимаю. Теперь у меня есть только один тег формы, а внутри находятся все divs. Вы говорите, что я должен сделать 2 разные формы?

2. нет ! не две формы! Я имею в виду те входные данные, которые находятся во второй части формы, например, поместите все эти входные данные в div и назовите его вторым div

3. Хорошо, я поместил вторую часть формы в другой div, но как я ставлю условие для обязательных атрибутов?

4. что-то вроде этого $(«div #form2 input»).removeAttr(«требуется»); если опять не ясно, скажите мне опубликовать полный пример в качестве ответа

Ответ №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>

 // 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")   "nn 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")   "nn 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")   "nn 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>nn 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/