如何显示选中了复选框的对象的值?

时间:2018-06-26 09:48:10

标签: javascript html ajax django forms

在我的django项目中,有一个名为Point的对象。在models.py中定义如下:

class Point(models.Model):
    name = models.CharField(max_length = 30, unique = True) # name of the point
    x = models.IntegerField(default = 1) # x coordinate of point
    y = models.IntegerField(default = 2) # y coordinate of point
    z = models.IntegerField(default = 3) # z coordinate of point
    def __str__(self):
        return self.name+":("+str(self.x)+","+str(self.y)+","+str(self.z)+")"

我想创建一个界面,显示带有复选框的所有点,可用于显示和更新点信息。

它看起来像这样:pic of website

勾选其中一个复选框时,我希望它看起来像这样:pic when check box ticked

这是我在views.py中的代码:

def update_here(request):
    """
    Used to update any coordinates of any point.
    """
    points_list = Point.objects.all()
    if request.method == 'POST':
        x1 = request.POST['x_value']
        y1 = request.POST['y_value']
        z1 = request.POST['z_value']

        point = Point.objects.get(name = "Vizag")
        point.x = x1
        point.y = y1
        point.z = z1
        point.save()
        return redirect('update_here')
    return render(request,'update_here.html',{'points_list_in_html':points_list})

我在update_here.html中编写的html代码(当选中一个点的复选框时,将在框中显示值):

    <html>
<head>
<title>Update here</title>
<script type="text/javascript">
var helper = {
    numb : function(numberOfBlanks,xx,yy,zz){
        var checked=0;
        var j=0; var k;
        for(j=0; j<numberOfBlanks.length; j++){
            if(numberOfBlanks[i].checked){
                break;
            }
        }       
        return j;
    }
}
function toggleCheckbox(numberOfBlanks,xx,yy,zz) {
    var m = j;
    document.getElementById("demo").innerHTML = helper.numb(numberOfBlanks,xx,yy,zz);
    document.getElementById("id_x").value = m;
}
</script>
</head>
<body>
<h1>UPDATE POINTS</h1>

<form>
 {% for i in points_list_in_html %}
 <input id="numberOfBlanks11" name="name_city" type="checkbox" value="" onchange="toggleCheckbox(name_city,{{ i.x }}, {{ i.y }}, {{ i.z }})"/> {{forloop.counter}}) {{i.name}} &nbsp; &nbsp;
 {% endfor %}
 </form>

 <p id="demo">How many checked?</p>

<form method="post">
    {% csrf_token %}
    <div>
        <label for="id_x">x</label>
        <input type="number" id="id_x" name="x_value" value="56">
    </div>
    <br>
    <div>
        <label for="id_y">y</label>
        <input type="number" id="id_y" name="y_value">
    </div>
    <br>
    <div>
        <label for="id_z">z</label>
        <input type="number" id="id_z" name="z_value">
    </div>
    <br>
        <button type="submit"">Update</button>
 </form>


 <h1>POINTS</h1>
    <table border="1">
      <thead>
        <tr>
          <th>Name</th>
          <th>x</th>
          <th>y</th>
          <th>z</th>
        </tr>
      </thead>
      <tbody>
        {% for i in points_list_in_html %}
          <tr>
            <td>{{i.name}}</td>
            <td>{{i.x}}</td>
            <td>{{i.y}}</td>
            <td>{{i.z}}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
</body>
</html>

我应该对html代码和views.py进行哪些更改,以便在相应的框中显示x,y,z坐标?

0 个答案:

没有答案