Accessing value of dynamically created elements with javascript in PHP code

Question

I created some textbox dynamically with javascript. here is javascript code:

$(document).on('click','#AddHaContactNumberButton',function(e){
e.preventDefault();
var outerDiv = document.getElementById("HaContactDiv");
var textboxDiv = document.createElement('div');
textboxDiv.className = 'inputs';
var input = document.createElement('input'); 
input.type = "text"; 
input.setAttribute('name','numbersshowbox[number]');
textboxDiv.appendChild(input);
numberinfoDiv.appendChild(textboxDiv);
outerDiv.appendChild(numberinfoDiv);
});

Now, I want to access these textbox values in php code on submit button click and then save it to database. here is html code:

 <FORM ID="AddFORM" NAME="AddFORM" ACTION="./admin.php" METHOD=POST><br>
    <div class="clear">
    <INPUT CLASS="button" TYPE=SUBMIT NAME="AddHaContactNumberButton" VALUE="Add" ID="AddHaContactNumberButton">
    </div> 
    <div class="left-text-align relative-position">
    <INPUT CLASS="button" TYPE=SUBMIT NAME="AddHaContactButton" VALUE="Save" ID="AddHaContactButton">
    </div>
    </FORM>

my php code:

if ($AddHaContactButton == "Save") {
    $test = $_REQUEST['numbersshowbox[number]'];
}

the problem is $test is null. I searched and found that since javascript is client side and php is server side I cannot get the value in php unless I use ajax request. So I wrote ajax request as below:

$(document).on('click','#AddHaContactButton',function(e){
e.preventDefault();
currentForm = document.getElementById("AddFORM");
var numberarray= currentForm.elements['numbersshowbox[number]'];
if (numberarray != null) {
    var arry = [];
    for (var i = 0; i < typearray.length; i++) {
        arry.push([typearray[i].value, numberarray[i].value]);
    $.ajax({
        url: 'savePhoneNumbersInDatabase.php',
        type: 'GET',
        data: { numbersArray: arry},
        success: function(data){
             currentForm.submit();
        }
    });
}
});

Now it is working fine but the problem is that I want to save data in database in postback. I mean I want page to be refreshed after clicking submit button.

mwalt · Accepted Answer · 2017-02-17 19:19:38Z

1

If your goal is to simply refresh the page after the click event and $.ajax() call, add the following to end of the success callback in the ajax options:

location.reload();

Beyond simply answering your question, I believe it would be best practice to attach the ajax call to the submit event of the form, rather than the click event of the button. Unless there's a compelling reason you're not doing that already. Something like:

$('#AddFORM').submit(<submit handler>)

answered Feb 17, 2017 at 19:19

mwalt

537 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AmirA Over a year ago

Thank you for reply. Let me elaborate my problem. I have a form which gets contact information such as name address and ... In this form I have a button for adding contact numbers. by pressing this button some texbox will appear. In my php code I can get name address and ... as _POST variable and I save them in database. But I don't know what I should do with these contact numbers. I wrote my ajax request but first I have to save name and address into database and then I save contact numbers into another table based on contact ID.

Collectives™ on Stack Overflow

Accessing value of dynamically created elements with javascript in PHP code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related