• 0

سؤال عن تغيير قيمة textbox بتغيير قيمة selectbox value باستخدام jQuery

سلام عليكم

الكود كالتالي



<div class="col-12 mb-2 row d-flex align-items-center buttons-fields">

<div class="col-9"  style="margin-bottom:20px">
<lable class="h5 text-primary m7md1" style="margin-bottom:20px">اختيار الزر</lable>
<div class="input-group">


<select class="form-control buttons-value accessory-select p-0 " required>

<option selected disabled>تحديد الزر</option>

<?php

$result = $conn->query("SELECT * FROM button");

while ($row = $result->fetch_assoc()) {

if (empty($row['name'])){
echo '<option type="buttons" img="' . $row['image'] . '" value="' . $row['id'] . '">كود رقم B' . $row['id'] . '/لم يتم تسجيل إسم شائع</option>';   
}
else {

echo '<option class="text-danger" type="buttons" img="' . $row['image'] . '" value="' . $row['id'] . '">كود رقم B' . $row['id'] . '/ الاسم الشائع - ' . $row['name'] . '</option>';
}

}

?>

</select>

</div>

</div>

<!-- ##### عرض الصورة -->

<div class="col-3 d-flex justify-content-center "  style="margin-bottom:20px"></div>

<!-- ########################## -->

<div class="col-3" style="margin-bottom:30px">
<lable>العدد في القطعة الملبسية</lable>
<div class="input-group">

<input type="text" class="form-control com_name  ">

</div>

</div>

<div class="col-3" style="margin-bottom:30px">
<lable>اختيار لون المرياج</lable>
<div class="input-group">

<select class="form-control  p-0 " id="name" name="name" required>

<option selected disabled>اختيار اللون</option>

<!-- بداية استعلام الوان المرياجات -->

<?php

$meriag = "SELECT `patron_colors`.`id` AS pcID, `patron_colors`.`patron_id` AS pcPID, `patron_colors`.`color_name` AS pcCN, `patron_colors`.`color_count`AS pcCC FROM `patron_colors` INNER JOIN `patron` ON `patron`.`id` = `patron_colors`.`patron_id` INNER JOIN `orders` ON `orders`.`id` = `patron`.`order_id` WHERE `orders`.`id` =$order_id";

$result = $conn->query($meriag);

while ($row = $result->fetch_assoc()) {


echo '<option class="text-danger color_count" type="buttons"  value="' . $row['pcCC'] . ' ">  ' . $row['pcCN'] . '</option>';

}

?>

</select>

</div>

</div>

<div class="col-2" style="margin-bottom:30px">
<lable>العدد</lable>
<div class="input-group">

<input type="text" class="form-control" id="firstname" name="firstname"  readonly="readonly">



</div>

</div>



<div class="col-3" style="margin-bottom:30px">
<lable>المجموع</lable>
<div class="input-group">

<input type="text" class="form-control com_name ">

</div>

</div>

</div>


 

القائمة المسماه name 

<select class="form-control  p-0 " id="name" name="name" required>

نتيجة ال options تخرج من قاعدة البيانات كالتالي

<option selected disabled>اختيار اللون</option>

<!-- بداية استعلام الوان المرياجات -->

<?php

$meriag = "SELECT `patron_colors`.`id` AS pcID, `patron_colors`.`patron_id` AS pcPID, `patron_colors`.`color_name` AS pcCN, `patron_colors`.`color_count`AS pcCC FROM `patron_colors` INNER JOIN `patron` ON `patron`.`id` = `patron_colors`.`patron_id` INNER JOIN `orders` ON `orders`.`id` = `patron`.`order_id` WHERE `orders`.`id` =$order_id";

$result = $conn->query($meriag);

while ($row = $result->fetch_assoc()) {


echo '<option class="text-danger color_count" type="buttons"  value="' . $row['pcCC'] . ' ">  ' . $row['pcCN'] . '</option>';

}

?>

و عندي textbox اسمه العدد 

<div class="col-2" style="margin-bottom:30px">
<lable>العدد</lable>
<div class="input-group">

<input type="text" class="form-control" id="firstname" name="firstname"  readonly="readonly">



</div>

</div>

انا عايز قيمة ال textbox ده تاخد ال value اللي في ال options بتاعة ال selectbox 

مش الtext لأ عاوز ال value

و ده الكود المستخدم

<script>
$(document).ready(function() {



$("#name").live("change", function() {

    $("#firstname").val($(this).find("option:selected").attr("value"));
});
});
</script>

بس للاسف لم يعمل معي ، محتاج المساعدة مع الشكر

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1
بتاريخ منذ ساعة مضت قال محمد المصري5:

للاسف  لم تضبط معي غير باستخدام الكود التالي

<script>

function ChooseContact(data) {

document.getElementById ("friendName").value = data.value;

 

}
</script>
 
السؤال الان وريته لحضرتك بتطبيق عملي في الفيديو القصير ده 
 
 
ازاي اقدر احل المشكلة دي

سبب المشكلة أنك تستخدم الخاصية id و هذه الخاصية يجب أن تكون فريدة أي لا يُمكن إعطاء نفس القيمة لعناصر مختلفة.

في مثل هذه الحالات يُمكنك عمل traversing إنطلاقاً من عنصر ما لتحديد عُنصر بجوار أو أب للعنصر الذي أطلق الحدث و بعد تحديد العُنصر المطلوب يُمكنك تغيير قيمته و تتم عملية الإنتقال لتحديد العُنصر حسب هيكلية العناصر لديك فالأمر نسبي سأعطيك مثال و في البداية سأعطي قائمة الألوان صنف التنسيقات color-select و سأعطي حقل العدد صنف التنسيقات number-input و سأفترض أن كل من القائمة و حقل العدد موجودان في نفس الأب و هذا مثال بسيط يُوضح العملية:

نفترض لدينا الهيكلية التالية:

<div>
  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>
  <input type="text" name="firstname" class="number-input">
</div>
<div>
  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>
  <input type="text" name="firstname" class="number-input">
</div>
<div>
  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>
  <input type="text" name="firstname" class="number-input">
</div>

حيث حقل الإدخال يأتي مباشرة بعد القائمة لذلك يُمكن الإنتقال من القائمة إليه بإستخدام الدالة next كما هو موضح:

$(document).ready(function() {
  $(document).on('change', '.color-select', function() {
    $(this).next().val($(this).val()); 
  });
});

حيث عند إختيار عنصر من أي قائمة سيتم الإنتقال للعنصر الذي يأتي بعد القائمة و تغيير قيمته إلى القيمة المختارة و هكذا أي تغير في قائمة لن يؤثر على بقية القوائم.

يُمكنك تجربة المثال من هنا:

لنفترض الآن أن القائمة و حقل الإدخال ليس لديهما نفس الأب المباشر مثلاً بهذا الشكل:

<div>
  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>

  <div>
    <input type="text" name="firstname" class="number-input">
  </div>
</div>

<div>
  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>

  <div>
    <input type="text" name="firstname" class="number-input">
  </div>
</div>

<div>
  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>

  <div>
    <input type="text" name="firstname" class="number-input">
  </div>
</div>

في هذه الحالة يُمكنك على سبيل المثال تحديد حقل العدد الموافق بهذه الطريقة:

$(document).ready(function() {
  $(document).on('change', '.color-select', function() {
    $(this).parent().children().find('input.number-input').val($(this).val()); 
  });
});

تستطيع تجربة المثال من هنا:

و هنالك عدة دوال توفرها مكتبة جيكويري تُساعدك في الإنتقال يُمكنك إستخدامها على حسب هيكلية العناصر لديك: التنقل بين العناصر في jQuery على موسوعة حسوب.

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

إستخدم الدالة on بدل live لأن هذه الأخيرة تم إهمالها و إستبدالها ب on لاحظ المثال التالي:

<select name="name" id="name">
  <option value="" disabled>Select option</option>
  <option value="value1">option 1</option>
  <option value="value2">option 2</option>
  <option value="value3">option 3 </option>
</select>
<input type="text" name="firstname" id="firstname">

<script>
  
  $(document).ready(function() {
    $("#name").on("change", function() {
      $("#firstname").val($(this).val());
    });
});
  
</script>

و هو يعمل بشكل جيد يُمكنك تجربته على codepen:

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

للاسف  لم تضبط معي غير باستخدام الكود التالي

<script>

function ChooseContact(data) {

document.getElementById ("friendName").value = data.value;

 

}
</script>
 
السؤال الان وريته لحضرتك بتطبيق عملي في الفيديو القصير ده 
 
 
ازاي اقدر احل المشكلة دي

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

طيب وضحت الفكرة ، بس معلش اتعبك للمرة الاخيرة ، انا قريت دوال التنقل بس ما ظبطتش معايا يمكن بسبب قلة الخبرة 

الان زي ما حضرتك شايف انا مقسم الكود ل 3 حاويات 

div رئيسي شايل ال select و ال input 

و عدد 2 div فرعي واحد شايل ال select و التاني شايل ال inputازاي اظبط دالة الانتقال عشان اخليه يقرا ال input من ال div الخاصة بها

<!-- Main Container -->
<div>
<!-- Select Box Container -->
<div>
  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>
<!-- Select Box Container Close -->
  </div>
<!-- text Input Container -->
  <div>
    <input type="text" name="firstname" class="number-input">
<!-- Close text Input Container -->
  </div>

<!-- Close Main Container -->
</div>

  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>
<!-- Select Box Container Close -->
  </div>
<!-- text Input Container -->
  <div>
    <input type="text" name="firstname" class="number-input">
<!-- Close text Input Container -->
  </div>

<!-- Close Main Container -->
</div>

  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>
<!-- Select Box Container Close -->
  </div>
<!-- text Input Container -->
  <div>
    <input type="text" name="firstname" class="number-input">
<!-- Close text Input Container -->
  </div>

<!-- Close Main Container -->
</div>

 

انا جربت اكرر استدعاء القسم الفرعي من خلال تكرار دالة children 

$(document).ready(function() {
  $(document).on('change', '.color-select', function() {
    $(this).parent().children().children().find('input.number-input').val($(this).val()); 
  });
});

 

لكن لم تضبط

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

شكرا لك اخي 

بعد البحث و القراءة ضبطت معي بهذه الطريقة 


$(document).ready(function() {
  $(document).on('change', '.color-select', function() {
$(this).closest(".buttons-fields").find('input.number-input').val($(this).val()); 
  });
});

اقوم بوضع class للحاوية الرئيسيه و استدعيه ثم اقوم باستدعاء اي شئ من توابعه

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن