CODEWITHSUNDEEP
jquery
Syazri Aris
Syazri Aris

Reputation: 53

Get the dynamic dropdown value from dynamic row

Is it possible using this script to get the value of dropdown for each row and put it in the textfield. For example, after '+' button clicked, and dropdown clicked, the value of the dropdown appears in the textfield. Here is the code:

<html>
<head></head>
<body>
<form>
<table>
<tr>
  <td>Name:- </td>
  <td><input type="text" name="userid" id="userid"/></td>
</tr>

<tr>
  <td>Gender:- </td>
  <td><select name="select_gender" id="select_gender">
<option value="M">Male</option>
<option value="F">Female</option>
</select></td>
</tr>
<tr>
  <td>City:- </td>
  <td><input type="text" name="city" id="city"/></td>
</tr>
<tr>    
<td><input type="button" id="savebtn" value="Save"/></td>
</tr>

</table>
<div id="selected_text"> 

</div>
<div id="selected_urls"> 
<a href="http://msatuniverse.net/main.aspx">E-Support </a>
<a href="http://ontime.mahindrasatyam.com/">Ontime </a>
</div>
<table>
<tr>
<td>
<table id="fmly_dtls" border=1>
    <tr>
        <td>
            <input type="text" id="member_nm">
                </td> 
        <td>
            <select id="select_member_relation" onchange="">
                <option value="F">Father</option>
                <option value="M">Mother</option>
                <option value="H">Husband</option>
                <option value="W">Spouse</option>
                <option value="S">Son</option>
                <option value="D">Daughter</option>
            </select>
                </td>  
        <td>
            <input type="text" id="member_dob">
                </td> 
<td>
            <input type="button" id="madd" value="+">/<input type="button" id="mdelete" 

value="-">
                </td> 

         </tr>
</table>
</td>
</tr>

<tr>
<td>
<table>
<tr>
    <td><input type="button" id="finalbtn" value="Final"></td>
</tr>
</table>
</td>
</tr>
</table>

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

<script type="text/javascript" src="jquery-1.8.3.js"></script>          
 <script type="text/javascript">
$(document).ready(function() {

    var windowSizeArray = ["width=200,height=200", "width=300,height=400,scrollbars=yes"];
    $("a[href]").click(function() {
        alert('Hi');

        var url = $(this).attr("href");
        var windowName = "popUp"; //$(this).attr("name"); 
        var windowSize = windowSizeArray[$(this).attr("rel")];
        alert(windowSize);
        window.open(url, windowName, windowSize);
    });

    $("#madd").click(function() {

        //.html to find out the html content data.val() is not working when selected div tag.
        if ($("#selected_text").html() != '') {
            //we need to findout particular textboxes using find function
            $(this).closest("tr").clone(true).appendTo("#fmly_dtls").find('input').val('');
        } else {
            alert('Please save the data');
        }
    });
    $("#mdelete").click(function() {


        $(this).closest("tr").remove();

    });

    $("#select_member_relation").change(function(){

        $("#fmly_dtls tr").each(function(i) {

             $("#member_nm").val($(this).find("#select_member_relation").val());
             //alert('xxx');
        });


        })
        .trigger('change');


    $("#select_member_relationxx").change(function() {
        var membrdt = '';

        $("#fmly_dtls tr").each(function(i) {

            var myValue2 = $(this).find("#select_member_relation").val()
            $("#member_nm").val($(this).find("#select_member_relation").val());

                        alert(myValue3);
            alert(myValue2);
            });
        });

    $("#finalbtn").click(function() {
        var membrdt = '';

        $("#fmly_dtls tr").each(function(i) {
            var myValue2 = $(this).find("#select_member_relation").val();
            //var myValue2 = $("#select_member_relation").val();
            alert(myValue2);
            //alert(myValue2.find('member_nm'));
        });

    });
    $("#savebtn").click(function() {
        var gender = '',
            name = '',
            gender_text = '',
            address = '';
        gender = $("#select_gender").val();
        //without option:selected attribute, it can retrived the text like Male Female
        gender_text = $("#select_gender option:selected").text();
        name = $("#userid").val();
        address = $("#city").val();
        //alert(gender+','+name+','+gender_text);
        //var _this = this; //or var $_this = this; $("#selected_text").parent().html(data); 
        var data = name + ',' + gender_text + ',' + address + '<a href="http://www.google.co.in/" > google</a>';

        $("#selected_text").html(data);
        $("#selected_text").css('background-color', 'red');
        $("#selected_urls").hide();
        //$("#selected_text").html=data;
    });
});

</script>

Upvotes: 0

Views: 2023

Answers (1)

bipen
bipen

Reputation: 36531

before checking the fiddle..here are some of the things that you should take care..

1) ID should always be unique... your cloned item had the same id as the original element had.. so in your case there was multiple Id with a same name...

changes: make all the ids of cloned element class..

2) your codes had some parse error like.. input tag was not closed properly ( <input />).this is minor but its better if we don't make these mistakes.

3) changed all your events selector to class.. ($(".mdelete").click(function() {.. , $(".select_member_relation").change(function(){.... so on)

4) used this codes to find the selected value and put it into input 

$(this).parent().prev().find("input.member_nm").val($(this).val());

fiddle here

Upvotes: 1

Related Questions