JS同页表单输出添加自定义BBCode及状态判断问题咨询

Hey there! Let's get your interview record form sorted out—both fixing the broken script after adding BBCode and adding those color-coded Pass/Fail tags you need.

First, Why Your Script Was Breaking #

The main issue with your original code is that the submit button was triggering the default form submission behavior, which refreshes the page. That's why any changes you made (like adding BBCode) seemed to vanish instantly—your script ran, but then the page reloaded before you could see it.

Here's the Full Working Code #

I've updated your code to include Pass/Fail radio buttons, a reason input for failed interviews, and the custom BBCode generation. It also stops the page from refreshing so your output stays visible:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script language="JavaScript">
        function showInput(event) {
            // Stop the form from submitting and reloading the page
            event.preventDefault();
            
            // Get user input values
            const userMessage = document.getElementById("user_input").value;
            const interviewStatus = document.querySelector('input[name="interview_status"]:checked').value;
            const failReason = document.getElementById("fail_reason").value;
            
            let bbCodeOutput = "";
            
            // Generate BBCode based on Pass/Fail status
            if (interviewStatus === "pass") {
                bbCodeOutput = `[Color=Green]用户已通过面试[/Color]\n${userMessage}`;
            } else {
                bbCodeOutput = `[Color=Red]用户未通过面试，原因：${failReason}[/Color]\n${userMessage}`;
            }
            
            // Insert the formatted BBCode into the display area (convert newlines to line breaks for browser display)
            document.getElementById('display').innerHTML = bbCodeOutput.replace(/\n/g, "<br>");
        }
    </script>
</head>
<body>
    <form>
        <label><b>面试记录内容</b></label>
        <input type="text" name="message" id="user_input" placeholder="输入面试相关内容"><br><br>
        
        <label><b>面试结果</b></label><br>
        <input type="radio" name="interview_status" value="pass" checked> 通过 (Pass)<br>
        <input type="radio" name="interview_status" value="fail"> 未通过 (Fail)<br><br>
        
        <label><b>未通过原因（可选）</b></label>
        <input type="text" name="fail_reason" id="fail_reason" placeholder="输入未通过原因"><br><br>
        
        <input type="submit" onclick="showInput(event);">
    </form>
    
    <br/>
    <label>生成的BBCode内容：</label>
    <p><span id='display'></span></p>
</body>
</html>

Key Changes Explained #

• Stop Page Refresh: The event.preventDefault() line blocks the default form submission, so your script's output stays visible instead of getting wiped by a page reload.
• Pass/Fail Logic: We use document.querySelector to grab the selected radio button's value, then generate the matching color-coded BBCode tag.
• BBCode Formatting: For failed interviews, we inject the reason input directly into the red tag. We also convert newlines to <br> so the output looks clean in the browser (the raw BBCode still uses \n for line breaks, which works for forum formatting).
• Combined Output: The main interview message is appended below the status tag to create a complete, formatted record.

Testing It Out #

1. Fill in the interview details.
2. Select "通过" or "未通过"—add a reason if you pick the latter.
3. Click submit, and you'll see the formatted BBCode appear below instantly, no page refresh needed.

内容的提问来源于stack exchange，提问作者BPrepper