0

I am designing a small application in .net where it dynamically creates the textbox when a "Add button" is clicked. The web page is populated with Text boxes whenever a user clicks on the button. The code where the textbox is being created dynamically is pasted below.

var newTextBoxDiv = $(document.createElement('div')) .attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html('<label> Phonenumber'+ counter + ' : </label>' +
      '<input type="text" name="textbox' + counter + 
      '" id="textbox' + counter + '" value="" >');

newTextBoxDiv.appendTo("#TextBoxesGroup");


counter++;
 });

So my next task is to use the data that is entered in the text box and do a call to the web service so that the web page gets updated once the data is entered. So, basically, for example

step1: user clicks on add Number button to add their phone number

step2: textbox is created dynamically

step3: user enters the phone number using that text box

step4: His account on siteB.com gets updated once he enters the phone number.(I was suppose to call WebService(REST) to update the SiteB.(I don't know how to do that)

krde
  • 1
  • 1

1 Answers1

0

I assume that you have a phone number regex. With dynamically added dom, you can use jquery on function for detect changes. You can make an ajax call in on event below. If you share some extra code i can help better. I think, this approach works.

function callApi(phoneNumber){
    $.ajax({ 
    type: "POST",
    dataType: "text",
    data : phoneNumber
    url: "http://restapi.com/update",
    success: function(data){        
      alert(data);
    }
   });
}
var phoneRegex = new RegExp('phoneRegex');

$(document).on('keyup','#yourtextboxid or .textboxclass', function() {
var value = $(this).val();   
if (phoneRegex.test(value)) 
{
  callApi(value);
}
});
cod3r
  • 21
  • 1
  • 6
  • Hey Thank you for replying. so I am calling an API so that I can send the data back to the server. The code that I pasted over creates textbox and button, now what I am trying to do is that call an API where it updates the number on another site using my website. My question is how will I send the data back to the server ? The JSON object that I would need to send back to the server would look something like. {"Action":"cellPhoneUpdate", "NumberType":"cellphone", "CellPhoneNumber": "95475862", "status":"changed"} something like this. – krde Apr 18 '18 at 14:43
  • Take a look at this post https://stackoverflow.com/questions/9620278/how-do-i-make-calls-to-a-rest-api-using-c – cod3r Apr 18 '18 at 17:24