javascript - 提交时,将表单值存储在变量中,然后以第二个表单显示

标签 javascript jquery forms

在这里处理一个简单的问题。最后,该项目将采用用户提交的名称并将前两个字母大写。

但是现在我只是试图将用户的输入存储在一个变量中,然后以“结果”形式显示完全相同的内容。不确定我哪里出错了。

JSFiddle:http://jsfiddle.net/Ever/DQn57/

HTML:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript"     
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">   
</script>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <script src="application.js"></script>
    <title>Tim's Name Capitalizer!</title>
</head>
<body>
    <h2>Name Capitalizer</h2>

    <div class="intro">
    Welcome! Enter your name below (first and last) then press "SUBMIT" to see 
what happen!
    <br>
    </div>

    <br>    

    <form>
    Enter Here:
    <br>
    <input type="text" name="name" id="enteredFormName" placeholder="Your 
Name">
    </form>
    <br>

    <form>
    Result:
    <br>
    <input type="text" name="fixName" id="fixedFormName" placeholder="Your  
Name">
    </form>
    <br>
    <button>Submit</button>
</body>
</html>

CSS:

div.intro{
font-weight: bold;
width: 50%;
}

form.questions{
text-align: left;
font-size: 25px;
width: 500px;
height: 100px;
border: 1px solid black;
padding: 5px;
}

JS:

$(document).ready(function(){ 

     //when the <submit> button is clicked
     $('button').click(function(){

     //store the user's entry in a variable
     var enteredName = document.getElementById('enteredFormName').value;

     //update the html in the second form to show the user's entered name
     $('#fixedFormName').value(enteredName);
    });
}

最佳答案

http://jsfiddle.net/dwebexperts/U68ny/2/

替换这个:

$(document).ready(function(){ 

     //when the <submit> button is clicked
     $('button').click(function(){

     //store the user's entry in a variable
     var enteredName = document.getElementById('enteredFormName').value;

     //update the html in the second form to show the user's entered name
     $('#fixedFormName').value(enteredName);
    });
}

用这个:-

$(document).ready(function(){ 

         //when the <submit> button is clicked
         $('button').click(function(){

         //store the user's entry in a variable
         var enteredName = document.getElementById('enteredFormName').value;
         //OR var enteredName = $('#enteredFormName').val();
         //update the html in the second form to show the user's entered name
         $('#fixedFormName').val(enteredName);
        });
    });

您在 "$(document).ready(function(){ " 的关闭时也有问题,您正在使用 } 关闭它,而这只是,它需要 }); 最后。

关于javascript - 提交时,将表单值存储在变量中,然后以第二个表单显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24645321/

相关文章:

javascript - 是否可以用 `position: absolute` 模拟元素的 `position: relative` 放置?

javascript - 从数组生成所有不同的非空子数组,并保留顺序

javascript - Angular 2 alpha 22,如何通过属性将值传递给组件?

javascript - 使用 onchange 事件时如何简化显示/隐藏 div?

javascript - Jquery:当 ajax 请求失败并出现错误 500 时脚本停止

html - 一栏中的表格和另一栏中的文本段落

javascript - 检测父级为 contenteditable div 的 contenteditable child 的 keyup 事件

jquery - 是否可以在 jquery 选择的插件选项中显示 html 内容?

javascript - 如何使用js更改自动响应中的行

php - 如何创建 PHP 登录表单重定向回保留 $_POST 和 $_GET 的页面