forloop onclick show textfield - javascript

Controller
for($x = 1; $x <= $qty; $x++){
$data .= '<b style="margin-left:10px;">Person ' . $x . '</b>';
$data .= '<div class="form-group" style="padding-top:10px;">';
$data .= ' <label for="input-for-age" class="col-sm-2 text-right control-label" style="padding-top:5px;">Age <span class="required">*</span></label>';
$data .= ' Age: <input type="checkbox" id="myCheck" name="AgeCheck" onclick="showCheckbox()">';
$data .= ' <p id="text" style="display:none; color:red;">Check Enabled</b><br><input type="number" placeholder="Enter Number"></p><br>';
}
Below is my javascript
function showCheckbox() {
// Get the checkbox
var checkBox = document.getElementById("myCheck");
// Get the output text
var text = document.getElementById("text");
// If the checkbox is checked, display the output text
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
How do i make it when click check on checkbox it will enable?
For now if there is 3 "checkbox", i click on 1 checkbox it will show
textfield , but if i click on 2nd checkbox from the loop , nothing
appear

Here you end up having more then one id called myCheck, what is not allowed.
for($x = 1; $x <= $qty; $x++){
$data .= '<b style="margin-left:10px;">Person ' . $x . '</b>';
$data .= '<div class="form-group" style="padding-top:10px;">';
$data .= ' <label for="input-for-age" class="col-sm-2 text-right control-label" style="padding-top:5px;">Age <span class="required">*</span></label>';
$data .= ' Age: <input type="checkbox" id="myCheck" name="AgeCheck" onclick="showCheckbox()">';
$data .= ' <p id="text" style="display:none; color:red;">Check Enabled</b><br><input type="number" placeholder="Enter Number"></p><br>';
}
this is why you must add a variable nex to it
for($x = 1; $x <= $qty; $x++){
$data .= '<b style="margin-left:10px;">Person ' . $x . '</b>';
$data .= '<div class="form-group" style="padding-top:10px;">';
$data .= ' <label for="input-for-age" class="col-sm-2 text-right control-label" style="padding-top:5px;">Age <span class="required">*</span></label>';
$data .= ' Age: <input type="checkbox" id="myCheck'.$x.'" name="AgeCheck'.$x.'" onclick="showCheckbox('.$x.')">';
$data .= ' <p id="text'.$x.'" style="display:none; color:red;">Check Enabled</b><br><input type="number" placeholder="Enter Number"></p><br>';
}
and in your function you must now add the variable in the same way
function showCheckbox(x) {
// Get the checkbox
var checkBox = document.getElementById("myCheck"+x);
// Get the output text
var text = document.getElementById("text"+x);
// If the checkbox is checked, display the output text
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}

PHP
$data .= ' Age: <input type="checkbox" class="myCheck" name="AgeCheck" textid="'.$x.'" onclick="showCheckbox(this)">';
$data .= ' <p id="text" style="display:none; color:red;">Check Enabled</b><br>
<input type="number" placeholder="Enter Number" textid="'.$x.'" class="num-text"/>
</p><br>';
JS
function showCheckbox(ele) {
// Get the output text
var texts = document.getElementsByClassName("num-text");
// If the checkbox is checked, display the output text
for(var i =0; i <texts.length; i++){
var text = texts[i];
if (ele.checked == true && text.getAttribute("textid") == ele.getAttribute("textid")){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
}
Here I add a custom attribute to both checkboxe and text inputs. With textid attribute , You can connect a checkbox with matching text input.

Related

Html and php form not submitting issue

Hi guys I have been having trouble with one of the websites using HTML and PHP
The form doesn't seem to submit or send a message. Attached is the code please any help will be great. Also, the PHP and javascript have been attached for reference.
Also sometimes the page doesn't respond to the button.
If anyone can fix the code will be great.
CONTACT FORM
/*-----------------------------------------------------------------------------------*/
function checkmail(input) {
var pattern1 = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (pattern1.test(input)) {
return true;
} else {
return false;
}
}
function proceed() {
var name = document.getElementById("name");
var email = document.getElementById("email");
var phone = document.getElementById("phone");
var movingfrom = document.getElementById("movingfrom");
var movingto = document.getElementById("movingto");
var date = document.getElementById("date");
var msg = document.getElementById("message");
var errors = "";
if (name.value == "") {
name.className = 'error';
return false;
} else if (email.value == "") {
email.className = 'error';
return false;
} else if (checkmail(email.value) == false) {
alert('Please provide a valid email address.');
return false;
} else if (phone.value == "") {
phone.className = 'error';
return false;
} else if (movingfrom.value == "") {
movingfrom.className = 'error';
return false;
} else if (movingto.value == "") {
movingto.className = 'error';
return false;
} else if (date.value == "") {
date.className = 'error';
return false;
} else if (msg.value == "") {
msg.className = 'error';
return false;
} else {
$.ajax({
type: "POST",
url: "php/submit.php",
data: $("#contact_form").serialize(),
success: function(msg) {
//alert(msg);
if (msg) {
$('#contact_form').fadeOut(1000);
$('#contact_message').fadeIn(1000);
document.getElementById("contact_message");
return true;
}
}
});
}
};
<div class="contact-form">
<!-- Form -->
<div class="margin-top-50">
<div class="contact-form">
<!-- Success Msg -->
<div id="contact_message" class="success-msg"> <i class="fa fa-paper-plane-o"></i>Thank You. Your Message has been Submitted</div>
<!-- FORM -->
<form id="contact_form" class="contact-form" method="post" action="php/submit.php" onsubmit="return ValidateForm()">
<li class="col-sm-6">
<label>
<input type="text" class="form-control" name="name" id="name" placeholder="Your Name">
</label>
</li>
<li class="col-sm-6">
<label>
<input type="text" class="form-control" name="email" id="email" placeholder="E-Mail">
</label>
</li>
<li class="col-sm-6">
<label>
<input type="text" class="form-control" name="phone" id="phone" placeholder="Phone Number">
</label>
</li>
<li class="col-sm-6">
<label>
<input type="text" class="form-control" name="movingfrom" id="movingfrom" placeholder="Moving From">
</label>
</li>
<li class="col-sm-6">
<label>
<input type="text" class="form-control" name="movingto" id="movingto" placeholder="Moving To">
</label>
</li>
<li class="col-sm-6">
<label>
<input type="date" class="form-control" name="date" id="date" placeholder="Date">
</label>
</li>
<li class="col-sm-12">
<label>
<select class="form-control" id="typeofmove" placeholder="Date Of Move" required>
<option>Move Type</option>
<option>Residential Move</option>
<option>Office Move</option>
<option>Inter-City Move</option>
<option>Piano Move</option>
<option>Spa-Pool Move</option>
<option>Pool Table Move</option>
<option>Loading & Unloading Only</option>
<option>Packing</option>
<option>Assembly</option>
<option>TradeMe Pickups</option>
<option>Commercial Delivery</option>
<option>Packaging Material</option>
</select>
</label>
</li>
<li class="col-sm-12">
<label>
<textarea class="form-control" name="message" id="message" rows="5" placeholder="Your Message"></textarea>
</label>
</li>
<li class="col-sm-12">
<button type="submit" value="submit" class="btn" id="btn_submit" onClick="proceed();">Submit</button>
</li>
</ul>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-5 col-xs-12">
SUBMIT.PHP /*-----------------------------------------------------------------------------------*/
<?php
// specify your email here
$to = 'testmail#gmail.com';
// Assigning data from $_POST array to variables
if (isset($_POST['name'])) { $name = $_POST['name']; }
if (isset($_POST['phone'])) { $name = $_POST['phone']; }
if (isset($_POST['email'])) { $from = $_POST['email']; }
if (isset($_POST['movingfrom'])) { $name = $_POST['movingfrom']; }
if (isset($_POST['movingto'])) { $name = $_POST['movingto']; }
if (isset($_POST['date'])) { $name = $_POST['date']; }
if (isset($_POST['typeofmove'])) { $name = $_POST['typeofmove']; }
if (isset($_POST['message'])) { $message = $_POST['message']; }
// Construct subject of the email
$subject = 'Booking Enquiry ' . $name;
// Construct email body
$body_message .= 'Name: ' . $name . "\r\n";
$body_message .= 'Email: ' . $from . "\r\n";
$body_message .= 'Phone: ' . $phone . "\r\n";
$body_message .= 'Moving From: ' . $movingfrom . "\r\n";
$body_message .= 'Moving To: ' . $movingto . "\r\n";
$body_message .= 'Date Of Move: ' . $date . "\r\n";
$body_message .= 'Message: ' . $message . "\r\n";
// Construct headers of the message
$headers = 'From: ' . $from . "\r\n";
$headers .= 'Reply-To: ' . $from . "\r\n";
$mail_sent = mail($to, $subject, $body_message, $headers);
if ($mail_sent == true){ ?>
<script language="javascript" type="text/javascript">
window.alert("Sent Successfuly.");
</script>
<?php } else { ?>
<script language="javascript" type="text/javascript">
window.alert("Error! Please Try Again Later.");
</script>
<?php
} // End else
?>
First of all you can try check your url.Is it correct or no.For example send anything via ajax and show the response at console log.If it is not working thats mean your url is wrong.

Ajax : one ajax request for another forms

I have 3 contact form in one page (header, page, footer). How i can create one ajax request for all form ? I want when user click each one form send data fron only this form. Just now send from all forms. I used hasClass for determining from which class sending data, but i can't it
HTML:
<form id="contact-form1" method="POST" class="d-flex form">
<input type="text" class="simple-input" id="name" placeholder="Name">
<input type="text" class="simple-input" id="email" placeholder="Email address">
<textarea class="quession-input" id="msg" placeholder="Your question"></textarea>
<div class="checkboks custom-sq">
<input type="checkbox" class="checked-checkbox" name="myCheckboxes[]" id="box1" checked="checked" value="true" />
<label for="box1" class="checkboks-text"><?php echo the_field('checkbox_text', 'option'); ?></label>
</div>
<button type="submit" id="submit" class="danger-btn submit1"><?php echo the_field('btn_send', 'option'); ?></button>
</form>
<form id="contact-form" method="POST" class="d-flex form">
<input type="text" class="simple-input" id="hy_name" placeholder="Name">
<input type="text" class="simple-input" id="hy_email" placeholder="Email address">
<textarea class="quession-input" id="hy_msg" placeholder="Your question"></textarea>
<div class="checkboks custom-sq">
<input type="checkbox" id="box3" class="checked-checkbox" checked="checked" />
<label for="box3" class="checkboks-text"><?php echo the_field('checkbox_text', 'option'); ?></label>
</div>
<button type="submit" id="submit" class="danger-btn hy-submit submit2"><?php echo the_field('btn_send', 'option'); ?></button>
</form>
Ajax:
jQuery('.submit, .hy-submit').on('click', function(e) {
e.preventDefault();
// All data from form
var str = $(this).closest('form').serialize();
// Get current page url
var page_url = window.location.toString();
// Vars
var name = jQuery('#name').val();
var hy_name = jQuery('#hy_name').val();
var email = jQuery('#email').val();
var hy_email = jQuery('#hy_email').val();
var msg = jQuery('#msg').val();
var hy_msg = jQuery('#hy_msg').val();
var subj = jQuery('#subj').val();
var obj=$(this);
if($(obj).hasClass('hy-submit')){
validatehyEmail(hy_email);
if (hy_msg == '' || hy_email == '' || validatehyEmail(jQuery('#hy_email').val()) == false) {
validatehyEmail(hy_email);
validateText(jQuery('#hy_msg'));
validateText(jQuery('#hy_name'));
return false;
}
console.log('submit');
} else if ($(obj).hasClass('submit')) {
validateEmail(email);
if (msg == '' || email == '' || validateEmail(jQuery('#email').val()) == false) {
validateEmail(email);
validateText(jQuery('#msg'));
validateText(jQuery('#name'));
return false;
}
console.log('submit');
}
// Get checkbox value
var chkElem = document.getElementsByName("myCheckboxes[]");
var choice ="";
for(var i=0; i< chkElem.length; i++)
{
if(chkElem[i].checked)
choice = choice + chkElem[i].value;
}
jQuery.ajax({
type: "post",
url: ajaxactionurl,
data: "action=send_email&" + str + "&myCheckboxes=" + choice + "&url=" + page_url,
success: function (response) {
jQuery('#contact-form input').val('');
jQuery('#contact-form textarea').val('');
jQuery('.submit').text('Done!');
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(textStatus);
}
});
});
PHP:
add_action('wp_ajax_nopriv_send_email', 'send_email');
add_action('wp_ajax_send_email', 'send_email');
function send_email() {
$checkbox = $_POST['myCheckboxes'];
if (isset($checkbox)) {
echo $checkbox;
}
$headers = 'Content-Type: text/html; charset="utf-8"';
$name = $_POST['name'];
$url = $_POST['url'];
$hy_name = $_POST['hy_name'];
$from = 'contact#test.com';
$to = 'test#test.com';
$email = $_POST['email'];
$hy_email = $_POST['hy_email'];
$msg = $_POST['msg'];
$hy_msg = $_POST['hy_msg'];
$subject = 'Footer form: ' . $_POST['email'];
$message .= (!empty($name)) ? '<p><strong>User Name</strong> : ' . $name .' </p>' : '';
$message .= (!empty($email)) ? '<p><strong>User Email</strong> : '. $email .'</p>' : '';
$message .= (!empty($msg)) ? '<p><strong>User Message</strong> : '.$msg .'</p>' : '';
$message .= (!empty($checkbox)) ? '<p><strong>Checkboxs</strong> : '.$checkbox .'</p>' : '';
$message .= (!empty($url)) ? '<p><strong>Url:</strong> : '.$url .'</p>' : '';
$message .= (!empty($hy_name)) ? '<p><strong>User Name</strong> : '.$hy_name .'</p>' : '';
$message .= (!empty($hy_email)) ? '<p><strong>User Email</strong> : '.$hy_email .'</p>' : '';
$message .= (!empty($hy_msg)) ? '<p><strong>User Message</strong> : '.$hy_msg .'</p>' : '';
$message .= '</body></html>';
echo mail($to, $subject, $message, $headers);
return $msg;
die();
}
Use form id attribute and use preventDefault method to prevent the forms from submitting.
$('#form-id').preventDefault();

how to make a update in MySQL using checkbox

I would like to know how a multiple update in MySQL with checkbox because I'm not getting the id attribute checkbox someone could help me?
HTML code
<form method="post" action="../sys/fav.php">
<input type="hidden" id="id_photo" name="id" value="">
<div class="col-md-12">
<p align="right"><button class="btn btn-primary" id="final" name="final">Send</button></p>
</div>
<?php
require "../sys/connect.php";
$email = $_GET['email'];
$sql = mysqli_query($mysqli, "SELECT * FROM gallery WHERE email ='$email'");
while($row = mysqli_fetch_array($sql)){
$id = $row['id'];
$name = $row['nome_galeria'];
$emailcontact = $row['email_contact'];
$pass = $row['pass'];
$email = $row['email'];
$img = $row['img'];
print"<div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12\">
<input type=\"hidden\" name=\"contact\" value=\"$emailcontact\">
<input type=\"hidden\" name=\"login\" value=\"$email\">
<input type=\"hidden\" name=\"pass\" value=\"$pass\">
<input type=\"hidden\" name=\"name\" value=\"$name\">
<div class=\"hovereffect\">
<img id=\"he\" class=\"img-responsive\" src=\"../images/images/gallery/big/$img\" alt=\"$name\">
<div class=\"overlay\">
<div class=\"btn-group\" data-toggle=\"buttons\">
<label class=\"btn btn-primary cke\">
<input type=\"checkbox\" name=\"ck[]\" class=\"ck\" value=\"not\" id=\"ck_$id\"><i class=\"fa fa-heart\"></i>
</label>
</div>
</div>
</div>
</div>";
}
mysqli_close($mysqli)
?>
</form>
PHP Code
require "conexao.php";
if(isset($_POST['final'])){
$id = $_POST['id'];
foreach($_POST['ck'] as $ck){
$check = $ck;
$sql = mysqli_query($mysqli,"UPDATE gallery SET fav = '$check' WHERE id = '$id'")or die(mysqli_error($mysqli));
}
if($sql)
echo "Success!";
else
echo "Fail!";
}
Code Js to get the id of the checkbox
$("#final").click(function(){
var str = "";
var boxes = $(".ck");
for(var i = 0; i< boxes.length; i++){
if(boxes[i].checked == true){
var tmp = boxes[i].id.split("_");
str+=(i ? "," : "")+tmp[1];
}
}
document.getElementById('id_fotos').value=str;
});
You can get values of checkbox using below code and pass through ajax
var ckArray = new Array();
$.each($('input[name="ck[]"]:checked'),
function(index, ele){
ckArray.push($(ele).val());
});

Contact form - submit button not working

I'm following this extensive article (with sources) to make a contact form on a website. However, I need a slightly more complex form, with more fields and also a radio buttons group.
I simply added to the process.php and scripts.js files the additional fields I needed. Amongst the many errors I could get, the submit button simply doesn't work at all. I click on it and nothing happens. I'm a newbie in PHP and JS, so I don't know a proper way how to debug and understand where the problem is. Could you help me find it?
Here's my code:
EDIT:
This part actually doesn't work, because I get an empty field in the string yielded. Any idea? These are the non-required fields:
// ASCENSORI CONDOMINIO
if (empty($_POST["ascensoriCondominio"])) {
$ascensoriCondominio = "Valore non specificato";
} else {
$ascensoriCondominio = $_POST["ascensoriCondominio"];
}
// SCALE CONDOMINIO
if (empty($_POST["scaleCondominio"])) {
$scaleCondominio = "Valore non specificato";
} else {
$scaleCondominio = $_POST["scaleCondominio"];
}
// RISCALDAMENTO CONDOMINIO
if (empty($_POST["riscaldamento"])) {
$riscaldamento = "Valore non specificato";
} else {
$riscaldamento = $_POST["riscaldamento"];
}
HTML:
<!----------------------------- FORM CONDOMINI ---------------------------------------->
<form action="php/process.php" role="form" id="condominiForm" data-toggle="validator" class="col-xs-12 shake">
<div class="row">
<h3 class="col-xs-12">Referente</h3>
<div class="form-group col-sm-6">
<label for="name" class="h4 obbligatorio">Nome</label>
<input type="text" class="form-control" id="name" placeholder="Inserisci nome" required data-error="Inserire nome">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="cognome" class="h4 obbligatorio">Cognome</label>
<input type="text" class="form-control" id="cognome" placeholder="Inserisci cognome" required data-error="Inserire cognome">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="email" class="h4 obbligatorio">Email</label>
<input type="email" class="form-control" id="email" placeholder="Inserisci email" required data-error="Inserire email">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="telefono" class="h4 obbligatorio">Telefono/Cellulare</label>
<input type="text" class="form-control" id="telefono" placeholder="Inserisci recapito telefonico" required data-error="Inserire recapito telefonico">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>Condominio</h3>
</div>
<div class="form-group col-sm-6">
<label for="nomeCondominio" class="h4 obbligatorio">Nome</label>
<input type="text" class="form-control" id="nomeCondominio" placeholder="Inserisci nome condominio" required data-error="Inserire nome condominio">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="indirizzoCondominio" class="h4 obbligatorio">Indirizzo</label>
<input type="text" class="form-control" id="indirizzoCondominio" placeholder="Inserisci indirizzo" required data-error="Inserire indirizzo condominio">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="comuneCondominio" class="h4 obbligatorio">Comune</label>
<input type="text" class="form-control" id="comuneCondominio" placeholder="Inserisci comune" required data-error="Inserire comune condominio">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="provinciaCondominio" class="h4 obbligatorio">Provincia</label>
<input type="text" class="form-control" id="provinciaCondominio" placeholder="Inserisci provincia" required data-error="Inserire provincia condominio">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="unitaCondominio" class="h4 obbligatorio">Numero unità</label>
<input type="text" class="form-control" id="unitaCondominio" placeholder="Inserisci numero unità" required data-error="Inserire numero unità">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="ascensoriCondominio" class="h4">Numero ascensori</label>
<input type="text" class="form-control" id="ascensoriCondominio" placeholder="Inserisci numero ascensori" data-error="Inserire numero ascensori">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="scaleCondominio" class="h4">Numero scale</label>
<input type="text" class="form-control" id="scaleCondominio" placeholder="Inserisci numero scale" data-error="Inserire numero scale">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<!--<label for="riscaldamentoCondominio" class="h4">Riscaldamento centralizzato</label>-->
<!--<input type="text" class="form-control" id="riscaldamentoCondominio" placeholder="Inserisci numero ascensori" data-error="Inserire numero ascensori">-->
<h4>Riscaldamento centralizzato</h4>
<label class="radio-inline"><input type="radio" name="riscaldamento">Sì</label>
<label class="radio-inline"><input type="radio" name="riscaldamento">No</label>
<!--<div class="help-block with-errors"></div>-->
</div>
</div>
<!--<button type="submit" id="form-submit" class="pulsante">Invia richiesta di preventivo!</button>-->
<!--<div class="col-sm-10 col-sm-offset-1">-->
<!--</div>-->
<input type="submit" id="form-submit" class="btn btn-success btn-lg pull-right">Submit</input>
<div id="msgSubmitCondomini" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</form>
JS:
$("#condominiForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
formError();
submitMSG(false, "Hai completato correttamente i campi?");
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var cognome = $("#cognome").val();
var email = $("#email").val();
var telefono = $("#telefono").val();
var nomeCondominio = $("#nomeCondominio").val();
var indirizzoCondominio = $("#indirizzoCondominio").val();
var comuneCondominio = $("#comuneCondominio").val();
var provinciaCondominio = $("#provinciaCondominio").val();
var unitaCondominio = $("#unitaCondominio").val();
var ascensoriCondominio = $("#ascensoriCondominio").val();
var scaleCondominio = $("#scaleCondominio").val();
var riscaldamento = $("input[name=riscaldamento]:checked").val();
$.ajax({
type: "POST",
url: "php/process.php",
data: "name=" + name + "&cognome=" + cognome + "&email=" + email + "&telefono=" + telefono + "&nomeCondominio=" + nomeCondominio + "&indirizzoCondominio=" + indirizzoCondominio + "&comuneCondominio=" + comuneCondominio + "&provinciaCondominio=" + provinciaCondominio + "&unitaCondominio=" + unitaCondominio + "&ascensoriCondominio=" + ascensoriCondominio + "&scaleCondominio=" + scaleCondominio + "&riscaldamento=" + riscaldamento,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});
}
function formSuccess(){
$("#condominiForm")[0].reset();
submitMSG(true, "Messaggio inviato!")
}
function formError(){
$("#condominiForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
}
function submitMSG(valid, msg){
if(valid){
var msgClasses = "h3 text-center tada animated text-success";
} else {
var msgClasses = "h3 text-center text-danger";
}
$("#msgSubmitCondomini").removeClass().addClass(msgClasses).text(msg);
}
PHP
<?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
// COGNOME
if (empty($_POST["cognome"])) {
$errorMSG .= "Cognome is required ";
} else {
$cognome = $_POST["cognome"];
}
// EMAIL
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
// TELEFONO
if (empty($_POST["telefono"])) {
$errorMSG .= "Telefono is required ";
} else {
$telefono = $_POST["telefono"];
}
// NOME CONDOMINIO
if (empty($_POST["nomeCondominio"])) {
$errorMSG .= "Message is required ";
} else {
$nomeCondominio = $_POST["nomeCondominio"];
}
// INDIRIZZO CONDOMINIO
if (empty($_POST["indirizzoCondominio"])) {
$errorMSG .= "Message is required ";
} else {
$indirizzoCondominio = $_POST["indirizzoCondominio"];
}
// COMUNE CONDOMINIO
if (empty($_POST["comuneCondominio"])) {
$errorMSG .= "Message is required ";
} else {
$comuneCondominio = $_POST["comuneCondominio"];
}
// PROVINCIA CONDOMINIO
if (empty($_POST["provinciaCondominio"])) {
$errorMSG .= "Message is required ";
} else {
$provinciaCondominio = $_POST["provinciaCondominio"];
}
// UNITA CONDOMINIO
if (empty($_POST["unitaCondominio"])) {
$errorMSG .= "Message is required ";
} else {
$unitaCondominio = $_POST["unitaCondominio"];
}
// ASCENSORI CONDOMINIO
if (!empty($_POST["ascensoriCondominio"])) {
$ascensoriCondominio = $_POST["ascensoriCondominio"];
} else {
$ascensoriCondominio = "Valore non specificato";
}
// SCALE CONDOMINIO
if (!empty($_POST["scaleCondominio"])) {
$scaleCondominio = $_POST["scaleCondominio"];
} else {
$scaleCondominio = "Valore non specificato";
}
// RISCALDAMENTO CONDOMINIO
if (!empty($_POST["riscaldamento"])) {
$riscaldamento = $_POST["riscaldamento"];
} else {
$riscaldamento = "Valore non specificato";
}
$EmailTo = "alessandrocpr#gmail.com";
$Subject = "Nuova contatto da sito Abacond";
// prepare email body text
$Body = "REFERENTE";
$Body .= "\n";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Cognome: ";
$Body .= $cognome;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Telefono: ";
$Body .= $telefono;
$Body .= "\n";
$Body .= "\n";
$Body .= "CONDOMINIO";
$Body .= "\n";
$Body .= "\n";
$Body .= "Nome: ";
$Body .= $nomeCondominio;
$Body .= "\n";
$Body .= "Indirizzo: ";
$Body .= $indirizzoCondominio;
$Body .= "\n";
$Body .= "Comune: ";
$Body .= $comuneCondominio;
$Body .= "\n";
$Body .= "Provincia: ";
$Body .= $provinciaCondominio;
$Body .= "\n";
$Body .= "Numero unità: ";
$Body .= $unitaCondominio;
$Body .= "\n";
$Body .= "Numero ascensori: ";
$Body .= $ascensoriCondominio;
$Body .= "\n";
$Body .= "Numero scale: ";
$Body .= $scaleCondominio;
$Body .= "\n";
$Body .= "Riscaldamento centralizzato: ";
$Body .= $riscaldamento;
$Body .= "\n";
var_dump($Body);
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Qualcosa è andato storto :(";
} else {
echo $errorMSG;
}
}
?>
Your form action is php/process.php and your ajax call is php/process.php. When you click the submit button the JS event for the form is triggered but doesn't render an alternate page and override the form action of the html. I'd suggest simplifying the steps of the interaction of the components to understand them better before trying to master the complexity of what you have here.
I reproduced your code in localhost and all works fine if delete the validator() function:
$("#condominiForm").on("submit", function (event) {
Without that, the jquery still prevents to submit blank inputs and when all filled, the ajax call is executed, all the fields sended and all works fine.
You can see this on: https://www.dropbox.com/s/eqc3vzxpwb0jmgj/test.png?dl=0
Try removing that part. Hope it helps to you!
UPDATE
Also, for sending the mail, add this part for sending better emails:
$reply = "your#mail.com";
$headers = "From: " . strip_tags($Subject) . "\r\n";
$headers .= "Reply-To: ". strip_tags($reply) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
Now you can use html tags:
$Body = '<html><body>';
$Body .= '<your actual code with html tags>';
$Body .= '</body></html>';
UPDATE 2
You forgot to set a value for radio inputs:
<input .... value='0'> or <input ... value='Si'>
$("#condominiForm").onclick(function (event) {
you should use on click event to run your all j query code its good of your project because some time on submit is not working

Hiding/showing an element

I got this function that show and hide a container by clicking on a button "+show more" or "- Hide" depending on the current action. However it's not working. Any insight on why?
echo ' <br>
<img src="../img/back.png" /><br>
<button type="button" onclick="show_hide("pinfocontainer","hidepinfo");" class="sidebutton" id="hidepinfo">+ Show more</button>
<div class="hide" id="pinfocontainer">
<div class="editform">
<h1>Personal Info </h1>
<br>
<form action="" method="post">
<span></span>';
$sql = "SHOW COLUMNS FROM candidates";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result)){
$sql2 = "SELECT ".$row['Field']." FROM candidates WHERE ID='".$_GET["cid"]."'";
$result2 = mysqli_query($con,$sql2);
echo '<label class="editlabel"> '.$row['Field'].' : </label>';
while($row2 = mysqli_fetch_array($result2)){
echo '<input class="editinput" id="'.$row['Field'].'" name="'.$row['Field'].'" value="'.$row2[$row['Field']].'" type="text">';
}
echo '<br>';
}
echo '<input name="submit" type="submit" value=" Update " style="width:105%;">
<span></span>
</form>
</div>
</div>
<div style="display:inline-block;padding-left:15px;padding-right:15px;"> </div>
Function:
function show_hide(id, id2) {
var e = document.getElementById(id);
if(e.style.display == 'inline-block') {
e.style.display = 'none';
document.getElementById(id2).innerHTML = "+ Show More";
}
else {
e.style.display = 'inline-block';
document.getElementById(id2).innerHTML = "- Hide";
}
}
onclick="show_hide("pinfocontainer","hidepinfo");"
You close the attribute with the 2th " so change the " to '
onclick="show_hide('pinfocontainer','hidepinfo');"
You may escape the ' because you echo it
echo 'onclick="show_hide(\'pinfocontainer\',\'hidepinfo\');"';

Categories