Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
prasanth sfdcprasanth sfdc 

Jquery populate sibling fields in table


I am trying to populate the one input text field(after entering the date) into another inputtext field in table at visualforce page. I am using change function but, it is not working. Please help me to solve this. Even alert is also not working in my change function code.

Visualforce and apex code below. 
  
<apex:page controller="jquerytableaddrows">
  
  <head>
<title>jQuery Add Elements to DOM</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var dropdwn='';

dropdwn = '{!optionsstr}';

  $j = jQuery.noConflict();
  
    $j(document).ready(function(){
        $j("#btn").click(function(){
 $j("#tabletab").append('<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class=".cfonee" id="cfone" name="customFieldName[]" value="" placeholder="Input Name" /> &nbsp;'+dropdwn +' <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> &nbsp; <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');
    });
        
        
        
       $j("#tabletab").on('click','.remCF',function(){
        $j(this).parent().parent().remove();
    });
   
       $j('input[id$=cfone]').change(function(){
         alert('123123');
        });
  
        });
   
    
   
    
</script>
</head>
<body>
    <p>This is a paragraph.</p>
 
    <button id="btn">Add new list item</button><br/>
    <table class="ipfields" id="tabletab">
    </table>
    <ol>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
    </ol>
</body> 
  </apex:page>
  
public class jquerytableaddrows {

public list<string> names{set;get;}
public string optionsstr{set;get;}

public jquerytableaddrows()
{
names = new list<string>();
optionsstr = '<select>';
 for(contact con:[select name from contact  order by createddate asc limit 10])
 {
     optionsstr = optionsstr + '<option value=\"' + con.name +'\">'+con.name+'</option>';
 
// optionsstr=+ '<option value='+"volvo">Volvo</option>
 }
 optionsstr = optionsstr +'</select>';

 
}
}

User-added image