javascript - 如何以 Laravel 形式开发 javascript 事件句柄

标签 javascript php jquery forms laravel-5

我需要在我的 laravel 应用程序中开发带有输入文本框、单选按钮和可选值的表单。 这是我的简单表格

<html>
<head>
<title>Form Generation</title>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="name"><br><br>

<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>

<br><br>

<select name="cars">
    <option value="volvo">Volvo XC90</option>
    <option value="saab">Saab 95</option>
    <option value="mercedes">Mercedes SLK</option>
    <option value="audi">Audi TT</option>
  </select>

<br><br>

<input type="submit">
</form>


</body>
</head>
</html> 

我需要在“我的页面”中初始仅显示输入框

Name: <input type="text" name="name"><br><br> 

然后当光标选择输入框并输入一些值时,我需要显示(加载)表单的其他项目

<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>

<br><br>

<select name="cars">
    <option value="volvo">Volvo XC90</option>
    <option value="saab">Saab 95</option>
    <option value="mercedes">Mercedes SLK</option>
    <option value="audi">Audi TT</option>
  </select>

<br><br>

<input type="submit">
</form>

我该怎么做?

最佳答案

使用下面的:

$(function(){
$('[name=name]').keyup(function(){
if($(this).val()){
$('div.somename').show();
}
else{
$('div.somename').hide();
}
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="welcome.php" method="post">
Name: <input type="text" name="name"><br><br>

<div style='display:none'; class='somename'>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>

<br><br>

<select name="cars">
    <option value="volvo">Volvo XC90</option>
    <option value="saab">Saab 95</option>
    <option value="mercedes">Mercedes SLK</option>
    <option value="audi">Audi TT</option>
  </select>

<br><br>

<input type="submit">
</div>
</form>

关于javascript - 如何以 Laravel 形式开发 javascript 事件句柄,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44736781/

相关文章:

Javascript 需要使用带有 id 的 <a href> 链接传递变量

PHPUnit 代码覆盖率和异常

php - PDO SELECT 未完成或引发异常

php - 如何使用 OR 和 AND 进行过滤

javascript - 使用 jquery 在移动平板电脑和桌面分辨率中显示不同尺寸的图像

javascript - JQUERY 表单验证无法正常工作

javascript - 使用 Javascript 和 AJAX 将用户重定向到最近且最快的 Web 服务器?

javascript - 重置按钮在加载 JavaScript 时不起作用

javascript - Service Worker 未在 Angular 中注册

jquery - Safari 鼠标左移位置(x 坐标)不正确