Mohammed Omer Mohammed Omer - 3 years ago 212
Javascript Question

jquery dynamic ID assignment won't work

I have a form that its values should appear in a template before submitting
I have tried everything in a small file for testing, works fine.

but in the project, it won't.
The code below shows that the first line won't work
the second line works fine

$(".contractform").on("blur", "input", function() {

$("input").map(function() {

// this line does not work
$('#main_doc div #' + this.id).html(this.val());

// this line works fine
$("#main_doc div #ref_no").html("10a");
});
});


the error that i have in console is that


Error: Syntax error, unrecognized expression: #main_doc div #
jquery-3.0.0.min.js:2:13136


I have checked several questions around here about assigning dynamic ID but it won't work in my situation, works only in a test experimental files.

This is the form section only and it is generated by Blade Template of Laravel

<div id="fragment-1" class="contractform">
<form method="POST" action="http://127.0.0.1:8000/contract/submit" accept-charset="UTF-8"><input name="_token" type="hidden" value="YlZRGrjcifPiPm1EJjvhRwwzeh1VxjxaDvedOaON">
<div class="controls col-md-12">
<button class="btn btn-primary" type="button">جديد</button>
<button class="btn btn-warning" type="button">تعديل</button>
<input class="btn btn-success" name="submit" id="submit" type="submit" value="حفظ">
<button class="btn btn-danger" type="button">رجوع</button>
</div>

<div class="form-group col-md-4 ">
<label for="d_date">1.تاريخ</label>
<input class="form-control " id="datepicker" placeholder="التاريخ" name="d_date" type="text" value="">
</div>

<div class="form-group col-md-4 " >
<label for="ref_no">2.رقم العقد</label>
<input class="form-control " placeholder="رقم العقد المرجعي" name="ref_no" type="text" value="" id="ref_no">
</div>

<div class="form-group col-md-4">
<label for="project_name">3. اسم المشروع </label>
<input class="form-control" placeholder="اسم المشروع باﻷنجليزية" name="project_name" type="text" value="" id="project_name">
</div>
<div class="form-group col-md-6">
<label for="client_name">4.المالك</label>
<input class="form-control" placeholder="الاسم الاول للعميل" name="client_name" type="text" value="" id="client_name">
</div>

<div class="form-group col-md-6">
<label for="location">5.الموقع</label>
<input class="form-control" placeholder="أسم المدينة بالانجليزية" name="location" type="text" value="" id="location">
</div>

<div class="form-group col-md-12">
<label for="contacts">6. بيانات الاتصال</label>
<input class="form-control" placeholder="مثل ارقام الهاتف و الجوال" name="contacts" type="text" value="" id="contacts">
</div>

<div class="form-group col-md-12 ">
<label for="contract_subject">7.عنوان العقد </label>
<input class="form-control " rows="4" name="contract_subject" type="text" value="" id="contract_subject">
</div>

<div class="form-group col-md-12 ">
<label for="full_date"> 8.التاريخ بالحروف</label>
<input class="form-control " placeholder="التاريخ الكامل الهجري و الميلادي بالحروف" name="full_date" type="text" value="" id="full_date">
</div>

<div class="form-group col-md-6 ">
<label for="first_party_ar">9.أسم الطرف الاول </label>
<input class="form-control " placeholder="الاسم الكامل للطرف الاول " name="first_party_ar" type="text" value="" id="first_party_ar">
</div>

<div class="form-group col-md-6 ">
<label for="first_party_en">10. Name Of the First Party </label>
<input class="form-control " placeholder="Name In English" name="first_party_en" type="text" value="" id="first_party_en">
</div>
<div class="form-group col-md-4 col-md-offset-8">
<label for="NID">11.رقم الهوية </label>
<input class="form-control " name="NID" type="text" value="" id="NID">
</div>

<div class="form-group col-md-6">
<label for="second_party_ar">12.أسم الطرف الثانى</label>
<input class="form-control" placeholder="الاسم الكامل للطرف الثاني" name="second_party_ar" type="text" value="مؤسسة انشاءات إعمار الرائدة للمقاولات " id="second_party_ar">
</div>

<div class="form-group col-md-6">
<label for="second_party_en">13.Name of the Second Party</label>
<input class="form-control" placeholder="Name in English" name="second_party_en" type="text" value="Insha,at Immar Al Rayada Est. for contracting" id="second_party_en">
</div>

<div class="form-group col-md-6">
<label for="model_ar">14.نوع المصاعد</label>
<input class="form-control" placeholder="الموديل باللغة العربية" name="model_ar" type="text" value="" id="model_ar">
</div>

<div class="form-group col-md-6">
<label for="model_en">15.Elevator Model</label>
<input class="form-control" placeholder="Model Name In English" name="model_en" type="text" value="" id="model_en">
</div>

<div class="form-group col-md-4">
<label for="units">16.عدد الوحدات</label>
<input class="form-control" name="units" type="text" value="" id="units">
</div>

<div class="form-group col-md-4 col-md-offset-4">
<label for="delivery_time">17.مدة التوريد</label>
<div class="input-group">
<input class="form-control" name="delivery_time" type="text" value="" id="delivery_time">
<div class="input-group-addon"> شهور </div>
</div>
</div>

<div class="form-group col-md-6">
<label for="site_name_ar">18.موقع التسليم</label>
<input class="form-control" placeholder="اسم الموقع بالعربية" name="site_name_ar" type="text" value="" id="site_name_ar">
</div>

<div class="form-group col-md-6">
<label for="site_name_en">19. Site Name</label>
<input class="form-control" placeholder="Site Name In English" name="site_name_en" type="text" value="" id="site_name_en">
</div>

<div class="form-group col-md-6">
<label for="site_addr_ar">20.عنوان موقع التسليم</label>
<input class="form-control" placeholder="العنوان بالعربية" name="site_addr_ar" type="text" value="" id="site_addr_ar">
</div>

<div class="form-group col-md-6">
<label for="site_addr_en">21.Site Address </label>
<input class="form-control" placeholder="Site Address In English" name="site_addr_en" type="text" value="" id="site_addr_en">
</div>

<div class="form-group col-md-4">
<label for="installation_time">22.مدة التركيب بالشهور</label>
<div class="input-group">
<input class="form-control" name="installation_time" type="text" value="" id="installation_time">
<div class="input-group-addon">شهور</div>
</div>
</div>

<div class="form-group col-md-4">
<label for="free_maintenance">23.مدة الصيانة المجانية</label>
<div class="input-group">
<input class="form-control" name="free_maintenance" type="text" value="" id="free_maintenance">
<div class="input-group-addon">سنة</div>
</div>
</div>

<div class="form-group col-md-4">
<label for="warranty">24.الضمان بالشهور</label>
<div class="input-group">
<input class="form-control" name="warranty" type="text" value="" id="warranty">
<div class="input-group-addon">شهور</div>
</div>
</div>

<div class="form-group col-md-12">
<label for="amount">25.قيمة العقد بالريال</label>
<div class="input-group">
<input class="form-control" name="amount" type="text" value="" id="amount">
<div class="input-group-addon">ريال سعودي </div>
</div>
</div>
<h3 class='col-md-12'> الدفعات </h3>

<div class="form-group col-md-10 installments">
<div class="installment col-md-12">
<label for="install1" class=" col-md-2"> 1. </label>
<input id="percent1" class="percent form-control col-md-4" placeholder="نسبة مئوية" name="percent1" type="text" value="">
<input class=" form-control col-md-5" name="install1" type="text" value="" id="install1">
<label for="installment_type_ar1" class=" col-md-2"> بيان </label>
<input class=" form-control col-md-4" placeholder="نوع الدفعة " name="installment_type_ar1" type="text" value="" id="installment_type_ar1">
<input id="installment_type_en1" class=" form-control col-md-5" placeholder="Type of Installment" name="installment_type_en1" type="text" value="">
</div>
</div>

<div class="form-group col-md-2" >
<button class=" btn btn-info" id="add-installment" type="button">أضافة دفعة</button>

<button class=" btn btn-danger" id="remove-installment" type="button">&nbsp; حذف دفعة &nbsp;</button>

الباقى :<span class="subtotal"></span> ريال
</div>
<div class="col-md-12 diff-msg">

</div>
<div class="controls col-md-10">
<button class="btn btn-primary" type="button">جديد</button>
<button class="btn btn-warning" type="button">تعديل</button>
<input class="btn btn-success" name="submit" id="submit" type="submit" value="حفظ">
<input class="btn btn-danger" type="reset" value="رجوع">
</div>

</form>
</div>

Answer Source

Use $(this) rather than this.

Simple this is a query object, not a DOM element, so this.idis the id of a jquery query set. $(this).attr('id') gets the id attribute of the (first) object in the query list. Similarly, use $(this).val() to get the value of that object.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download