Problem z formularzem. :: 4programmers.net

0

Witam mam taki problem, mam gotowy formularz, który składa się z kilku plików, próbuję go zmodyfikować aby była opcja dodania województwa, lecz nie chce mi to działać. Proszę o pomoc.

Tak wygląda mój plik template do formularza

<!-- register Modal -->
	    <div id="ouibounce-modal">
	    <div class="modal fade" id="reg-box" tabindex="-1" role="dialog">
	        <div class="modal-dialog">
	            <div class="modal-content">
	            	
	                <div class="modal-header" style="background:#fff">
          <a class="close" data-dismiss="modal">×</a>
          <h3 style="color:#0c2648;">{$tr.FORM_ZOSTAW}</h3>
		  {$tr.FORM_ZOSTAW2}
        </div>
	                   <div class="modal-body">
					   <p><div class="form">
						
						{$drawContactForm2}
						<span id="infoAlert"></span>
				<form id="myForm" name="myForm" action="" method="post">
				<div class="row">
				<div class="col-md-4">
				<img src="cenzura" alt="">
				</div>
				<div class="col-md-8">
				
				<div class="input-container">
				<!-- <textarea maxlength="1001" id="content" name="content" rows="5" >Zapytanie z formularza www </textarea> 
				<input id="email" type="email" name="email" value="cenzura="">
				-->
						<!-- <label>Imię i nazwisko / Firma</label> -->
						<input minlength="6" id="name" type="text" name="name" value="" placeholder="{$tr.FORM_NAME}" />
						<span class="errorSpan" id="errorName">{$tr.FORM_VALID_NAME}</span>
						<span class="errorSpan" id="errorName2">{$tr.FORM_VALID_NAME2}</span>
					</div>
				<div class="input-container">
					<!-- <label>Podaj swój telefon</label> -->
						<input minlength="9" id="phone" type="number" name="phone" value="" placeholder="{$tr.FORM_PHONE}" />
						<span class="errorSpan" id="errorPhone">{$tr.FORM_VALID_PHONE}</span>
						<span class="errorSpan" id="errorPhone2">{$tr.FORM_VALID_PHONE2}</span>
					</div>
				
**				<p>Wybierz województwo</p>
				<div class="input-container">
<select name="woj" id="woj" value=""/>
		<option>dolnośląskie</option>
		<option>kujawsko-pomorskie</option>
		<option>lubelskie</option>
		<option>lubuskie</option>
		<option>łódzkie</option>
		<option>małopolskie</option>
		<option>mazowieckie</option>
		<option>opolskie</option>
		<option>podkarpackie</option>
		<option>podlaskie</option>
		<option>pomorskie</option>
		<option>śląskie</option>
		<option>świętokrzyskie</option>
		<option>warmińsko-mazurskie</option>
		<option>wielkopolskie</option>
		<option>zachodniopomorskie</option>
		(...)
	</select>
</div>**
</br>
						 <div class="input-container">
							<input type="submit" id="checkButton" class="btn-style" style="width:100%" value="{$tr.FORM_SUBMIT}">
						</div>
					<br />	
				</div>
				</div>	
				</form>
	                    </div></p>
	                    </div>
	                  
	               
	             
	                <div class="clearfix"></div>
	            </div>
	            <div class="clearfix"></div>
	        </div>
	    </div>
	    </div>
	    <!-- register Modal end-->
		
		  <!-- register Modal -->
	    <div class="modal fade" id="reg-box3" tabindex="-1" role="dialog">
	        <div class="modal-dialog">
	        	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	            <div class="modal-content">
	            	<!--SIGNIN AS USER START-->
	                <div class="user-box">
	                	<h2>Rezerwuję
						<br /><span>{$specialTitle}</span></h2>
	                    <!--FORM FIELD START-->
	                    <div class="form">
						
						{$drawContactForm2}
						<span id="infoAlert"></span>
				<form id="myForm" name="myForm" action="" method="post">
					<div class="input-container">
						<textarea maxlength="1001" id="content" name="content" rows="5" >Kontakt ze strony www. </textarea>
						<span class="errorSpan" id="errorContent">{$tr.FORM_VALID_CONTENT}</span>
						<span class="errorSpan" id="errorContent2">{$tr.FORM_VALID_CONTENT2}</span>
					</div>
					
				<div class="input-container">
						<label>Imię i nazwisko / Firma</label>
						<input minlength="6" id="name" type="text" name="name" value="dane kontaktowe" placeholder="" />
						<span class="errorSpan" id="errorName">{$tr.FORM_VALID_NAME}</span>
						<span class="errorSpan" id="errorName2">{$tr.FORM_VALID_NAME2}</span>
					</div>
					<div class="input-container">
						<label>Podaj swój email</label>
						<input id="email" type="email" name="email" value="cenzura" placeholder="">
						<span class="errorSpan" id="errorEmail">{$tr.FORM_VALID_EMAIL}</span>
					</div>
					<div class="input-container">
					<label>Podaj swój telefon</label>
						<input minlength="9" id="phone" type="number" name="phone" value="000000000" placeholder="" />
						<span class="errorSpan" id="errorPhone">{$tr.FORM_VALID_PHONE}</span>
						<span class="errorSpan" id="errorPhone2">{$tr.FORM_VALID_PHONE2}</span>
					</div>

					<br />
						 <div class="input-container">
							<input type="submit" id="checkButton" class="btn-style" style="width:100%" value="{$tr.FORM_SUBMIT}">
						</div>
					
				</form>
				
	                    </div>
	                    <!--FORM FIELD END-->
	                </div>
	                <!--SIGNIN AS USER END-->
	                <div class="user-box-footer">
	                    Rezerwacja telefoniczna: <a href="cenzura">cenzura</a>
	                </div>
	                <div class="clearfix"></div>
	            </div>
	            <div class="clearfix"></div>
	        </div>
	    </div>
	    <!-- register Modal end-->

Dodałem do instniejącego formularza tylko to co pogrubione. Następnie zmieniam plik contactPage.js

$(document).ready(function() {

    function validateEmail(email) {
       var filter = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
       if (filter.test(email)) return true;
       else return false;
    }

    function checkTextareaLimit(countText, dest, source) {
        var limit = $(dest).attr('maxlength') - 1;
        return $(source).html(countText + ' / ' + limit);
    }

    $('#name').on('input', function(e) {
        var name = $(this).val();
        var countName = name.length;
        var minName = $(this).attr('minlength');

        if (name === '') {
            $('#errorName2').removeClass('visibilityShow');
            $('#errorName').addClass('visibilityShow');
            $('#name').addClass('errorValidate');
        } else if (countName < minName) {
            $('#errorName').removeClass('visibilityShow');
            $('#errorName2').addClass('visibilityShow');
            $('#name').addClass('errorValidate');
        } else {
            $('#errorName').removeClass('visibilityShow');
            $('#errorName2').removeClass('visibilityShow');
            $('#name').removeClass('errorValidate');
        }
    });

	$('#woj').on('select', function(e) {
        var name = $(this).val();}
		
    $('#email').on('input', function(e) {
        var email = $(this).val();
        if (email === '' || !validateEmail(email)) {
            $('#errorEmail').addClass('visibilityShow');
            $('#email').addClass('errorValidate');
        } else {
            $('#errorEmail').removeClass('visibilityShow');
            $('#email').removeClass('errorValidate');
        }
    });

    $('#phone').on('input', function(e) {
        var phone = $(this).val();
        var countPhone = phone.length;
        var minPhone = $(this).attr('minlength');

        if (phone === '') {
            $('#errorPhone2').removeClass('visibilityShow');
            $('#errorPhone').addClass('visibilityShow');
            $('#phone').addClass('errorValidate');
        } else if (countPhone < minPhone) {
            $('#errorPhone').removeClass('visibilityShow');
            $('#errorPhone2').addClass('visibilityShow');
            $('#phone').addClass('errorValidate');
        } else {
            $('#errorPhone2').removeClass('visibilityShow');
            $('#errorPhone').removeClass('visibilityShow');
            $('#phone').removeClass('errorValidate');
        }
    });

    $('#content').on('input', function(e) {
        var content = $(this).val();
        var countText = content.length;
        var maxlength = $(this).attr('maxlength');
        var prepareLenght  = maxlength - 1;

        if (content === '') {
            $('#errorContent2').removeClass('visibilityShow');
            $('#errorContent').addClass('visibilityShow');
            $('#content').addClass('errorValidate');
        } else if (countText > prepareLenght) {
            $('#errorContent').removeClass('visibilityShow');
            $('#errorContent2').addClass('visibilityShow');
            $('#content').addClass('errorValidate');
        } else {
            $('#errorContent2').removeClass('visibilityShow');
            $('#errorContent').removeClass('visibilityShow');
            $('#content').removeClass('errorValidate');
        }

        checkTextareaLimit(countText, $(this), '#counterText');
    });

    $("#checkButton").on('click', function() {
        var name = $("#name").val();
        var email = $("#email").val();
        var phone = $("#phone").val();
	var woj = $("#woj").val();
        var reason = $('#reason option:selected').text();
        var content = $("#content").val();
        var countText = content.length;
        var countName = name.length;
        var countPhone = phone.length;
        var maxlength = $('#content').attr('maxlength');
        var prepareLenght  = maxlength - 1;
        var minName = $('#name').attr('minlength');
        var minPhone = $('#phone').attr('minlength');

        if (name === '') {
            $('#errorName2').removeClass('visibilityShow');
            $('#errorName').addClass('visibilityShow');
            $('#name').addClass('errorValidate');
        } else if (countName < minName) {
            $('#errorName').removeClass('visibilityShow');
            $('#errorName2').addClass('visibilityShow');
            $('#name').addClass('errorValidate');
        } else {
            $('#errorName').removeClass('visibilityShow');
            $('#errorName2').removeClass('visibilityShow');
            $('#name').removeClass('errorValidate');
        }

        if (email === '' || !validateEmail(email)) {
            $('#errorEmail').addClass('visibilityShow');
            $('#email').addClass('errorValidate');
        } else {
            $('#errorEmail').removeClass('visibilityShow');
            $('#email').removeClass('errorValidate');
        }

        if (phone === '') {
            $('#errorPhone2').removeClass('visibilityShow');
            $('#errorPhone').addClass('visibilityShow');
            $('#phone').addClass('errorValidate');
        } else if (countPhone < minPhone) {
            $('#errorPhone').removeClass('visibilityShow');
            $('#errorPhone2').addClass('visibilityShow');
            $('#phone').addClass('errorValidate');
        } else {
            $('#errorPhone').removeClass('visibilityShow');
            $('#errorPhone2').removeClass('visibilityShow');
            $('#phone').removeClass('errorValidate');
        }

        if (content === '') {
            $('#errorContent2').removeClass('visibilityShow');
            $('#errorContent').addClass('visibilityShow');
            $('#content').addClass('errorValidate');
        } else if (countText > prepareLenght) {
            $('#errorContent').removeClass('visibilityShow');
            $('#errorContent2').addClass('visibilityShow');
            $('#content').addClass('errorValidate');
        } else {
            $('#errorContent').removeClass('visibilityShow');
            $('#errorContent2').removeClass('visibilityShow');
            $('#content').removeClass('errorValidate');
        }

        if (name !== '' && email !== '' && woj !== '' && validateEmail(email) && phone !== '' && content !== '' && countText <= prepareLenght && countName >= minName && countPhone >= minPhone) {
            $.ajax({
                url: "././library/phpmailer/send_email.php",
                type: "POST",
                data: {
                    name: name,
                    phone: phone,
                    email: email,
		    woj: woj,
                    reason: reason,
                    content: content
                },
                cache: false,
                success: function() {
                    setTimeout(function() {
                        $('#infoAlert').before('<div class="messageSuccess">Dziękujemy, oddzwonimy w przeciągu 30 min.</div>').fadeIn('slow');
                        $('.messageSuccess').addClass('visibility');
                            setTimeout(function() {
                                $('.messageSuccess').removeClass('visibility');
                                setTimeout(function() {
                                    $('.messageSuccess').remove();
                                }, 400);
                            }, 3600);
                    }, 200);
                    $('#myForm').trigger('reset');
                    checkTextareaLimit(0, '#content', '#counterText');
                },
                error: function() {
                    console.log('error ajax');
                },
            });
        }

        return false;
    });

    checkTextareaLimit(0, '#content', '#counterText');
});

Tutaj formularz jeszcze działa ale nie ma w ogóle województwa. Teraz zmieniam ostatni plik, który odpowiada za formularz send_email.php. Tak wygląda po modyfikacji:

<?php
// Check for empty fields
if(empty($_POST['name']) || empty($_POST['email'])** || empty($_POST['woj'])** || empty($_POST['phone']) || empty($_POST['content']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
	return false;
}

$name = $_POST['name'];
**$woj = $_POST['woj'];**
$email = $_POST['email'];
$phone = $_POST['phone'];
$reason = $_POST['reason'];
$description = $_POST['content'];
$date = new DateTime();

include 'class.phpmailer.php';
include '../../config/config.php';
$mail = new PHPMailer;
$mail->CharSet = 'utf-8';
$mail->setLanguage('pl', 'lang/');
$message = '
<html>
<body style="font-family:Tahoma;font-size:12px;">
      <div style="width:100%;">
            <div style="padding:20px;">
			<h3>Kontakt ze strony www cenzura</h3>
                <p>ImiÄ™ i nazwisko / Firma: '.$name.'</p>
                <p>Telefon: '.$phone.'</p>
               ** <p>Województwo: '.$woj.'</p>**
				<p>Data wysĹ‚ania: '.$date->format('Y-m-d H:i:s').'</p>
				<p>&nbsp;</p>
				<p>************************************************************************</p>
				<p>..:: WiadomoĹ›Ä‡ z formularza kontaktowego. Powered by: cenzura ::..</p>
				<p>************************************************************************</p>
            </div>
      </div>
</body>
</html>';
$mail->setFrom(ADM_EMAIL, 'Kontakt z www');
$mail->addAddress(EMAIL_TO_SEND, 'cenzura');
$mail->isHTML(true);
$mail->Subject = 'ProĹ›ba o kontakt telefoniczny.';
$mail->Body = $message;
if(!$mail->send()) {
	return false;
} else {
	return true;
}

Jak zmodyfikuję ten ostatni plik to formularz w ogóle nie dziala :/ Proszę o pomoc.

0

Jakieś błędy w konsoli?

0

W konsoli nie ma żadnych błędów. Zmieniłem ten select z zpliku tpl na zwykłe pole tekstowe w takiej postaci <input name="woj" id="woj" type="text" value="" placeholder="Wpisz województwo" /> I w formularz już się pojawia! To duży postęp ale dalej mam cos takiego:

Kontakt ze strony www cenzura

Imię i nazwisko / Firma: test

Wojewodztwo:

Telefon: 123123123

Data wysłania: 2017-11-21 2003

..:: Wiadomość z formularza kontaktowego. Powered by: cenzura

Pole województwo jest puste :/

0

Bo źle używasz znacznika select. Tak jest poprawnie

<select name="woj" id="woj" />
        <option value="1">dolnośląskie</option>
		...
</select>

W option musisz mieć atrybut value

EDIT: Jednak to nie ma znaczenia

0

Spróbuj w taki sposób:

$('#woj').on('change', function(e) {
    console.log("Selected value", $(this).val())
    console.log("Selected text", $("select option:selected").text())
})

Problem z formularzem.

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami