Javascript 选择更改时的PHP HTML JQuery使用PHP值填充文本字段_Javascript_Php_Jquery_Html_Ajax

Javascript 选择更改时的PHP HTML JQuery使用PHP值填充文本字段

javascript php jquery html ajax

Javascript 选择更改时的PHP HTML JQuery使用PHP值填充文本字段,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我不知道如何命名这个问题，但我可以在这里解释我的情况，我有以下代码这不是一个真实的数据，我必须创建这个来告诉你们我想要什么 <!DOCTYPE html> <html> <head> <title>Multiple form submit </title> </head> <body> <form action="test.php" method="POST"> First Nam

我不知道如何命名这个问题，但我可以在这里解释我的情况，我有以下代码这不是一个真实的数据，我必须创建这个来告诉你们我想要什么

<!DOCTYPE html>
<html>
<head>
    <title>Multiple form submit </title>


</head>
<body>
<form action="test.php" method="POST">
    First Name : <input type="text" name="fname" /><br />
    Last Name : <input type="text" name="lname" /><br />
    Gender : <input type="text" name="gender" /><hr />
    <select class="form-control input-sm" name="rta_address" id="rta_address">
        <option value="2">5, Footer street, AA2 2KK</option>
        <option value="23">44, Header street ZZ6 7FF</option>
        <option value="28">56, Oak street, DD5 5LL</option>
        <option value="33">5, (flat 5) Temple street, EE2 9HH</option>
    </select>
    <br />
    Postcode : <input type="text" name="postcode" /><br />
    House No : <input type="text" name="houseno" /><br />
    Street : <input type="text" name="street" /><br />

    <input type="submit" name="submit" value="Save" />

</form>
</body>
</html>

我想知道的是。。。若用户除了下拉框中提供的地址之外并没有其他地址，那个么用户可以从下拉框中选择一个值，该值应该填充这些地址文本字段，否则用户可以手动键入

请记住，如果表格中有大约40个项目，我只在这里向您展示了7或8个项目，那么提交表格我认为不是一个好主意，因为在那个时候表格并没有完全填写

还请注意，所有地址都是通过一个循环来自数据库的

我希望你明白我的意思

如果需要解决这个问题，请随时询问任何问题

关于

您可以使用jQuery库轻松实现它。下面是代码示例

$(document).on('change','#rta_address',function(e){
             if($.trim($(this).val())!=''){

                       var tmp= $(this).val().split(" ");
                       var house_no=tmp[0];
                       var street=tmp[1]+" "+tmp[2];
                       var post_code=tmp[3]+" "+tmp[4]; 
                       $('input[name="postcode"]').val(post_code) ;
                       $('input[name="houseno"]').val(house_no) ;
                       $('input[name="street"]').val(street) ;
             }

});

您可以使用jQuery库轻松实现它。下面是代码示例

$(document).on('change','#rta_address',function(e){
             if($.trim($(this).val())!=''){

                       var tmp= $(this).val().split(" ");
                       var house_no=tmp[0];
                       var street=tmp[1]+" "+tmp[2];
                       var post_code=tmp[3]+" "+tmp[4]; 
                       $('input[name="postcode"]').val(post_code) ;
                       $('input[name="houseno"]').val(house_no) ;
                       $('input[name="street"]').val(street) ;
             }

});

您可以这样做：

 $('#rta_address').change(function(){
      var data = $(this).text().split(',');
      $('input[name="houseno"]').val($.trim(data[0])) ;
      $('input[name="street"]').val($.trim(data[1])) ;
      $('input[name="postcode"]').val($.trim(data[2])) ;  

 });

是，您可以执行空选择，如：

在jquery中

 $('#rta_address').append($('<option>-- SELECT --</option>');
 $('#rta_address').text('-- SELECT --');

或者在html中，将其添加到选择

 <option selected="selected">-- SELECT --</option>

您可以这样做：

 $('#rta_address').change(function(){
      var data = $(this).text().split(',');
      $('input[name="houseno"]').val($.trim(data[0])) ;
      $('input[name="street"]').val($.trim(data[1])) ;
      $('input[name="postcode"]').val($.trim(data[2])) ;  

 });

是，您可以执行空选择，如：

在jquery中

 $('#rta_address').append($('<option>-- SELECT --</option>');
 $('#rta_address').text('-- SELECT --');

或者在html中，将其添加到选择

 <option selected="selected">-- SELECT --</option>

以下是一个例子-

可以为每个选项使用数据属性例如：

在选择选项中，您需要使用正确的格式来区分邮政编码、房屋号和街道。像5英尺的街道，AA2 2KK应该是5英尺的街道，AA2 2KK。如果数据可以这样格式化，那么是的，这是可能的。@好的，让我们这样做，但如何…：DYou将需要一个适当的格式来区分选择选项中的邮政编码、房屋号和街道。像5英尺的街道，AA2 2KK应该是5英尺的街道，AA2 2KK。如果数据可以这样格式化，那么是的，这是可能的。@好的，让我们这样做，但如何…：d唯一的问题是，您可能不知道地址部分中有多少个单词。是@JayBlanchard，选项值为空。需要使用文本部分。您不能将$this.val.split更改为$this.text.split。他没有为下拉菜单指定值，只指定文本。虽然他应该在选项上设置一个值，以便更好地进行操作，并在表单提交时使用，但在“，”上拆分，而不是在空格上拆分，road Fire Flower Avenue将解析为比Dove road更多的片段。唯一的问题是，您可能不知道地址部分中可能包含多少单词。是@JayBlanchard，选项值为空。需要使用文本部分。您不能将$this.val.split更改为$this.text.split。他没有为下拉菜单指定值，只指定文本。虽然他应该为选项设置一个值，以便更好地操作和在提交表单时使用，但在“，”上拆分，而不是在空间上拆分，road Fire Flower Avenue将比Dove road分解成更多的碎片。谢谢@ThinkDifferent我可以问你一些事情吗。。正如您所见，下拉框将显示选中的第一个项目，但我不希望在页面开头选择任何内容，只要选择一个选项，该选项就应该为空disappear@UsmanSharifAmjadKhan是的，你可以。请检查更新后的答案。一旦更改，它会消失吗？因为我不想在用户选择正确选项后显示空的选择选项。。。Thanksys一旦用户选择了一个选项，用户将只看到所选的选项：非常感谢您的回答，但我问了其他问题，但没关系，我将使用jquery删除第一个空白选项Thank you@ThinkDifferent我可以在这里问您一些问题吗。。正如您所见，下拉框将显示选中的第一个项目，但我不希望在页面开头选择任何内容，只要选择一个选项，该选项就应该为空disappear@UsmanSharifAmjadKhan是的，你可以。请检查更新后的答案。一旦更改，它会消失吗？因为我不想在用户选择正确选项后显示空的选择选项。。。Thanksys一旦用户选择了一个选项，用户将只看到所选的一个：非常感谢您的回答，但我问了其他问题，但没关系，我将使用jquery删除第一个空白选项