Присвоение значений элементу 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 я плохо разбираюсь. Подскажите, пожалуйста. |
код обработчика клика кнопки, выводящей "модальное окно"
|
$('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);
|
Ну дык перед показом окна и делай че тебе нужно.
var activeTab = $('#current a').name;
console.log(activeTab); // nomer1
|
Цитата:
|
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'));
|
В соответствии с принципом 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')) |
| Часовой пояс GMT +3, время: 21:33. |