CODEWITHSUNDEEP
javascriptjqueryjspservlets
DeSmOnd
DeSmOnd

Reputation: 178

Unable to get value from request after using jquery

I am unable to get correct value of request.getParameter("Identification-Type") when I am trying to run this form. Demo 1

HTML:

<form name="pancettaForm" method="post" action="demor" id="pancettaForm">
<ul>
    <li>
        <label for="PartyChoose">Choose Appropriate Party:</label>
    </li>
    <br>
    <input id="person" name="PartyChoose" type="radio" value="update-person" class="required" />Person
    <br />
    <input id="organization" name="PartyChoose" type="radio" value="update-organization" class="required" />Organization
    <br />
    <li id="Family-Name" style="display: none;"><span>
        <input type="checkbox" class="Family-Name" value="Family-name" name="Family-name">
        <label for="Family-Name"><em>*</em>Family Name:</label>
        <input type="text" name="Family-Name" class="required">
    </li>
    <li id="Organization-Name" style="display: none;"><span>
        <inpname="Organization-name">
        <label for="Organization-Name"><em>*</em>Organization Name:</label>
        <input type="text" name="Organization-Name" class="required">
    </li>


                    <li id="Identification-Type" style="display: none;"><span>Identification Type:
                        <select name="Identification-Type" class="Identification-Type">
                            <label for="Identification-Type">Identification Type:</label>
                            <option value="0">--Select--</option>
                            <option value="1">1</option>
                        <select>
                        <a id="Identification-Number" style="display: none;">
                            <input type="checkbox" class="Identification-Number" value="Identification-Number" name="Identification-number" id="Identification-Number">
                            <label for="Identification-Number"><em>*</em>Identification Number:</label>
                            <input type="text" name="Identification-Number">
                                </a></li>


    <li id="Adminsys-Type" style="display: none;"><span>Admin System Type:
        <select name="Adminsys-Type" class="Adminsys-Type">
            <label for="Adminsys-Type">Admin Type:</label>
            <option value="0">--Select--</option>
        </select>
    </li>
    <li id="Adminsys-Number" style="display: none;"><span>
        <input type="checkbox" class="Adminsys-Number" value="Adminsys-Number" name="Adminsys-number">
        <label for="Adminsys-Number"><em>*</em>Admin System Value:</label>
        <input type="text" name=Adminsys-Number>
    </li>
</ul>
<input type="submit" id="button" name="submit" value="Search">

JS:

$(document).ready(function () {
var counter = 0;



$('input[name=Organization-Name]').attr('disabled', true);
$('input[name=Identification-Number]').attr('disabled', true);
$('input[name=Family-Name]').attr('disabled', true);
$('input[name=Adminsys-Number]').attr('disabled', true);

$('#pancettaForm').change(function () {


    $('.Organization-Name').click(function () {
        if ($('.Organization-Name').is(':checked')) {
            $('input[name=Organization-Name]').val('').attr('disabled', false);
        } else {
            $('input[name=Organization-Name]').attr('disabled', true);
        }

    });

    $('#pancettaForm').on('change', '.Identification-Number', function () {
        var $this = $(this);
        var $input = $this.siblings('input[type=text]');

        if ($this.is(':checked')) {
            $input.val('').attr('disabled', false);
        } else {
            $input.attr('disabled', true);
        }
    });
    $('.Adminsys-Number').click(function () {
        if ($('.Adminsys-Number').is(':checked')) {
            $('input[name=Adminsys-Number]').val('').attr('disabled', false);
        } else {
            $('input[name=Adminsys-Number]').attr('disabled', true);
        }

    });
    $('.Family-Name').click(function () {
        if ($('.Family-Name').is(':checked')) {
            $('input[name=Family-Name]').val('').attr('disabled', false);
        } else {
            $('input[name=Family-Name]').attr('disabled', true);
        }

    });
    $('#Family-Name,#Identification-Number,#Organization-Name').hide();
    if ($('#person').prop('checked')) {
        $('#Family-Name,#Identification-Type,#Identification-Number,#Adminsys-Number,#Adminsys-Type,#addRow,#removeRow').show();


    } else if ($('#organization').prop('checked')) {
        $('#Organization-Name,#Identification-Type,#Identification-Number,#Adminsys-Number,#Adminsys-Type,#addRow,#removeRow').show();

    }
});
$('<div/>', {
    'class': 'extraPerson',
    html: GetHtml()
}).appendTo('#container');




$('#addRow').click(function () {
    if (counter > 10) {
        alert("Only 10 textboxes allow");
        return false;
    }



    $('<div/>', {
        'class': 'extraPerson' + counter,
            'id': 'extraPerson' + counter,
        html: GetHtml() + '<tr><a href="javascript:void(0);" class="removeRow" ><i class="icon-plus-sign icon-white"></i> Remove Identifier</a><tr>'
    }).hide().appendTo('#container').slideDown('slow');



    counter++;


});



$("#container").on('click', '.removeRow', function () {
    //$("#extraPerson"+counter).remove();
    if (counter < 1) {
        alert("No more textbox to remove");
        return false;
    }
    counter--;
    $(this).parent().remove();


});

function GetHtml() {
    // var len = $('.extraPerson').length;
    var $html = $('.extraPersonTemplate').clone();
    $html.find('[name=Identification-Number]')[0].name = "Identification-Number" + counter;
    $html.find('[id=Identification-Number]')[0].name = "Identification-Number" + counter;
    $html.find('[name=Identification-Type]')[0].name = "Identification-Type" + counter;
    // $html.find('[id=Identification-Type]')[0].id="Identification-Type" + counter;

    // var remove='<a href="javascript:void(0);" class="removeRow" ><i class="icon-plus-sign icon-white"></i> Remove Identifier</a>';
    return $html.html();
}});

But if I use this type of form with reduced scripts and functionality, I am getting correct value of request.getParameter("Identification-Type"). Demo 2

HTML:

<form name="pancettaForm" method="post" action="demor" id="pancettaForm">
<ul>
    <li>
        <label for="PartyChoose">Choose Appropriate Party:</label>
    </li>
    <br>
    <input id="person" name="PartyChoose" type="radio" value="update-person" class="required" />Person
    <br />
    <input id="organization" name="PartyChoose" type="radio" value="update-organization" class="required" />Organization
    <br />
    <li id="Family-Name" style="display: none;"><span>
        <input type="checkbox" class="Family-Name" value="Family-name" name="Family-name">
        <label for="Family-Name"><em>*</em>Family Name:</label>
        <input type="text" name="Family-Name" class="required">
    </li>
    <li id="Organization-Name" style="display: none;"><span>
        <inpname="Organization-name">
        <label for="Organization-Name"><em>*</em>Organization Name:</label>
        <input type="text" name="Organization-Name" class="required">
    </li>


                    <li id="Identification-Type" style="display: none;"><span>Identification Type:
                        <select name="Identification-Type" class="Identification-Type">
                            <label for="Identification-Type">Identification Type:</label>
                            <option value="0">--Select--</option>
                            <option value="1">1</option>
                        <select>
                        <a id="Identification-Number" style="display: none;">
                            <input type="checkbox" class="Identification-Number" value="Identification-Number" name="Identification-number" id="Identification-Number">
                            <label for="Identification-Number"><em>*</em>Identification Number:</label>
                            <input type="text" name="Identification-Number">
                                </a></li>


    <li id="Adminsys-Type" style="display: none;"><span>Admin System Type:
        <select name="Adminsys-Type" class="Adminsys-Type">
            <label for="Adminsys-Type">Admin Type:</label>
            <option value="0">--Select--</option>
        </select>
    </li>
    <li id="Adminsys-Number" style="display: none;"><span>
        <input type="checkbox" class="Adminsys-Number" value="Adminsys-Number" name="Adminsys-number">
        <label for="Adminsys-Number"><em>*</em>Admin System Value:</label>
        <input type="text" name=Adminsys-Number>
    </li>
</ul>
<input type="submit" id="button" name="submit" value="Search">

JS:

$(document).ready(function () {
$('input[name=Organization-Name]').attr('disabled', true);
$('input[name=Identification-Number]').attr('disabled', true);
$('input[name=Family-Name]').attr('disabled', true);
$('input[name=Adminsys-Number]').attr('disabled', true);

$('#pancettaForm').change(function () {


    $('.Organization-Name').click(function () {
        if ($('.Organization-Name').is(':checked')) {
            $('input[name=Organization-Name]').val('').attr('disabled', false);
        } else {
            $('input[name=Organization-Name]').attr('disabled', true);
        }

    });

    $('#pancettaForm').on('change', '.Identification-Number', function () {
        var $this = $(this);
        var $input = $this.siblings('input[type=text]');

        if ($this.is(':checked')) {
            $input.val('').attr('disabled', false);
        } else {
            $input.attr('disabled', true);
        }
    });
    $('.Adminsys-Number').click(function () {
        if ($('.Adminsys-Number').is(':checked')) {
            $('input[name=Adminsys-Number]').val('').attr('disabled', false);
        } else {
            $('input[name=Adminsys-Number]').attr('disabled', true);
        }

    });
    $('.Family-Name').click(function () {
        if ($('.Family-Name').is(':checked')) {
            $('input[name=Family-Name]').val('').attr('disabled', false);
        } else {
            $('input[name=Family-Name]').attr('disabled', true);
        }

    });
    $('#Family-Name,#Identification-Number,#Organization-Name').hide();
    if ($('#person').prop('checked')) {
        $('#Family-Name,#Identification-Type,#Identification-Number,#Adminsys-Number,#Adminsys-Type,#addRow,#removeRow').show();


    } else if ($('#organization').prop('checked')) {
        $('#Organization-Name,#Identification-Type,#Identification-Number,#Adminsys-Number,#Adminsys-Type,#addRow,#removeRow').show();

    }
});});

Upvotes: 0

Views: 272

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40296

The dynamic creation of the form in case 1 replaces the name of the <select name="Identification-Type"> to Identification-Type0, Identification-Type1 etc. See this line in JS:

$html.find('[name=Identification-Type]')[0].name = "Identification-Type" + counter;

You will either have to modify the client-side code or the server-side to do the following, if you know there will be only one:

request.getParameter("Identification-Type0");

Or the following, if there can be many:

Enumeration<String> paramNames = request.getParameterNames();
while( paramNames.hasMoreElements() ) {
    String name = paramNames.nextElement();
    if( name.startsWith("Identification-Type") {
        // GOT IT
    }
}

Upvotes: 1

Related Questions