Форма забирает картинку с другой формы HTML. В чем может быть дело?

Question

Dannik777 @Dannik777

Веб-разработка

Форма забирает картинку с другой формы HTML. В чем может быть дело?

Всем привет! На сайте стоит две формы в каждой из которых можно отправить фото. Формы не перезагружаются после отправки. Когда люди отправляют фото с формы - 1, а потом отправляют фото с формы -2 то эта вторая форма загребает с первой формы фотографию и отправляет уже две фотки. Свою и с первой формы. Тоже самое происходит в обратном порядке. Т.е формы не понимают что нужно отправлять только свои фото. Как их разделить? Куда копать? В PHP и JS не силен, точнее для меня это вообще темный лес. Помогите, пожалуйста. Уже второй день парюсь. Заранее благодарен
Форма 1

<div class="modal-body" style="">
                <h3 class="mb-10 light" style="">Всем Магазинам<br>
Автозапчастей</h3>
                <p class="small mb-5 light" style="">Как это работает? Вы отправляете запрос по необходимым Вам критериям. На запрос отвечают удобным Вам способом, например WhatsApp или обычный звонок. В данный момент количество Магазинов Автозапчастей -<br>

</p><h3 class="">"98"</h3><p></p>
                <form action="./scripts/request.php" class="contact_form mb-0" id="popup-center-form-form" novalidate="novalidate" style="">
<div class="form-group select-group"><select class="form-control" name="select_0"><option value="Открытый запрос" selected="" disabled="">Открытый запрос</option><option value="Открытый запрос">Открытый запрос</option><option value="Запрос закрыт. Всем спасибо!">Запрос закрыт. Всем спасибо!</option></select></div><div class="form-group"><input type="text" class="form-control" placeholder="Ваш мобильный*" name="textfield_1" size="10"></div><p class="text txt-form">Укажите vin код. Либо марку, год и объем*</p><div class="form-group"><input type="text" class="form-control" placeholder="Введите модель автомобиля*" name="textfield_3" size="10"></div><div class="form-group"><input type="text" class="form-control" placeholder="Опишите запчасть*" name="textfield_4" size="10"></div><div class="form-group select-group"><select class="form-control" name="select_5"><option value="Новое или б/у?*" selected="" disabled="">Новое или б/у?*</option><option value="Новое ">Новое </option><option value="Б/У">Б/У</option><option value="Неважно">Неважно</option></select></div><p class="text txt-form">Загрузите фото если это необходимо</p><div class="form-group file-group"><label class="form-control" for="file_7"><span class="placeholder">Фото</span></label><input type="file" name="file_7" id="file_7" class="inputfile" data-multiple-caption="{count} files selected" multiple accept="image/*,image/jpeg,jpg,png"></div><div class="form-group select-group"><select class="form-control" name="select_8"><option value="Как получить ответ?" selected="" disabled="">Как получить ответ?</option><option value="Звонок">Звонок</option><option value="WhatsApp">WhatsApp</option><option value="Неважно">Неважно</option></select></div><div class="form-group"><textarea class="form-control" placeholder="" rows="4" name="textarea_9"></textarea></div><button type="submit" data-loading-text="••• Минуточку, отправляю" data-complete-text="Отправлено! Ожидайте" data-reset-text="Попробуйте позже..." class="btn btn-success btn-block" style=""><i class="icon-paper-plane icon-position-left icon-size-m"></i><span style=""><strong>Отправить запрос</strong></span></button>
                </form>
            </div>
            <div class="bg"></div>
          </div>
    </div>

Форма 2

<section class="modal fade modal-confirm flex-center" id="popup-center-form--0" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content text-center light">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body" style="">
                <h3 style="" class="mb-5 light">Отправка всем СТО</h3>
                <p class="small mb-5 light" style="">Как это работает? Вы отправляете запрос по необходимым Вам критериям. На запрос отвечают удобным Вам способом, например WhatsApp или обычный звонок. В данный момент количество СТО -<br>

</p><h3 class="mt-0 light" style="">"44"</h3><p></p>
                <form action="./scripts/request.php" class="contact_form mb-0" id="popup-center-form--0-form" novalidate="novalidate" style="">
 <div class="form-group select-group"><select class="form-control" name="select_0"><option value="Открытый запрос" selected="" disabled="">Открытый запрос</option><option value="Открытый запрос">Открытый запрос</option><option value="Запрос закрыт. Всем спасибо!">Запрос закрыт. Всем спасибо!</option></select></div><div class="form-group"><input type="text" class="form-control" placeholder="Ваш мобильный*" name="textfield_1" size="10"></div><div class="form-group"><input type="text" class="form-control" placeholder="Введите модель автомобиля*" name="textfield_2" size="10"></div><div class="form-group"><textarea class="form-control" placeholder="Опишите необходимый ремонт*" rows="4" name="textarea_3"></textarea></div><p class="text txt-form">Загрузите фото если это необходимо</p><div class="form-group file-group"><label class="form-control" for="file_5"><span class="placeholder">Фото</span></label><input type="file" name="file_5" id="file_5" class="inputfile" data-multiple-caption="{count} files selected" multiple accept="image/*,image/jpeg,jpg,png"></div><div class="form-group select-group"><select class="form-control" name="select_6"><option value="Как получить ответ?" selected="" disabled="">Как получить ответ?</option><option value="Звонок">Звонок</option><option value="WhatsApp">WhatsApp</option><option value="Неважно">Неважно</option></select></div><div class="form-group"><textarea class="form-control" placeholder="Комментарий к запросу" rows="4" name="textarea_7"></textarea></div><button type="submit" data-loading-text="••• Минуточку, отправляю" data-complete-text="Отправлено! Ожидайте" data-reset-text="Попробуйте позже..." class="btn btn-success btn-block" style=""><i class="icon-paper-plane icon-position-left icon-size-m"></i><span style=""><strong>Отправить запрос</strong></span></button>
                </form>
            </div>
            <div class="bg"></div>
          </div>
    </div>

Вопрос задан более трёх лет назад
58 просмотров

1 комментарий

Подписаться 1 Простой 1 комментарий

Пригласить эксперта

Ответы на вопрос 2

2 комментария

Dannik777 @Dannik777 Автор вопроса

Вот файл JS

//						CONTACT FORM VALIDATION'S SETTINGS

$('#popup-center-form-form').validate({
    onfocusout: false,
    onkeyup: false,
    rules: {
		textfield_1: "required",
		textfield_3: "required",
		textfield_4: "required",
		select_5: "required",
	},
    errorPlacement: function (error, element) {

        if ((element.attr("type") == "radio") || (element.attr("type") == "checkbox")) {
            error.appendTo($(element).parents("div").eq(0));
        } else {
            error.insertAfter(element);
        }
    }
});


//								CONTACT FORM SCRIPT


$('#popup-center-form-form').submit(function () {
    // submit the form
    //data area
    var data = [];
    var $fields = $(this).find('.form-group, div.radio');
    $fields.each(function(indx, el){
        if ($( el ).hasClass('radio')) {
            var name = $( el ).find('.label-name').html();
            var $radioinput = $(el).find('input');
            $( el).find('input').each(function(indx, el){
                if ( $(el)[0].checked) {
                    var value = $(el).parent().find('span.lbl').html();
                    data.push({ name: name, value: value, name_attr: $radioinput.attr('name') });
                    return;
                }
            });
        } else if ($( el ).find('input').attr('type') === 'checkbox') {
            var $input = $( el ).find( 'input' );
            data.push( {name: $input.attr( 'placeholder' ), value: $input[0].checked ? 'checked' : 'unchecked', name_attr: $input.attr('name')} );
        } else if ($( el ).find('select')[0]) {
            var name = $( el ).find('select option' ).val();
            var $select = $(el).find('select');
            data.push({ name: name, value: $select.val(), name_attr: $select.attr('name')});
        } else if ($( el ).find('textarea')[0]) {
            var $textarea = $(el).find('textarea');
            data.push({ name: $textarea.attr('placeholder'), value: $textarea.val(), name_attr: $textarea.attr('name') });
        } else {
            var $input = $(el).find('input');
            data.push({ name: $input.attr('placeholder'), value: $input.val(), name_attr: $input.attr('name') });
        }
    });
    //end data area
    if ($(this).valid()) {
        $(this).find('[type=submit]').button('loading');
        var form = new FormData();
        var $inputFiles = $('.inputfile');
        $inputFiles.each(function(indx, inputFile){
            $.each(inputFile.files, function(i, file) {
                form.append('file-' + indx + '-' + i, file);
            });
        });
        form.append('data', JSON.stringify(data));
        form.append('id', this.id);
        var action = $(this).attr('action');
        $.ajax({
            url: action,
            type: 'POST',
            data: form,
            cache: false,
            contentType: false,
            processData: false,
            success: function () {
	$('#popup-center-form-form').find('[type=submit]').button('complete');
},
            error: function () {
	$('#popup-center-form-form').find('[type=submit]').button('reset');
}
        });
    } else {
        //if data was invalidated
    }
    return false;
});

//						CONTACT FORM VALIDATION'S SETTINGS

$('#popup-center-form--0-form').validate({
    onfocusout: false,
    onkeyup: false,
    rules: {
		textfield_1: "required",
		textfield_2: "required",
		textarea_3: "required",
	},
    errorPlacement: function (error, element) {

        if ((element.attr("type") == "radio") || (element.attr("type") == "checkbox")) {
            error.appendTo($(element).parents("div").eq(0));
        } else {
            error.insertAfter(element);
        }
    }
});


//								CONTACT FORM SCRIPT


$('#popup-center-form--0-form').submit(function () {
    // submit the form
    //data area
    var data = [2];
    var $fields = $(this).find('.form-group, div.radio');
    $fields.each(function(indx, el){
        if ($( el ).hasClass('radio')) {
            var name = $( el ).find('.label-name').html();
            var $radioinput = $(el).find('input');
            $( el).find('input').each(function(indx, el){
                if ( $(el)[0].checked) {
                    var value = $(el).parent().find('span.lbl').html();
                    data.push({ name: name, value: value, name_attr: $radioinput.attr('name') });
                    return;
                }
            });
        } else if ($( el ).find('input').attr('type') === 'checkbox') {
            var $input = $( el ).find( 'input' );
            data.push( {name: $input.attr( 'placeholder' ), value: $input[0].checked ? 'checked' : 'unchecked', name_attr: $input.attr('name')} );
        } else if ($( el ).find('select')[0]) {
            var name = $( el ).find('select option' ).val();
            var $select = $(el).find('select');
            data.push({ name: name, value: $select.val(), name_attr: $select.attr('name')});
        } else if ($( el ).find('textarea')[0]) {
            var $textarea = $(el).find('textarea');
            data.push({ name: $textarea.attr('placeholder'), value: $textarea.val(), name_attr: $textarea.attr('name') });
        } else {
            var $input = $(el).find('input');
            data.push({ name: $input.attr('placeholder'), value: $input.val(), name_attr: $input.attr('name') });
        }
    });
    //end data area
    if ($(this).valid()) {
        $(this).find('[type=submit]').button('loading');
        var form = new FormData();
        var $inputFiles = $('.inputfile');
        $inputFiles.each(function(indx, inputFile){
            $.each(inputFile.files, function(i, file) {
                form.append('file-' + indx + '-' + i, file);
            });
        });
        form.append('data', JSON.stringify(data));
        form.append('id', this.id);
        var action = $(this).attr('action');
        $.ajax({
            url: action,
            type: 'POST',
            data: form,
            cache: false,
            contentType: false,
            processData: false,
            success: function () {
	$('#popup-center-form--0-form').find('[type=submit]').button('complete');
},
            error: function () {
	$('#popup-center-form--0-form').find('[type=submit]').button('reset');
}
        });
    } else {
        //if data was invalidated
    }
    return false;
});

});

Написано более трёх лет назад

edward_freedom @edward_freedom

Dannik777, сделай функции, вместо этой пелены мусорного кода

Написано более трёх лет назад

7 комментариев

Dannik777 @Dannik777 Автор вопроса

Спасибо! Но если честно не совсем понял. Можно показать на примете, если не сложно

Написано более трёх лет назад
Dannik777 @Dannik777 Автор вопроса

Т.е как мне правильно написать классы?
var $inputFiles = $('.inputfile2'); так ведь не правильно?

Написано более трёх лет назад
ThunderCat @ThunderCat Куратор тега Веб-разработка

Dannik777, в каждой форме задайте свой класс для инпута или дайте им айди, и соответственно в онсубмит обработчике эту строчку поменяйте на этот класс/айди

Написано более трёх лет назад
ThunderCat @ThunderCat Куратор тега Веб-разработка

Dannik777,
Т.е как мне правильно написать классы?
var $inputFiles = $('.inputfile2'); так ведь не правильно?
почему? вполне рабочий вариант, не прям шедевр, но работать будет. Самый верный путь искать файл инпут внутри текущей формы, но я думаю что для вас проще будет просто указать свой класс для каждого инпута.

Написано более трёх лет назад
Павел Корнилов @KorniloFF

Dannik777,
$('#popup-center-form--0-form .inputfile2')

Написано более трёх лет назад
ThunderCat @ThunderCat Куратор тега Веб-разработка

Павел Корнилов, тогда уж $('#popup-center-form--0-form .inputfile') как селектор, тогда менять ничего не надо, но по уму вообще должно быть $(this).find('.inputfile');, что более универсально.

Написано более трёх лет назад
Павел Корнилов @KorniloFF

ThunderCat, да, наспех написал, именно так. Ну, а оптимизировать тут есть что, безусловно.

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

Веб-разработка

+3 ещё

Простой
Как сделать софт для поиска сайтов?
- 1 подписчик
- 14 часов назад
- 270 просмотров
2

ответа
Веб-разработка

Средний
Как решить проблему сохранения данных?
- 1 подписчик
- 27 нояб.
- 87 просмотров
2

ответа
Веб-разработка

+2 ещё

Простой
Как повторить post запрос в Firefox?
- 1 подписчик
- 27 нояб.
- 71 просмотр
1

ответ
Веб-разработка

Простой
Как решить проблему с готовым сайтом?
- 2 подписчика
- 26 нояб.
- 215 просмотров
1

ответ
Веб-разработка

+1 ещё

Средний
Как сделать символическую ссылку на другой сайт(папку) Fastpanel?
- 2 подписчика
- 25 нояб.
- 56 просмотров
1

ответ
Веб-разработка

+2 ещё

Средний
Почему не подтягиваются изменения стилей для https?
- 1 подписчик
- 25 нояб.
- 93 просмотра
1

ответ
PHP

+3 ещё

Простой
Firefox больше не отправляет в HTTP_ACCEPT image/webp?
- 3 подписчика
- 22 нояб.
- 699 просмотров
2

ответа
Веб-разработка

Средний
Как подключить поисковую систему в js?
- 1 подписчик
- 22 нояб.
- 112 просмотров
1

ответ
Веб-разработка

+1 ещё

Простой
Какой отечественный linux выбрать для веб-разработки?
- 2 подписчика
- 22 нояб.
- 4010 просмотров
10

ответов
Веб-разработка

+1 ещё

Средний
Как сделать загрузочный экран, чтобы он был виден всем кто онлайн?
- 1 подписчик
- 22 нояб.
- 141 просмотр
2

ответа
Показать ещё Загружается…

Fullstack разработчик для веб-проектов

Asphera Tech

от 25 000 ₽

Fullstack разработчик (JavaScript, PHP, SQL), веб программист.

CleanTalk

от 1 800 $

Разработчик Drupal ( программист php 7 )

IT House

от 80 000 ₽

Реализовать бекенд для небольшого веб-приложения

30 нояб. 2024, в 03:37

25000 руб./за проект

Приложение по поиску мастеров

30 нояб. 2024, в 03:27

123 руб./за проект

Сделать программу на Python для торговли на криптобиржах роботами

30 нояб. 2024, в 02:43

10000 руб./за проект

Читать форму в одну строчку - такое себе развлечение.

Answer 1 · 2019-01-17 12:31:32

Вот файл PHP

<?php
	//SEND Mail
	if (mail($mailto, $subject, $body, $headers)) {
		echo "mail send ... OK"; // or use booleans here
	} else {
		echo "mail send ... ERROR!";
		print_r( error_get_last() );
	}
}
if($_POST['id'] === "popup-center-form-form") {
	$mailto = "zapchasti@saon.kz";

	$data_array = json_decode($_POST['data']);
	$message = "";
	foreach ($data_array as $key => $value) {
		if (isset($value->name) && $value->name !== "") {
			$message .= $value->name.': '.$value->value.'<br>';
		}
	}

	$subject = "zapchasti@test.ru";

	// a random hash will be necessary to send mixed content
	$separator = md5(time());

	// carriage return type (RFC)
	$eol = "\r\n";

	// main header (multipart mandatory)
	$headers = "From: $mailto" . $eol;
	$headers .= "Reply-To: $mailto" . $eol;
	$headers .= "MIME-Version: 1.0" . $eol;
	$headers .= "Content-Type: multipart/mixed; boundary=\"" . $separator . "\"" . $eol;
	$headers .= "Content-Transfer-Encoding: 7bit" . $eol;
	$headers .= "This is a MIME encoded message." . $eol;

	// message
	$body = "--" . $separator . $eol;
	$body .= "Content-Type: text/html; charset=utf-8" . $eol;
	$body .= "Content-Transfer-Encoding: 8bit" . $eol . $eol;
	$body .= "<div>" . $message . "</div>" . $eol . $eol;

	foreach( $_FILES as $file) {
		if ( !move_uploaded_file( $file['tmp_name'], dirname(__FILE__) . '/../tmp/' . $file['name'] ) ) {
			echo "error upload file: " . $file['name'];
			continue;
		}
		$filename = $file['name'];
		$path = dirname(__FILE__) . '/../tmp';
		$file = $path . "/" . $filename;

		$content = file_get_contents($file);
		$content = chunk_split(base64_encode($content));

		// attachment
		$body .= "--" . $separator . $eol;
		$body .= "Content-Type: application/octet-stream; name=\"" . $filename . "\"" . $eol;
		$body .= "Content-Transfer-Encoding: base64" . $eol;
		$body .= "Content-Disposition: attachment" . $eol;
		$body .= $content . $eol . $eol;
	}

	$body .= "--" . $separator . "--";

	//SEND Mail
	if (mail($mailto, $subject, $body, $headers)) {
		echo "mail send ... OK"; // or use booleans here
	} else {
		echo "mail send ... ERROR!";
		print_r( error_get_last() );
	}
}
if($_POST['id'] === "popup-center-form--0-form") {
	$mailto = "sto@test.ru";

	$data_array = json_decode($_POST['data']);
	$message = "";
	foreach ($data_array as $key => $value) {
		if (isset($value->name) && $value->name !== "") {
			$message .= $value->name.': '.$value->value.'<br>';
		}
	}

	$subject = "sto@saon.kz";

	// a random hash will be necessary to send mixed content
	$separator = md5(time());

	// carriage return type (RFC)
	$eol = "\r\n";

	// main header (multipart mandatory)
	$headers = "From: $mailto" . $eol;
	$headers .= "Reply-To: $mailto" . $eol;
	$headers .= "MIME-Version: 1.0" . $eol;
	$headers .= "Content-Type: multipart/mixed; boundary=\"" . $separator . "\"" . $eol;
	$headers .= "Content-Transfer-Encoding: 7bit" . $eol;
	$headers .= "This is a MIME encoded message." . $eol;

	// message
	$body = "--" . $separator . $eol;
	$body .= "Content-Type: text/html; charset=utf-8" . $eol;
	$body .= "Content-Transfer-Encoding: 8bit" . $eol . $eol;
	$body .= "<div>" . $message . "</div>" . $eol . $eol;

	foreach( $_FILES as $file) {
		if ( !move_uploaded_file( $file['tmp_name'], dirname(__FILE__) . '/../tmp/' . $file['name'] ) ) {
			echo "error upload file: " . $file['name'];
			continue;
		}
		$filename = $file['name'];
		$path = dirname(__FILE__) . '/../tmp';
		$file = $path . "/" . $filename;

		$content = file_get_contents($file);
		$content = chunk_split(base64_encode($content));

		// attachment
		$body .= "--" . $separator . $eol;
		$body .= "Content-Type: application/octet-stream; name=\"file_5" . $filename . "\"file_5" . $eol;
		$body .= "Content-Transfer-Encoding: base64" . $eol;
		$body .= "Content-Disposition: attachment" . $eol;
		$body .= $content . $eol . $eol;
	}

	$body .= "--" . $separator . "--";

	//SEND Mail
	if (mail($mailto, $subject, $body, $headers)) {
		echo "mail send ... OK"; // or use booleans here
	} else {
		echo "mail send ... ERROR!";
		print_r( error_get_last() );
	}
}

Answer 2 · 2019-01-17 12:54:26

// в оба обработчика формы онсубмит добавлено:
var $inputFiles = $('.inputfile');
// то есть ВСЕ инпуты с классом инпутфайл будут добавлены в отправляемые данные,
//независимо от того в какой части документа они находятся

Форма забирает картинку с другой формы HTML. В чем может быть дело?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт