سوال: درخواست یه فرم با جاوا اسکریپت [بایگانی]

sadeghkhafan

سه شنبه 11 اسفند 1394, 08:19 صبح

با سلام

من میخوام یه فرم بسازم که مثلا چند تا تب drop-down داشته باشه ، بعد وقتی هر کدوم از تب هارو فیلدش رو انتخاب کنی داخل یه فیلد input کنار هم قرارش بده.

مثلا :
بازشو اول : تست / بازشو دوم : تست1 / بازشو سوم : تست2

بصورت خودکار توی یک فیلد input text بزنه : تست تست1 تست2

نمونه تصویر :
139354

میشه اصلا همچین چیزی با جاوا اسکریپت ؟

mohebbimahmood

چهارشنبه 12 اسفند 1394, 04:17 صبح

با سلام

من میخوام یه فرم بسازم که مثلا چند تا تب drop-down داشته باشه ، بعد وقتی هر کدوم از تب هارو فیلدش رو انتخاب کنی داخل یه فیلد input کنار هم قرارش بده.

مثلا :
بازشو اول : تست / بازشو دوم : تست1 / بازشو سوم : تست2

بصورت خودکار توی یک فیلد input text بزنه : تست تست1 تست2

نمونه تصویر :
139354

میشه اصلا همچین چیزی با جاوا اسکریپت ؟

سلام من یه برنامه ساده ای همونجور که گفتین درست کردم اما نمی دونم منظور تون واقعا همینچین چیزی هست که من نوشتم یا نه .. حالا امتحان بکنید شاید همین باشه

<!DOCTYPE html><html lang="en-US"> <head> <meta charset="utf-8"> <title>Sample</title> </head> <body>
<form> <select id="select-1"> <option id="option-1-1">1-1</option> <option id="option-1-2">1-2</option> <option id="option-1-3">1-3</option> </select> <select id="select-2"> <option id="option-2-1">2-1</option> <option id="option-2-2">2-2</option> <option id="option-2-3">2-3</option> </select> <select id="select-3"> <option id="option-3-1">3-1</option> <option id="option-3-2">3-2</option> <option id="option-3-3">3-3</option> </select> <input type="text" id="txt"> </form>
<script type="text/javascript" src="javascript.js"></script> </body></html>

و برای کد های جاوا اسکریپت از این ها استفاده کنید:
(function() { 'use strict';

// تعریف متغیر های لازم برای ذخیره وقدار هر آیتم
var str_select1, str_select2, str_select3, str_final;

// دریافت و دخیره مقدار اولیه هر آیتم در متغیر های بالا
str_select1 = document.getElementById('option-1-1').text;
str_select2 = document.getElementById('option-2-1').text;
str_select3 = document.getElementById('option-3-1').text;

// ذخیره مقدار اولیه هر آیتم در متغیر نمهایی
str_final = str_select1 + " / " + str_select2 + " / " + str_select3;

// نمایش مقدار نمهایی در input
document.getElementById('txt').value = str_final + " ";

// تعریف دستور change برای هر تگ select تا زمانی که یک آیتم جدید انتخاب شد مقدار آیتم انتخاب شده را دریافت کنیم.
document.getElementById('select-1').addEventListener('change', function() {
// دریافت و دخیره مقدار انتخاب شده توسط کاربر
str_select1 = this.options[this.selectedIndex].text;

// اضافه کردن مقدار انتخاب شده توسط کاربر به متغیر نهایی
str_final = str_select1 + " / " + str_select2 + " / " + str_select3;

// قرار دادن آیتم های انتخاب شده توسط کاربر در input
document.getElementById('txt').value = str_final + " ";
});

document.getElementById('select-2').addEventListener('change', function() {
str_select2 = this.options[this.selectedIndex].text;
str_final = str_select1 + " / " + str_select2 + " / " + str_select3;

document.getElementById('txt').value = str_final + " ";
});

document.getElementById('select-3').addEventListener('change', function() {
str_select3 = this.options[this.selectedIndex].text;
str_final = str_select1 + " / " + str_select2 + " / " + str_select3;

document.getElementById('txt').value = str_final + " ";
});

} ());

sadeghkhafan

چهارشنبه 12 اسفند 1394, 04:39 صبح

دقیقا همین رو میخواستم ، ممنون :قلب:

SCoder

چهارشنبه 12 اسفند 1394, 08:40 صبح

با جاوا اسکریپت تقریبا هرکاری تو صفحه میتونی بکنی این که خیلی ساده است ...

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>

<style type="text/css">
</style>
</head>
<body>

<div id = 'father'>
<select id='sel'>
<option value = 'one'>one</option>
<option value = 'two'>two</option>
<option value = 'three'>three</option>
<option value = 'four'>four</option>
</select>
<input type='text' value='' placeholder='' id='inp' />
</div>

<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var s = $('#sel');
var i = $('#inp');

s.on('change',function(){
i.val(i.val()+s.val()+'');
});

</script>
</body>
</html>

موفق باشید ...

mohebbimahmood

چهارشنبه 12 اسفند 1394, 10:54 صبح

با جاوا اسکریپت تقریبا هرکاری تو صفحه میتونی بکنی این که خیلی ساده است ...

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>

<style type="text/css">
</style>
</head>
<body>

<div id = 'father'>
<select id='sel'>
<option value = 'one'>one</option>
<option value = 'two'>two</option>
<option value = 'three'>three</option>
<option value = 'four'>four</option>
</select>
<input type='text' value='' placeholder='' id='inp' />
</div>

<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var s = $('#sel');
var i = $('#inp');

s.on('change',function(){
i.val(i.val()+s.val()+'');
});

</script>
</body>
</html>

موفق باشید ...

می دونم کد های من خیلی بیشتر هستن و شاید کمی ناشیانه به نظر برسن اما از خوب به نظر من وقتی می شه یه کار رو خیلی ساده با جاوا اسکریپت انجام داد دیگه نیازی به یه فریم ورک دیگه نداری
البته این همه جا صادق نیست..
درکل ممنون از پاسخ شما

SCoder

پنج شنبه 13 اسفند 1394, 08:45 صبح

می دونم کد های من خیلی بیشتر هستن و شاید کمی ناشیانه به نظر برسن اما از خوب به نظر من وقتی می شه یه کار رو خیلی ساده با جاوا اسکریپت انجام داد دیگه نیازی به یه فریم ورک دیگه نداری
البته این همه جا صادق نیست..
درکل ممنون از پاسخ شما

بله من حرف شما رو کاملا قبول دارم و من هم خیلی کم از jquery استفاده می کنم و من از کد های شما مخصوصا اونجایی که دیدم use strict رو استفاده کردید در ابتدای تابع لذت بردم
و همونطور که (douglas crockford) همیشه تو سخنرانی هاش استفاده از اون رو توصیه میکنه و اون رو یه عادت خوب برای نوشتن کد هایی با امنیت بیشتر میدونه ...

موفق باشید...

mohebbimahmood

پنج شنبه 13 اسفند 1394, 18:03 عصر

بله من حرف شما رو کاملا قبول دارم و من هم خیلی کم از jquery استفاده می کنم و من از کد های شما مخصوصا اونجایی که دیدم use strict رو استفاده کردید در ابتدای تابع لذت بردم
و همونطور که (douglas crockford) همیشه تو سخنرانی هاش استفاده از اون رو توصیه میکنه و اون رو یه عادت خوب برای نوشتن کد هایی با امنیت بیشتر میدونه ...

موفق باشید...

ممنونم .. برای من که یه تازه وارد تو دنیای برنامه نویسی هستم حرفات واقعا تاثیر گذار بود و خوشحالم که از کد هام خوشت اومد ..