Javascript if/else on submit

问题描述：

即时通讯全新的JavaScript和即时通讯正在处理我的第一个功能。我有这2个文本输入区域，其中一个可以把他的名字和他的水平。Javascript if/else on submit

<form action="/action_page.php"> 
Nom: <input type="text" name="fullname"><br><br> 
Niveau (1 &aacute; 6): <input type="text" name="niveau"> 
<input type="submit" value="Afficher partie 2"> 
</form>

提交之后，假设用户显示一则讯息与他的名字和他的电平（如果级别为1-6之间，否则其错误消息）。

这是我写我的剧本：

<script> 
var x = oninput; 
var y = oninput; 
if (y>=1){ 
    document.write("Bonjour + 'x'"); 
    document.write("Niveau='y'"); 
}if (y<=6){ 
    document.write("Bonjour + 'x'"); 
    document.write("Niveau='y'"); 
} 
else { 
    document.write("<p style="color:red;">Erreur le niveau doit etre en 
    1 et 6</p> 
} 
</script>

我真的很想知道，如果我写的是正确的方式，我也着人物如何向用户展示了他的名字与变量X

我也有一个问题，如何将我的脚本链接到输入框。

是在'action_page.php'你的脚本？如果不是，则不会被提交调用。另外，因为它大概是PHP你的问题应该有'php'作为标签......或者它不是php，在这种情况下它可能需要重新命名（可能，因为你的脚本显然是JavaScript）......或者你不是实际上有意向'action_page.php'发送任何东西，在这种情况下...你可能不应该使用提交 – Tibrogargan

我必须用javascript来完成。我无法找到一种方法来让脚本返回到用户信息输入框中。 – bourki

由于您使用的是“提交”按钮，浏览器会在评估提交操作后立即离开当前页面（即使它转到同一页面）。这意味着您的值只会作为服务器端处理的一部分提供，因为它们已被转换为您的浏览器已创建的HTTP GET查询 – Tibrogargan

答

试试这个，我希望它会工作

在您的形式，

<form name="form1" action="/action_page.php"> 
    Nom: <input type="text" name="fullname"><br><br> 
    Niveau (1 &aacute; 6): <input type="text" name="niveau"> 
    <input type="submit" value="Afficher partie 2" onclick="myFunction()"> 
</form>

在你的脚本

function myFunction() { 
    var x = document.form1.fullname.value; 
    var y = document.form1.niveau.value; 

    if (y >= 1 && y <= 6) { 
     document.write("Bonjour " +x); 
     document.write("Niveau=" +y); 
    } else { 
     document.write("<p style='color:red;'>Erreur le niveau doit etre en 
     1 et 6</p>"); 
    } 
}

这不能解决字符串连接的问题 – saada

答

您的JavaScript有很多的错误。我为你清理了一切。只需阅读这些评论即可了解JS在做什么。玩得开心:)

function showmylevel(event) { 
 
    event.preventDefault(); // Prevent Form Actually Submitting 
 
    var x = document.getElementsByName('fullname')[0].value; // Get Value 
 
    var y = document.getElementsByName('niveau')[0].value; // Get Value 
 
    console.log(y); 
 
    if (y>0 && y<7){ 
 
     document.write("Bonjour "+x); // Display Name 
 
     document.write("<br>"); // Break Line 
 
     document.write("Niveau = "+y); // Display Level 
 
    } else { 
 
     // Display Error 
 
     document.write('<p style="color:red;">Erreur le niveau doit etre en 1 et 6</p>'); 
 
    } 
 
    return false; // Stop Form From Going Anywhere 
 
    }

<form action="action_page.php" onsubmit="showmylevel(event);"> 
 
Nom: <input type="text" name="fullname"><br><br> 
 
Niveau (1 &aacute; 6): <input type="text" name="niveau"><br><br> 
 
<input type="submit" value="Afficher partie 2"> 
 
</form>

如果你想知道为什么我在showmylevel函数中传递事件变量？这是为了跨平台的目的。 Firefox没有全局事件，所以你应该把它传递给函数来阻止表单提交。 – Noobit

非常感谢您的反馈，即时查看这两个回应，以及最挣扎的事情是理解脚本的内容和action_page.php。因为即时通讯尝试所有这些我真的很困惑功能去哪里和形式去。每当我尝试它时，都会告诉我错误文件找不到，当我按下按钮时。 – bourki

现在我修复了它，我没有找到错误文件，但它将我链接回代码。不像在片段 – bourki

答

这是你的代码的版本，不会做一个提交，而是重视的事件处理程序的按钮，并追加到DOM不是重写它。使用addEventListener附加事件处理程序，因为HTML中的onclick处理程序被认为是不好的形式。

function do_stuff() { 
 
    var x = document.getElementsByName("fullname")[0].value; 
 
    var y = document.getElementsByName("niveau")[0].value; 
 
    if (parseInt(y)>=1 && parseInt(y)<=6){ 
 
    document.body.appendChild(document.createTextNode("Bonjour "+x)); 
 
    document.body.appendChild(document.createElement("br")); 
 
    document.body.appendChild(document.createTextNode("Niveau='"+y+"'")); 
 
    } 
 
    else { 
 
    var p = document.createElement('P'); 
 
    p.style.color = "red"; 
 
    p.appendChild(document.createTextNode("Erreur le niveau doit etre en 1 et 6")); 
 
    document.body.appendChild(p); 
 
    } 
 
} 
 

 
document.addEventListener("DOMContentLoaded", function() { 
 
    for(let input of document.getElementsByTagName("input")) { 
 
    if (input.type == "button") { input.addEventListener("click", do_stuff); } 
 
    } 
 
}, false);

<form> 
 
Nom: <input type="text" name="fullname"><br><br> 
 
Niveau (1 &aacute; 6): <input type="text" name="niveau"> 
 
<input type="button" value="Afficher partie 2"> 
 
</form>

Javascript if/else on submit

相关推荐