Question

我有一个页面，用户可以在选择框中选择预定义的客户端。我的javascript正在加载来自DB的联系人姓名和地址，但如果用户选择free，他会获得文本输入字段，他可以在其中输入免费联系人。

我使用同时更改和就绪事件来执行此操作，我还在函数末尾添加了.change()。我需要使用这两个事件，因为我希望我的页面在页面准备好和用户更改选择框时运行ajax。

问题是当选择free选项并输入名称，地址，邮政编码等时，所有输入文本字段（在id_client == free条件中使用）都不保留文本，它们会得到空...

我会提供任何帮助来解决这个问题！我是一个JS新手，所以也许你会找到其他小的（或更大的）东西来修复:-) 谢谢你的帮助！

$(document).on('change ready', function(){
$(".select_client").ready(function() {

var e = document.getElementById("InputClient");
var id_client = e.options[e.selectedIndex].value;

if (id_client == "free") // values are not empty
 {
 $('div#contactCatcher').html("<div class=\"form-group\"><label for=\"ContactNom\">Nom</label><input type=\"text\" class=\"form-control\" name=\"contact_nom\" id=\"ContactNom\"></div><div class=\"form-group\"><label for=\"ContactAdresse\">Adresse</label><input type=\"text\" class=\"form-control\" name=\"contact_adresse\" id=\"ContactAdresse\"></div><div class=\"form-group col-xs-6\"><label for=\"ContactCodePostal\">Code postal</label><input type=\"text\" class=\"form-control\" name=\"contact_code_postal\" id=\"ContactCodePostal\"></div><div class=\"form-group col-xs-6\"><label for=\"ContactVille\">Ville</label><input type=\"text\" class=\"form-control\" name=\"contact_ville\" id=\"ContactVille\"></div><div class=\"form-group\"><label for=\"ContactPays\">Pays</label><input type=\"text\" class=\"form-control\" name=\"contact_pays\" id=\"ContactPays\"></div>");
}
else if (id_client) 
{
$.ajax({
    type: "POST",
    url: "http://satch/suivi-hbl/misc/scripts/get_client.pl", // URL of the Perl script

    // send id_client and name as parameters to the Perl script
    data: "id_client_facture=" + id_client,

    // script call was *not* successful
    error: function() { 
        alert("script call was not successful");
    }, 

    // script call was successful 
    // perl_data should contain the string returned by the Perl script 
    success: function(perl_data){
        $('div#contactCatcher').html(perl_data);
    }
});   
}

else {
$('div#contactCatcher').html("Veuillez s\&eacute\;lectionner un client.");
//  $('div#contactCatcher').addClass("error");
}

$('div#contactCatcher').fadeIn();
return false;
}).change();
});

这是HTML的一部分：

    <!-- ----------------- Show client ---------------- -->
    <p><div id="contactCatcher">Veuillez s&eacute;lectionner un client.
    </div></p>


    <!-- ----------------- Selection client ---------------- -->
    <form id="loginForm" name="loginForm" method="post" action="script.pl">

    <div class="form-inline">
        <label for="InputClient">Client &nbsp; </label>
            <select class="form-control select_client" name="id_client_facture" id="InputClient">
            <option value="">Select please</option>
            <option value="1">John Woolof</option>
            <option value="2">Marc Dabrani</option>
            ......
            <option value="free">Other</option>
            </select>
    </div>

    ........

Answer 1

您的div#contactCatcher不在表单标记中，而在if (id_client == "free")中您添加了没有表单标记的输入标记。

当Id_client空闲时，尝试在输入标记周围添加表单标记。

我测试了您的代码并进行了一些修改。我认为错误在于您使用.change()和.ready()。

请尝试下面的代码。我希望这会对你有所帮助。

HTML：

<!-- ----------------- Show client ---------------- -->
<div id="contactCatcher">
    <p>Veuillez s&eacute;lectionner un client.</p>
</div>


<!-- ----------------- Selection client ---------------- -->
<form id="loginForm" name="loginForm" method="post" action="script.pl">

<div class="form-inline">
    <label for="InputClient">Client &nbsp; </label>
        <select class="form-control select_client" name="id_client_facture" id="InputClient">
        <option value="">Select please</option>
        <option value="1">John Woolof</option>
        <option value="2">Marc Dabrani</option>
        ......
        <option value="free">Other</option>
        </select>
</div>

js：

$(document).ready(function(){
    $("#InputClient").change(function() {
    var id_client = $(this).val();

    if ($(this).val() == "free") // values are not empty
    {
        $('div#contactCatcher').html("<div class=\"form-group\"><label for=\"ContactNom\">Nom</label><input type=\"text\" class=\"form-control\" name=\"contact_nom\" id=\"ContactNom\"></div><div class=\"form-group\"><label for=\"ContactAdresse\">Adresse</label><input type=\"text\" class=\"form-control\" name=\"contact_adresse\" id=\"ContactAdresse\"></div><div class=\"form-group col-xs-6\"><label for=\"ContactCodePostal\">Code postal</label><input type=\"text\" class=\"form-control\" name=\"contact_code_postal\" id=\"ContactCodePostal\"></div><div class=\"form-group col-xs-6\"><label for=\"ContactVille\">Ville</label><input type=\"text\" class=\"form-control\" name=\"contact_ville\" id=\"ContactVille\"></div><div class=\"form-group\"><label for=\"ContactPays\">Pays</label><input type=\"text\" class=\"form-control\" name=\"contact_pays\" id=\"ContactPays\"></div>");
    }
    else if ($(this).val() == "") 
    {
        $('div#contactCatcher').html("Veuillez s\&eacute\;lectionner un client."); 
    }else {

        $.ajax({
            type: "POST",
            url: "http://satch/suivi-hbl/misc/scripts/get_client.pl", // URL of the Perl script

            // send id_client and name as parameters to the Perl script
            data: "id_client_facture=" + id_client,

            // script call was *not* successful
            error: function() { 
                alert("script call was not successful");
            }, 

            // script call was successful 
            // perl_data should contain the string returned by the Perl script 
            success: function(perl_data){
                $('div#contactCatcher').html(perl_data);
            }
        }); 
    }

    $('div#contactCatcher').fadeIn();
    return false;
    });
});

Answer 2

找到解决方案。我把整个功能加倍了！它当然不是解决这个问题的最好方法，也不是很干净，但它有效......第一个函数用于change()事件，第二个函数用于ready()。在第二个，我没有加倍我的代码中不需要的html返回代码。

$(document).ready(function(){
$(".select_client").change(function() {

var e = document.getElementById("InputClient");
var id_client = e.options[e.selectedIndex].value;

if (id_client != "free")
 {


if (id_client) 
{
$.ajax({
    type: "POST",
    url: "http://satch/suivi-hbl/misc/scripts/get_client.pl", // URL of the Perl script

    // send id_client and name as parameters to the Perl script
    data: "id_client_facture=" + id_client,

    // script call was *not* successful
    error: function() { 
        alert("script call was not successful");
    }, 

    // script call was successful 
    // perl_data should contain the string returned by the Perl script 
    success: function(perl_data){
        $('div#contactCatcher').html(perl_data);
    }
});   
}

else {
$('div#contactCatcher').html("Veuillez s\&eacute\;lectionner un client.");
//  $('div#contactCatcher').addClass("error");
}


$('div#contactCatcher').fadeIn();
return false;

}
else
{
$('div#contactCatcher').html("<div class=\"form-group\"><label for=\"ContactNom\">Nom</label><input type=\"text\" class=\"form-control\" name=\"contact_nom\" id=\"ContactNom\"></div><div class=\"form-group\"><label for=\"ContactAdresse\">Adresse</label><input type=\"text\" class=\"form-control\" name=\"contact_adresse\" id=\"ContactAdresse\"></div><div class=\"row\"><div class=\"form-group col-xs-6\"><label for=\"ContactCodePostal\">Code postal</label><input type=\"text\" class=\"form-control\" name=\"contact_code_postal\" id=\"ContactCodePostal\"></div><div class=\"form-group col-xs-6\"><label for=\"ContactVille\">Ville</label><input type=\"text\" class=\"form-control\" name=\"contact_ville\" id=\"ContactVille\"></div></div><div class=\"form-group\"><label for=\"ContactPays\">Pays</label><input type=\"text\" class=\"form-control\" name=\"contact_pays\" id=\"ContactPays\"></div>");
}

});


}).change();








$(document).ready(function(){
$(".select_client").ready(function() {

var e = document.getElementById("InputClient");
var id_client = e.options[e.selectedIndex].value;

if (id_client) 
{
$.ajax({
    type: "POST",
    url: "http://satch/suivi-hbl/misc/scripts/get_client.pl", // URL of the Perl script

    // send id_client and name as parameters to the Perl script
    data: "id_client_facture=" + id_client,

    // script call was *not* successful
    error: function() { 
        alert("script call was not successful");
    }, 

    // script call was successful 
    // perl_data should contain the string returned by the Perl script 
    success: function(perl_data){
        $('div#contactCatcher').html(perl_data);
    }
   });   
}



});


});

jQuery - 为什么文本字段变空？

2 个答案: