利用jQuery實現商品信息填寫表單代碼



16 63 22



特效描述:利用jQuery實現 商品信息 填寫表單 代碼,利用jQuery實現商品信息填寫表單代碼

代碼結構

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/rangeslider.min.js"></script>

3. HTML代碼

<div class="main">
	<h1>jQuery商品信息填寫表單代碼</h1>
	<div class="agileinfo_main_grid">
		<form action="#" method="post">
			<div class="styled-input">
				<input type="text" name="ProductName" placeholder="產品名稱" required="" />
				<span></span>
			</div>
			<div class="styled-input">
				<select id="country" onChange="change_country(this.value)" class="frm-field required">
					<option value="null">品牌</option>
					<option value="null">Brand1</option>
					<option value="AX">Brand2</option>
					<option value="AX">Brand3</option>
				</select>
				<span></span>
			</div>
			<div class="styled-input">
				<input type="text" name="Phone Number" placeholder="電話號碼" required="" />
				<span></span>
			</div>
			<div class="clear"></div>
			<div class="styled-input">
				<input type="text" name="Username" placeholder="用戶名" required="" />
				<span></span>
			</div>
			<div class="styled-input">
				<input type="email" name="Email" placeholder="Email" required="" />
				<span></span>
			</div>
			<div class="styled-input">
				<input type="text" name="Address" placeholder="地址" required="" />
				<span></span>
			</div>
			<div class="clear"></div>
			<div class="w3agile_budget">
				<h4>范圍</h4>
				<div>
					<input name="Range" type="range" min="0" max="1000" data-rangeslider="" />
					<output></output>
					<div class="clear"></div>
				</div>
			</div>
			<div class="styled-input w3_styled_input_textarea">
				<textarea name="Review" placeholder="填寫備注" required=" "></textarea>
				<span></span>
			</div>
			<input type="submit" value="發送消息" />
		</form>
	</div>
</div>
<script type="text/javascript">
$(function() {
	var $document = $(document);
	var selector = '[data-rangeslider]';
	var $element = $(selector);
	var textContent = ('textContent' in document) ? 'textContent': 'innerText';
	function valueOutput(element) {
		var value = element.value;
		var output = element.parentNode.getElementsByTagName('output')[0] || element.parentNode.parentNode.getElementsByTagName('output')[0];
		output[textContent] = value;
	}
	$document.on('input', 'input[type="range"], ' + selector,
	function(e) {
		valueOutput(e.target);
	});
	$document.on('click', '#js-example-disabled button[data-behaviour="toggle"]',
	function(e) {
		var $inputRange = $(selector, e.target.parentNode);
		if ($inputRange[0].disabled) {
			$inputRange.prop("disabled", false);
		} else {
			$inputRange.prop("disabled", true);
		}
		$inputRange.rangeslider('update');
	});
	$document.on('click', '#js-example-change-value button',
	function(e) {
		var $inputRange = $(selector, e.target.parentNode);
		var value = $('input[type="number"]', e.target.parentNode)[0].value;
		$inputRange.val(value).change();
	});
	$document.on('click', '#js-example-change-attributes button',
	function(e) {
		var $inputRange = $(selector, e.target.parentNode);
		var attributes = {
			min: $('input[name="min"]', e.target.parentNode)[0].value,
			max: $('input[name="max"]', e.target.parentNode)[0].value,
			step: $('input[name="step"]', e.target.parentNode)[0].value
		};
		$inputRange.attr(attributes);
		$inputRange.rangeslider('update', true);
	});
	$document.on('click', '#js-example-destroy button[data-behaviour="destroy"]',
	function(e) {
		$(selector, e.target.parentNode).rangeslider('destroy');
	}).on('click', '#js-example-destroy button[data-behaviour="initialize"]',
	function(e) {
		$(selector, e.target.parentNode).rangeslider({
			polyfill: false
		});
	});
	$document.on('click', '#js-example-hidden button[data-behaviour="toggle"]',
	function(e) {
		var $container = $(e.target.previousElementSibling);
		$container.toggle();
	});
	$element.rangeslider({
		polyfill: false,
		onInit: function() {
			valueOutput(this.$element[0]);
		},
		onSlide: function(position, value) {
			console.log('onSlide');
			console.log('position: ' + position, 'value: ' + value);
		},
		onSlideEnd: function(position, value) {
			console.log('onSlideEnd');
			console.log('position: ' + position, 'value: ' + value);
		}
	});
});
</script>
<div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 切換按鈕 表單 表單美化 表單插件 表單美化插件 文本框 text文本框
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 欢乐二人雀神下载 广东好彩1最新开奖结果查询 刮刮卡彩票大奖照片 香港六合图库下载 女孩子多学一门什么技能可以赚钱 什么焊赚钱多 2019香港白姐全年资料 淘宝快3代理 老虎机棋牌 山西11选5走势图乐彩网 开干货店赚钱 福建快三电视走势图 分分彩跟0369 河北十一选五开奖结果图 快乐10分时时彩 河南22选5走开奖公告