为啥用 textarea 替换文本会破坏我的表单？

Posted 2023-05-07

【中文标题】为啥用 textarea 替换文本会破坏我的表单？

【英文标题】：Why does replacing text with textarea break my form?为什么用 textarea 替换文本会破坏我的表单？

【发布时间】：2020-05-29 10:43:45

【问题描述】：

我在 html 页面上有一个带有 input type="text" 的表单，我将用 textarea 替换它。现在表格不再起作用了。当我尝试提交它时，我收到一个错误“UnboundLocalError: local variable 'updated_details' referenced before assignment”指的是我的python代码（我根本没有更改python）。

HTML 中的旧行

<input type="text"  name="comments" id="comments" placeholder="Write stuff here." style="height:150px"> </input> 

HTML 中的换行

<textarea name="comments" id="comments" placeholder="Write stuff here"  </input>
</textarea>

完整的 HTML 表单

<form action = "/insert_vote" method = "post" onsubmit="">
    <div id="vote-form" action = "/insert_vote" method = "post" onsubmit="">
        <div class="smalltext">
            % for dict_item in vote_choices %
                <input type="radio" name="options" padding="10px" margin="10px" id=" dict_item['id'] "
                value=" dict_item['id'] ">  dict_item['choice']  </input><br>
            % endfor %
        </div>
        <br>
        <div class="mediumlefttext">
            Why did you make that choice?
        </div>
<!--        <input type="text"  name="comments" id="comments" placeholder="Write stuff here." style="height:150px">  </input> <br>-->

<textarea name="comments" id="comments" placeholder="Write stuff here"  </input>
</textarea>

<!--<button onclick="javascript:login();" size="large" type="submit" value="Submit" scope="public_profile,email" returnscopes="true" onlogin="checkLoginState();">Submit</button>-->
        <input type="text" name="user_id" id="user_id" style="display:none;">
<input type="submit" value="Submit">
    </div>
</form>

Python

@app.route('/insert_vote', methods=['GET', 'POST'])
def insert_vote():
    posted = 1
    global article, user_id
    print ("insert_vote", "this should be the facebook user id", user_id)
    if request.method == 'POST' or request.method == 'GET':
        if not request.form['options'] or request.form['comments']:
            flash('Please enter all the fields', 'error')
        else:
            rate = 0 # rate of votes protection against no votes
            vote_choice_id = int(request.form['options'])
            comments       = request.form['comments']
            # user_id = request.form['user_id']
            #user_id = 1
            av_obj = ArticleVote(user_id, article.id, vote_choice_id, comments)
            db.session.add(av_obj)
            try: 
                db.session.commit()
            except exc.SQLAlchemyError:
               flash('User has already voted on this article.')
               posted = 0

            if posted == 1:
                flash('Record was successfully added')
            else:
                db.session.rollback()

            a_obj = article # this is the current global article
            avs_obj = retrieve_article_vote_summary(a_obj.id)  # vote_summary is a list of [tuples('True', numOfTrue), etc]
            total_votes = avs_obj.getTotalVotes()
            vote_choice_list = VoteChoice.getVoteChoiceList()
            vote_choices = []
            for item in vote_choice_list:  # looping over VoteChoice objects
                num = avs_obj.getVoteCount(item.choice)
                if total_votes > 0:
                    rate = num / total_votes
                vote_choices.append([item.choice, item.color, num, rate*100, total_votes])

            details = avs_obj.getVoteDetails()  # 10/02 - retrieve array of tuples [(user, VoteChoice, Comments)]
            details_count = 0
            for detail in details:
                details_count += 1
        return redirect('/results/' + str(article.id))

...

@app.route('/results/<int:id>')
def results(id):
    rate = 0  # either 0 or num/total
    article_list_of_one = Article.query.filter_by(id=id)
    a_obj = article_list_of_one[0]

    avs_obj = retrieve_article_vote_summary(a_obj.id) # vote_summary is a list of [tuples('True', numOfTrue), etc]
    total_votes = avs_obj.getTotalVotes()
    vote_choices = []
    vote_choice_list = VoteChoice.getVoteChoiceList()
    for item in vote_choice_list: # looping over VoteChoice objects
        num = avs_obj.getVoteCount(item.choice)
        if total_votes > 0:        # protecting against no votes
            rate = num/total_votes 
        vote_choices.append([item.choice, item.color, num, rate*100, total_votes])

    details = avs_obj.getVoteDetails() # 10/02 - retrieve array of tuples [(user, VoteChoice, Comments)]
    print("Inside results(" + str(id) + "):")
    details_count = 0
    for detail in details:
        updated_details = [(user, VoteChoice, Comments, User.query.filter_by(name=user).first().fb_pic)
                           for (user, VoteChoice, Comments) in details]
        #print("    " + str(details_count) + ": " + details[0] + " " + details[1] + " " + details[2])
        # details_count += 1

    return render_template('results.html', title=a_obj.title, id=id,
                           image_url=a_obj.image_url, url=a_obj.url,
                           vote_choices=vote_choices, home_data=Article.query.all(),
                           vote_details=updated_details)

【问题讨论】：

首先从 -tag

中删除

【参考方案1】：

这是因为 avs_obj.getVoteDetails() 正在返回空列表，并且您的流程没有通过详细信息：函数。

尝试删除 laceholder="Write stuff here" </input> 杂散输入标签并检查 avs_obj.getVoteDetails() 逻辑。

【讨论】：

尝试删除 /input 和占位符位，但没有成功。我看不出 avs_obj.getVoteDetails() 逻辑有什么问题——当我使用“text”而不是“textarea”时它工作正常。我会将与表单特别相关的 python 添加到问题中

【参考方案2】：

删除结束输入标签

<textarea name="comments" id="comments" placeholder="Write stuff here"  </input>
</textarea>

<textarea name="comments" id="comments" placeholder="Write stuff here">
</textarea>

并在 python 代码上实例化 details_count 外部的 for 循环，因为如果 details 的长度为 0 则 details_count 将保持未分配

【讨论】：

似乎 details 的长度为 0 尝试检查

details 由表单中发送的许多内容组成，所有这些都有效，直到我将“text”更改为“textarea”