Присвоение значений элементу input при нажатии кнопки.

[Минин Игорь]

Добрый день. Столкнулся с такой проблемой. У меня имеются табы

JavaScript
jQuery(function($){
$(document).ready(function() {
$(".content-samtel1 div").hide(); // Скрытое содержимое
$(".tabs-samtel1 li:first").attr("class","current"); // Какой таб показать первым
$(".content-samtel1 div:first").fadeIn(1); // Показ первого контента таба

$('.tabs-samtel1 a').click(function(e) {
e.preventDefault();
$(".content-samtel1 div").hide(); //Скрыть всё содержимое
$(".tabs-samtel1 li").attr("id",""); //Сброс идентификаторов
$(this).parent().attr("id","current","value"); // Активация идентификаторов
$('#' + $(this).attr('name')).fadeIn(1); // Показать содержимое текущей вкладки
});
})();


Табы в html
<ul class="tabs-samtel1">
<li><a href="#" name="nomer1" class="close">номер 1</a></li>
<li><a href="#" name="nomer2" class="close">номер 2</a></li>
<li><a href="#" name="nomer3" class="close">номер 3</a></li>
<li><a href="#" name="nomer4" class="close">номер 4</a></li>
</ul>


Информация в табах html
<div class="content-samtel1">
<div id="nomer1">информация 1</div>
<div id="nomer2">информация 2</div>
<div id="nomer3">информация 3</div>
<div id="nomer4">информация 4</div>
</div>


И так же имеется кнопка, которая выводит "модальное" окно с формой обратной связи.

Необходимо, чтобы в зависимости от активного "таба" в форму обратной связи вставлялся определенный текст (скажем с информацией об этом табе), и после нажатия в форме кнопки "отправить", данная информация так же обрабатывалась в файле mail.php?

Как это можно осуществить? У меня были мысли как то это завязать на атрибуте value, но, к сожалению, в js я плохо разбираюсь. Подскажите, пожалуйста.

[danik.js]

код обработчика клика кнопки, выводящей "модальное окно"

[Минин Игорь]

$('body').on('click', '.callback-samtel1', function(e){
				e.preventDefault();
				$('#callback-samtel1').modal().open();
			});

<a href="#" class="callback-samtel1" name="modal"><div class="callback-knopka"></div></a>

Плюс подключается библиотека и код самого плагина

/**
 * The Modal jQuery plugin
 *
 * @author Alexander Makarov <sam@rmcreative.ru>
 * @link [url]https://github.com/samdark/the-modal[/url]
 * @version 1.0
 */
;(function($, window, document, undefined) {
	"use strict";
	/*jshint smarttabs:true*/

	var pluginNamespace = 'the-modal',
		// global defaults
    	defaults = {
			overlayClass: 'themodal-overlay',

			closeOnEsc: true,
			closeOnOverlayClick: true,

			onClose: null,
			onOpen: null
        };

	function getContainer() {
		var container = 'body';

		// IE < 8
		if(document.all && !document.querySelector) {
			container = 'html';
		}

		return $(container);
	}

	function init(els, options) {
		var modalOptions = options;

		if(els.length) {
			els.each(function(){
				$(this).data(pluginNamespace+'.options', modalOptions);
			});
		}
		else {
			$.extend(defaults, modalOptions);
		}

		return {
			open: function(options) {
				var el = els.get(0);
				var localOptions = $.extend({}, defaults, $(el).data(pluginNamespace+'.options'), options);

				getContainer().addClass('lock');

				// close modal if opened
				if($('.'+localOptions.overlayClass).length) {
					$.modal().close();
				}

				var overlay = $('<div/>').addClass(localOptions.overlayClass).prependTo('body');
				overlay.data(pluginNamespace+'.options', options);

				if(el) {
					$(el).clone(true).appendTo(overlay).show();
				}

				if(localOptions.closeOnEsc) {
					$(document).bind('keyup.'+pluginNamespace, function(e){
						if(e.keyCode === 27) {
							$.modal().close();
						}
					});
				}

				if(localOptions.closeOnOverlayClick) {
					overlay.children().on('click.' + pluginNamespace, function(e){
						e.stopPropagation();
					});
					$('.' + localOptions.overlayClass).on('click.' + pluginNamespace, function(e){
						$.modal().close();
					});
				}

				$(document).bind("touchmove",function(e){
					if(!$(e).parents('.' + localOptions.overlayClass)) {
						e.preventDefault();
					}
				});

				if(localOptions.onOpen) {
					localOptions.onOpen(overlay, localOptions);
				}
			},
			close: function() {
				var el = els.get(0);

				var localOptions = $.extend({}, defaults, options);
				var overlay = $('.' + localOptions.overlayClass);
				$.extend(localOptions, overlay.data(pluginNamespace+'.options'));

				overlay.remove();
				getContainer().removeClass('lock');

				if(localOptions.closeOnEsc) {
					$(document).unbind('keyup.'+pluginNamespace);
				}

				if(localOptions.onClose) {
					localOptions.onClose(overlay, localOptions);
				}
			}
		};
	}

	$.modal = function(options){
		return init($(), options);
	};

	$.fn.modal = function(options) {
		return init(this, options);
	};

})(jQuery, window, document);

[danik.js]

Ну дык перед показом окна и делай че тебе нужно.

var activeTab = $('#current a').name;
console.log(activeTab); // nomer1

[Минин Игорь]

var activeTab = $('#current a').name;
console.log(activeTab); // nomer1

Ну я понимаю, что перед показом, я не понимаю как завязать input со значением value в форме с информацией во вкладках.

[danik.js]

var tab = $('#current a').name;

var info = $('#' + tab).text();

$('#callback-samtel1').find('[type="text"], textarea').val(info);

[Минин Игорь]

var tab = $('#current a').name;

var info = $('#' + tab).text();

$('#callback-samtel1').find('[type="text"], textarea').val(info);

ого, спасибо. А если мне нужно завязать это к:

<input type="hidden" name="tarif" class="tarif"/>

??

Извиняюсь за наглость, но с js мало знаком

[Минин Игорь]

Спасибо за помощь. Решил данную задачу средствами Jquery.

В итоге весь скрипт вкладок вышел таким:

$(document).ready(function() {
        $(".content-samtel1 div").hide(); // Скрытое содержимое
        $(".tabs-samtel1 li:first").attr("class","current", "value"); // Какой таб показать первым
        $(".content-samtel1 div:first").fadeIn(1); // Показ первого контента таба
 
 		$(".samtel-internet").val($(".tabs-samtel1 li a").attr('value'));
		$(".samtel-internet").text($(".tabs-samtel1 li a").attr('value'));
 
    $('.tabs-samtel1 a').click(function(e) {
        e.preventDefault();
        $(".content-samtel1 div").hide(); //Скрыть всё содержимое
        $(".tabs-samtel1 li").attr("class",""); //Сброс идентификаторов
        $(this).parent().attr("id","current","value"); // Активация идентификаторов
        $('#' + $(this).attr('name')).fadeIn(1); // Показать содержимое текущей вкладки
		
		
		$(".samtel-internet").val($(this).attr('value'));
		$(".samtel-internet").text($(this).attr('value'));

[danik.js]

В соответствии с принципом DRY, код должен быть таким:

$(document).ready(function() {
  
    $('.tabs-samtel1 a').click(function(e) {
        e.preventDefault();
        $(".content-samtel1 div").hide(); //Скрыть всё содержимое
        $(".tabs-samtel1 li").attr("class",""); //Сброс идентификаторов
        $(this).parent().attr("id","current","value"); // Активация идентификаторов
        $('#' + $(this).attr('name')).fadeIn(1); // Показать содержимое текущей вкладки
         
        $(".samtel-internet").val($(this).attr('value'));
        $(".samtel-internet").text($(this).attr('value'));
    }

    $('.tabs-samtel1 li:first a').click();

И разберись с text/val. text() для задания содержимого div'ov, span'of и тд, а val() - для задания значения атрибута value элементов форм. И еще, выходит ты ссылкам (.tabs-samtel1 a) указал атрибут value ? У ссылок нет value. Если там что-то человекочитаемое, то можешь использовать title. Или например зделать так:


<li><a href="#nomer1" name="tut-info" class="close">номер 1</a></li>

и $(this.href).fadeIn(1) вместо $('#' + $(this).attr('name')).fadeIn(1)

ну и $(".samtel-internet").val(this.name) вместо $(".samtel-internet").val($(this).attr('value'))