场景-我有一个包含工作清单的页面,每个工作清单都有一个名为“应用”的按钮。单击它时会弹出一个模式弹出窗口,但是该模式没有关于用户要应用到哪个作业的上下文,因此我想以某种方式获取发布到该模式的Job的ID。
问题-正在按程序生成按钮并具有相同的ID。因此,使用javascript捕获onclick
事件的原因是由于某种原因,它只能获取第一个按钮的data-id
。
{% for vacancy in vacancies %}
<div class="card">
<div class="card-body">
<h5 class="card-title">Job
Title - {{ vacancy.job_title }}
</h5>
<strong><p>Description </p></strong>
<p class="card-text">{{ vacancy.job_description }}</p>
</div>
<button id="openmodal" data-id="{{ vacancy.id }}" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Apply
</button>
</div>
{% endfor %}
<div class="modal-body">
<form action="" class="customer-input" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="row">
<div class="form-group col-lg-6">
<label for="fullName">Full Name</label>
<br>
<input name="full-name" type="text" placeholder="Full Name" required="required">
</div>
<div class="form-group col-lg-6">
<label for="email">Email</label>
<br>
<input type="email" name="email" placeholder="Email" required="required">
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Job Role</label>
<br>
<select class="job-role" name="job-role">
<option value="python-developer">Python Developer</option>
<option value="fullstack-developer">Full Stack Developer</option>
</select>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Your Resume</label>
<br>
<input type="file" name="resume" accept=".pdf, .docx, .doc, .odt, .ott">
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="login-res-btn">Apply!</button>
</div>
</form>
</div>
这不是正确的解决方案,必须有更好的解决方案,但是我很拼命,我也会按照程序生成模态。
{% for vacancy in vacancies %}
<div class="card">
<div class="card-body">
<h5 class="card-title">Job
Title - {{ vacancy.job_title }}
</h5>
<strong><p>Description </p></strong>
<p class="card-text">{{ vacancy.job_description }}</p>
</div>
<button data-id="{{ vacancy.id }}" type="button" class="btn btn-primary" data-toggle="modal"
data-target="#modal{{ vacancy.id }}">
Apply
</button>
</div>
<br>
<br>
<div class="modal text-center" id="modal{{ vacancy.id }}">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Apply for the desired role</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" class="customer-input" method="post"
enctype="multipart/form-data">
{% csrf_token %}
<div class="row">
<div class="form-group col-lg-6">
<label for="fullName">Full Name</label><br>
<input name="full-name" type="text" placeholder="Full Name"
required="required">
</div>
<div class="form-group col-lg-6">
<label for="email">Email</label><br>
<input type="email" name="email" placeholder="Email"
required="required">
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Your Resume</label><br>
<input type="file" name="resume"
accept=".pdf, .docx, .doc, .odt, .ott">
<input type="text" value="{{ vacancy.id }}" name="job-title" readonly="readonly" hidden="hidden">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="login-res-btn">Apply!</button>
</div>
</form>
</div>
</div>
</div>
</div>
{% endfor %}