【问题标题】:Populate form with data from another form使用来自另一个表单的数据填充表单
【发布时间】:2015-01-03 08:26:54
【问题描述】:

我有一个带有小游览的页面,游览点内是输入。此页面上还有另一个表单,这些表单具有相似的输入,包括名字、姓氏等...

如果用户在表格 1 中输入他们的名字,我如何填写表格 2 的名字字段?

这是表格 1:

<form role="form" id="inviteform3" class="form-inline" action="name.php" method="POST">
<div class="form-group">
<input type="text" class="form-control input-sm" name="name" placeholder="First Name" 
id="hello" autocomplete="off" style="margin-top:10px">
                            </div>
                            <center>
                            <span id="start">Let's get started, <span id="result"></span></span>


                            <button class="btn btn-brand btn-sm next-screen animated bounceInUp" 
id="go" style="margin-top:5px; display:none" href="#services" data-animation-delay=".5s"> 
Let's Go!</button></center>
    <button class="btn btn-block btn-brand btn-xs invitebtn3" id="casi" type="submit" 
style="margin-top:5px"><i class="fa fa-thumbs-o-up"></i> Submit</button>

</form>

这是表格 2:

<form role="form" id="inviteform" class="form-inline" 
action="http://omnihustle.net/demo/invitations/invite_request" type="POST"><div 
class="form-group">
<input type="text" class="form-control input-sm" id="InputFirstName" placeholder="First 
Name">
                            </div>
    <div class="form-group">
<input type="text" class="form-control input-sm" id="InputLastName" placeholder="Last 
Name">
                            </div>

<div class="form-group">
<input type="email" class="form-control input-sm" id="InputEmail" placeholder="Email">
  </div>

<button class="btn btn-brand btn-sm invitebtn" type="submit" data-toggle="modal" data-
target=".bs-example-modal-sm"><i class="fa fa-check fa-fw"></i> Invite Me</button></form>

这是表单发送到的我的 php 文件:

<html>
<body>

<?php session_start(); ?>

<?php
 if  (isset($_POST['name']) && !empty($_POST['name'])) {
    $_SESSION['name'] = $_POST['name'];
 }
?>

<?php echo $_POST["name"]; ?>

</body>

</html>

由于我无法在表单的“值”字段中输入 html,因此 Jquery 无法正常工作,那么还有什么替代方法?

这是我尝试过的;

<script>

$(document).on("ready", function(){
//Form action
$("#inviteform3").on("submit", function(event){
// Stop submit event
event.preventDefault();
$.ajax({
    type:'POST', 
    url: 'name.php',
    data:$('#inviteform3').serialize(), 
    success: function(response)  
    {
        $('#inviteform3').find('#result').html(response);
        $('.coupontooltip5').find('#result2').html(response);
        $('#announcement').find('#result3').html(response);
        $('#announcement2').find('#result4').html(response);
        $('#progressbutton').find('#result5').html(response);
        $('#inviteform').find('#result6').html(response);


    }});
});
});

</script>

我尝试在输入的“value”标签中输入“span id="result6”,但表单不允许该功能,只是将html显示为输入的默认值..

【问题讨论】:

  • Jquery has not worked since I am unable to enter html into the "value" field of the form 你应该发布你失败的尝试,因为 jQuery 肯定适用于它
  • 我已经添加了我尝试过的内容,@A。沃尔夫。我的错误可能很愚蠢。
  • 仅供参考,$(document).on("ready", handler); 对于 jquery 就绪处理程序来说是非常糟糕的语法。现在response 是什么?
  • 不完全确定,@A。沃尔夫。可能在 ajax 中使用某种速记来触发成功时的初始函数?我完全编造了。
  • 在成功回调中:console.log(response);,所以预期控制台中的响应?您必须学习如何使用控制台调试 javascript

标签: javascript php jquery html forms


【解决方案1】:

您可以添加一个“keyup”处理程序,将内容复制到第二个字段。将以下行添加到“就绪”处理程序中。

$('#hello').on('keyup', function() {
  $('#InputFirstName').val($(this).val());
});

如果您添加一个“更改”处理程序而不是这个“keyup”处理程序,则仅在该字段失去焦点后调用该处理程序。

顺便说一下,name.php 不起作用。 session_start() 必须在进行任何输出之前调用。因此:

<?php session_start(); ?>
<html>
<body>

【讨论】:

  • 真的很棒。谢谢你。 @k.abbey
猜你喜欢
  • 2019-01-04
  • 1970-01-01
  • 2015-08-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-04-22
相关资源
最近更新 更多