You are viewing limited content. For full access, please sign in.

Question

Question

Javascript Table

Forms Web Customizations
Updated March 6, 2017
asked on February 28, 2017 • Show version history

Hi,

I have a simple script which concatenates 2 fields, it works fine on the first row of the table, however if I add further rows it doesn't do the needful.

Can someone please tell what am I doing wrong?

$('#Field7\\(1\\)').on("change", function () {
      	 var x = $('[id^=Field12\\(]').val();
		 var y = $('[id^=Field11\\(]').val();
//DisplayName field q10
	$('[id^=Field10\\(]').val(x+" "+ y);

 

0 0

Answer

SELECTED ANSWER
replied on March 1, 2017

I think the problem is the first row, that's loaded when the page is loaded, gets the jQuery binding but then subsequent rows, added after that pageload event, don't know any better. For minimal edits to your javascript and form, you could do something like this:

 

$(document).ready(function () {
  
  //Initial binding
  RebindRowAction();
  
  
  //After row is added
  $("table").on("change", function () {				
    RebindRowAction();    
  });

  //Function that actually does the magic of concatenating two fields within the same row
  function RebindRowAction(){
    $("input[id^=Field7]").on("change", function () {				
      var x = $(this).parents("tr").find("input[id^=Field12]").val();
      var y = $(this).parents("tr").find("input[id^=Field11]").val();
      var z = x.concat(y);  
      $(this).parents("tr").find("input[id^=Field10]").val(z);
    });    
  }
  
  
});

Basically, if a row is added, it fires off the $("table").on("change",... function, which rebinds all rows in that table again, making sure the latecomers know what to do too. 

The few changes are in the x and y variables, where instead of trying to grab the right row number, it's just grabbing those fields in the row that was edited. Of course, I'm assuming all these fields are in the same row. If that's not the case, we'll need to adjust this example. 

1 0

Replies

replied on February 28, 2017

You might want to try applying classes to those fields and use that instead of IDs. 

It'd also be insightful to see if the function is being called from the new created rows - so just adding an

alert("function called");

before 

var x = $('[id^=Field12\\(]').val();

If it shows that alert, the problem is in the function identifying the fields in the new rows; if it doesn't show, your event  binding needs to be changed. 

0 0
replied on March 1, 2017

Thanks Andrew,

Since it's a table, the value increments as per the row number: Field10(2)

I had another issue long back which is mentioned here: http://answers.laserfiche.com/questions/95314/Javascript-table-field-dropdown-option

 

However, that time it was only the static value, which is not the case....Any help?

0 0
replied on March 2, 2017

Thanks Andrew, it's really kind of you!!!

Works like a charm

0 0
replied on March 2, 2017

Andrew,

One more thing I got stuck into, please see the below, I want these if & else if included inside the function:

 

if $(this).parents("tr").find("input[id^=Field85]").val() == ("Bern"){
            $('[id^=Field84]').val("3");
          $('[id^=Field82').val("Sw");
          $("input[id^=Field83").val("de-CH");
          $('[id^=Field80').val("6");

 

I know this is wrong, but I want to know how would I include it inside the RebindRowAction function?

Thanks,

Sahil

0 0
View 8 previous replies
replied on March 2, 2017 • Show version history


Great, I'm glad it worked for you!

Again, assuming these are part of the same row, you could change the RebindRowAction function to something like:

  //Function that actually does the magic of concatenating two fields within the same row
  function RebindRowAction(){
    
	//Concatenate fields 12 & 11 when field 7 changes
	$("input[id^=Field7]").on("change", function () {				
      var x = $(this).parents("tr").find("input[id^=Field12]").val();
      var y = $(this).parents("tr").find("input[id^=Field11]").val();
      var z = x.concat(y);  
      $(this).parents("tr").find("input[id^=Field10]").val(z);
    });  

	//Check for Bern after Field 85 has changed    
	$("input[id^=Field85]").on("change", function () {
		//If it's Bern, pre-set other fields
		if ($(this).val() == "Bern") {
			$(this).parents("tr").find("[id^=Field84]").val("3");
			$(this).parents("tr").find("[id^=Field82]").val("Sw");
			$(this).parents("tr").find("[id^=Field83]").val("de-CH");
			$(this).parents("tr").find("[id^=Field80]").val("6");		
		}
    }); 
  }


I'm not sure when you'd want the javascript to check if Field85 is "Bern". For the purposes of just illustrating what's possible, I put it inside a changed event on that field. 

0 0
replied on March 3, 2017

Hi Andrew,

I guess I got some issues..

 

The if statement works fine, if only there is if statement, however when I add else if then the whole code doesn't work.

$(document).ready(function() {

//Initial binding
  RebindRowAction();

//After row is added
  $(".NewUser").on("change", function () {        
    RebindRowAction();    
  });
  
  //Function that actually does the magic of concatenating two fields within the same row
  function RebindRowAction(){ 
      $('.short').change(function(){
      var x = $(this).parents("tr").find("input[id^=Field12]").val();
      var y = $(this).parents("tr").find("input[id^=Field11]").val();
      var z = (x+" "+ y);      
      $(this).parents("tr").find("input[id^=Field10]").val(z);
      
      //Email Field 15 
        var x = $(this).parents("tr").find("input[id^=Field12]").val();
        var y = $(this).parents("tr").find("input[id^=Field11]").val();
      var mail = (x+"."+ y+'@test.com');
      var mail = mail.replace(/\s+/g, '');
      $(this).parents("tr").find("input[id^=Field15]").val(mail);
        
      //Capitalize First Name
        var text = $(this).parents("tr").find("input[id^=Field12]").val();
        var text = text.replace(/^.|\s.|-./g, function (txt) { return txt.toUpperCase(); });
        $(this).parents("tr").find("input[id^=Field12]").val(text);
        
        //Capitalize Last Name
        var text = $(this).parents("tr").find("input[id^=Field11]").val();
        var text = text.replace(/^.|\s.|-./g, function (txt) { return txt.toUpperCase(); });
        $(this).parents("tr").find("input[id^=Field11]").val(text);
      
       
        $("select[id^=Field85]").on("change", function () {
          
    if ($(this).val() == "Bern") {
      $(this).parents("tr").find("[id^=Field84]").val("3011");
      $(this).parents("tr").find("[id^=Field82]").val("Switzerland");
      $(this).parents("tr").find("[id^=Field83]").val("de-CH");
      $(this).parents("tr").find("[id^=Field80]").val(" 6");    
    }
         
         else if ($(this).val() == "Berlin"){
        $(this).parents("tr").find("[id^=Field84]").val("6900");
      $(this).parents("tr").find("[id^=Field82]").val("Switzerland");
      $(this).parents("tr").find("[id^=Field83]").val("de-CH");
      $(this).parents("tr").find("[id^=Field80]").val(" 4");  
        }
        
        
          });
   });     
        
 }
  
 
 //Email Lower Case
$('.mail').change(function() {
    $('.mail input').val( Lower($('.mail input').val()));
 }); 
  
 
  
  
  var Team = function(){
    
  if ($('[id^=Field6\\(]').val() == "Team BE"){
            $('[id^=Field85\\(]').val("Bern");
          
        }
  else if ($('[id^=Field6\\(]').val() == "Team BR"){
          $('[id^=Field85\\(]').val("Berlin");  
          
        }
  
      }
                          
    $('[id^=Field6\\(]').on('blur change', Team);
  
  
 
});

Also, somehow when I change the value of field 85 in the first row the values don't show up...

I know I will have to move the function Team also inside the RebindRowAction, but just wanted to get to the else if first.

 

Regards,

Sahil

0 0
replied on March 3, 2017

Andrew,

I figured out why the first row was not making the change, however my elseif is still not working...

 

0 0
replied on March 3, 2017

I think you're just missing an ending 

});

for your 

$('.short').change(function(){

So maybe adding that missing close right before your other on change event:

$("select[id^=Field85]").on("change", function () {

 

0 0
replied on March 3, 2017

P.S. The developer tools in Chrome are superb. You can launch that and see if there are any javascript errors on your page. 

0 0
replied on March 3, 2017

Thanks 

I figured that out 

My issue is that only if statement executes & the else if it's not working?

0 0
replied on March 3, 2017

You might double-check the Select field you're watching (select[id^=Field85]) actually has a value for Berlin (case-sensitive). 

Another quick test is to try for Berlin in the if and Bern in the else if.

0 0
replied on March 3, 2017

Thanks 

Will try on Monday & let you know 

 

Thanks a lot Andrew!!!

0 0
replied on March 5, 2017

Andrew,

I changed the value, it only takes the first value i.e. the one in the if statement, else if gets totally ignored.

This happens if I give the value in the field or not, the effect is same.

 

Any help....

0 0
replied on March 6, 2017

Andrew,

It works now, I had a mistake in the syntax & could figure out!!!

 

Thanks a lot man!

0 0
replied on March 6, 2017

Andrew,

I got in further trouble, but have opened another question : https://answers.laserfiche.com/questions/116478/Javascript-formating-phone-number

 

Can you please please help?

Regards,

Sahil

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...