I have an HTML form that I wanna to use to generate dynamically ADD more input fields:
<div class="row cloneDefault">
<div class="form-group col-md-1">
<br />
<h4 style="text-align:right">1.</h4>
</div>
<div class="form-group col-md-1">
<label class="control-label">First name</label>
<input type="text" value='' class="form-control" id="FirstnameField"/>
</div>
<div class="form-group col-md-2">
<label for="sname" class="control-label">last name</label>
<input type="text" value='' class="form-control" id="lastnameField"/>
</div>
<i class="remove">remove</i>
</div>
<form class="frm">
<div class="row">
<div class="form-group col-md-1">
<br />
<h4 style="text-align:right">1.</h4>
</div>
<div class="form-group col-md-1">
<label for="fname" class="control-label">First name</label>
<input type="text" value='' class="form-control" id="fname"/>
</div>
<div class="form-group col-md-2">
<label for="sname" class="control-label">last name</label>
<input type="text" value='' class="form-control" id="sname"/>
</div>
<i class="remove">remove</i>
</div>
<i class="add"> Add </i>
</form>
<style>
.cloneDefault{
display: none;
}
</style>
And JS to handle adding input fields dynamically:
$(document).ready(function() {
$(".add").click(function() {
$(".cloneDefault").clone(true).insertBefore(".frm > div:last-child");
$(".frm > .cloneDefault").removeClass("cloneDefault");
return false;
});
$(document).on('click', '.remove', function() {
$(this).parent().remove();
});
});
Now, I can easily retrieve text value from an input field by element id and then query cloud firestore:
const first_name = document.querySelector('#fname').value;
const last_name = document.querySelector('#sname').value;
firebase.firestore().collection("users").add({
fame: first_name,
sname: last_name,
}).then(function () {
console.log("success");
})
.catch(function (error) {
console.log("error:", error);
});
But how to save dynamically generated input fields in JS and save them on cloud firestore? I realised that my code to generate dynamically added input data may be unsuitable if I'd like to use it afterwards. What I wanted to do is similiar as this . Any idea?
Related
Hi , I would to ask how to add new row after we click on the 'Add row' button. I found some Javascript code and try to edit it but it doesn't work. Thank you in advance :) Here is the code that I have been using. Would you guys tell what to do or share with me any sources regarding this matter since I haven't found one. There are some similar questions in Stackoverflow but there's no answers there.
The html code :
<h1 class="h3 mb-4 text-gray-800">Requirement Validation Principles</h1>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<form>
<div class="form-row">
<div class="form-group col-md-7">
<label for="inputName1"></label>
<input type="Name" class="form-control" id="inputName1" placeholder="Name">
</div>
<div class="form-group col">
<label for="inputPassword1"></label>
<input type="name" class="form-control" id="inputPassword1" placeholder="Position">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-7">
<label for="inputName2"></label>
<input type="Name" class="form-control" id="inputName2" placeholder="Name">
</div>
<div class="form-group col">
<label for="inputPassword2"></label>
<input type="name" class="form-control" id="inputPassword2" placeholder="Position">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-7">
<label for="inputName3"></label>
<input type="Name" class="form-control" id="inputName3" placeholder="Name">
</div>
<div class="form-group col">
<label for="inputPassword3"></label>
<input type="name" class="form-control" id="inputPassword3" placeholder="Position">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-7">
<label for="inputName4"></label>
<input type="Name" class="form-control" id="inputName4" placeholder="Name">
</div>
<div class="form-group col">
<label for="inputPassword4"></label>
<input type="name" class="form-control" id="inputPassword4" placeholder="Position">
</div>
</div>
</div>
<button id="btn">Add row</button>
The javascript code :
var count=1;
$("#btn").click(function(){
$("#container").append(addNewRow(count));
count++;
});
function addNewRow(count){
var newrow='<div class="row">'+
'<div class="col-md-4">'+
'<div class="form-group label-floating">'+
'<label class="control-label">Name '+count+'</label>'+
'<input type="text" class="form-control" v-model="act" >'+
'</div>'+
'</div>'+
'<div class="col-md-4">'+
'<div class="form-group label-floating">'+
'<label class="control-label">Position '+count+'</label>'+
'<input type="text" class="form-control" v-model="section">'+
'</div>'+
'</div>'+
'</div>';
return newrow;
}
Here is the code that perfectly working.
<div class="jumbotron jumbotron-fluid" id="dataAdd">
<div class="container">
<div class="form-row">
<div class="form-group col-md-7">
<label for="inputName1"></label>
<input type="Name" class="form-control" id="inputName1" placeholder="Name" v-model="name">
</div>
<div class="form-group col">
<label for="inputPassword4"></label>
<input type="name" class="form-control" id="inputPassword1" placeholder="Position" v-model="position">
</div>
</div>
</div>
<button id="btn">Add row</button>
HTML Code input start with one.
$("#btn").click(function(){
var len=$('#dataAdd .container .form-row').length+1;
//if(len>1)
$("#dataAdd .container:last").append(' <div class="form-row">'+
'<div class="form-group col-md-7">'+
' <label for="inputName'+len+'"></label>'+
' <input type="Name" class="form-control" id="inputName'+len+'" placeholder="Name" v-model="name">'+
' </div>'+
' <div class="form-group col">'+
' <label for="inputPassword4"></label>'+
' <input type="name" class="form-control" id="inputPassword'+len+'" placeholder="Position" v-model="position">'+
' </div>'+
'</div>');
});
});
JavaScript Code added HTML in last form-control.
I have Created a working Example you can check here
Turns out there's a Javascript method called insertRow().
You'd just need to get a handle on your form by giving it and ID and then accessing that in Javascript:
var table = document.getElementById("[the ID I gave my form");
after that, use the insertRow() method on that table variable and give it a position. Then add cells to the row you just created using insertCell():
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
Instead of using InsertRow() you can alternatively put the button outside your container (the div containing the "container" class) and then use javascript to create your elements.
After all elements are created, you can simply append them to follow your desired structure.
const button = document.getElementById(#btn);
button.addEventListener('click', addRow);
function addRow(event) {
const container = document.querySelector('.container');
const row = document.createElement('div');
row.classList.add('form-row');
const group = document.createElement('div');
group.classList.add('form-group');
group.classList.add('col-md-7'); // Adjust after need.
const label = document.createElement('label');
label.setAttribute('for', 'myNewInputName');
const input = document.createElement('input');
input.setAttribute('type', 'text');
input.classList.add('form-control');
input.setAttribute('placeholder', 'My new placeholder');
// Assemble our structure.
group.appendChild(label);
group.appendChild(input);
row.appendChild(group);
container.appendChild(row);
}
Here you got a working sandbox of this example: https://codesandbox.io/s/busy-lovelace-9jw2b?file=/src/index.js.
Useful links:
appendChild
createElement
querySeleector
the more simple is to use a DOMParser
const DomParser = new DOMParser()
, myForm = document.getElementById('my-form')
, bt_Add = document.getElementById('btn-add')
;
function newRow(numRow)
{
let row_N = `
<div class="form-row">
<div class="form-group col-md-7">
<label for="inputName${numRow}"></label>
<input type="Name" class="form-control" id="inputName${numRow}" placeholder="Name ${numRow}">
</div>
<div class="form-group col">
<label for="inputPassword${numRow}"></label>
<input type="name" class="form-control" id="inputPassword${numRow}" placeholder="Position ${numRow}">
</div>
</div>`
return (DomParser.parseFromString(row_N, 'text/html')).body.firstChild
}
bt_Add.onclick =()=>
{
let rowCount = myForm.querySelectorAll('div.form-row').length
myForm.appendChild(newRow(++rowCount))
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<h1 class="h3 mb-4 text-gray-800">Requirement Validation Principles</h1>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<form action="xx" id="my-form">
<div class="form-row">
<div class="form-group col-md-7">
<label for="inputName1"></label>
<input type="Name" class="form-control" id="inputName1" placeholder="Name 1">
</div>
<div class="form-group col">
<label for="inputPassword1"></label>
<input type="name" class="form-control" id="inputPassword1" placeholder="Position 1">
</div>
</div>
</form>
</div>
<button id="btn-add">Add row</button>
<!-- /.container-fluid -->
</div>
Useful links:
appendChild
querySeleectorAll
see also : What does ${} (dollar sign and curly braces) mean in a string in Javascript?
So , basically i am trying to create a input field and when i enter a number it gives me the desired child of the same html.
now i want child to produce more children with unique name with javascript.
i am attaching the code for a better understanding.
<div class="row" id="child_nr">
<div class="col-xs-12">
<div class="form-group col-xs-6">
<div class="form-group col-xs-4">
<label for="name" class="control-label">Parameter Name: <font color="red">*</font></label>
</div>
<div class="form-group col-xs-8">
<input type="text" class="form-control required" id="param_name" name="param_name" placeholder="name" onblur="param()"/>
</div>
</div>
<div class="form-group col-xs-6">
<div class="form-group col-xs-3">
<input type="text" class="form-control required" id="parent_nr" name="parent_nr" value="0" onblur="param()"/>
</div>
<div class="form-group col-xs-5">
<label for="name" name="service_code" id="service_code" class="control-label">
Service Code </label>
</div>
<div class="form-group col-xs-4">
<input type="text" class="form-control required" name="service_code" id="service_code"/>
</div>
</div>
</div>
</div>
<script language="javascript">
function param(){
var value=parent_nr.value;
const name=document.getElementById("param_name").value;
for(var i=1;i<=value;i++)
{
const html='<div class="col-xs-12"><div class="form-group col-xs-6"><div class="form-group col-xs-7"><label for="name" class="control-label">Parameter Name'+i+': <font color="red">*</font></label></div><div class="form-group col-xs-5"><input type="text" class="form-control required" id="name" name="name" placeholder="name"/></div></div><div class="form-group col-xs-6"><div class="form-group col-xs-3"><input type="number" class="form-control required" id="parent_nr" name="parent_nr" value="0" onblur="param()"/></div><div class="form-group col-xs-5"><label for="name" name="service_code" id="service_code" class="control-label">Service Code </label></div><div class="form-group col-xs-4"><input type="text" class="form-control required" name="service_code" id="service_code"/></div></div></div>';
document.querySelector('#child_nr').insertAdjacentHTML('beforeend',html);
}
}
function sendData() {
var question = 'abc';
var c = 'cde';
$.ajax({
url: 'http://localhost/gtiemr/addnewparameter_laboratory',
type: 'POST',
data: { question: question, c: c },
success: function () {
alert('suc');
},
error: function (error) {
alert('error');
}
});
}
</script>
Also, i want to know how i can send the value to my controller using ajax so that i can send it to model.
I have a registration form that I would like to have multiple field validation. What I mean by this is if more than one field is not filled in it will be highlighted red. I have some code already written but instead of highlighting the field not filled in, it's highlighting all of them. I realise it is quite long winded but I'm fairly new to this. My JS code is as follows:
`function formCheck() {
var val = document.getElementById("fillMeIn").value;
var val = document.getElementById("fillMeIn2").value;
var val = document.getElementById("fillMeIn3").value;
var val = document.getElementById("fillMeIn4").value;
var val = document.getElementById("fillMeIn5").value;
var val = document.getElementById("fillMeIn6").value;
var val = document.getElementById("fillMeIn7").value;
if (val == "") {
alert("Please fill in the missing fields");
document.getElementById("fillMeIn").style.borderColor = "red";
document.getElementById("fillMeIn2").style.borderColor = "red";
document.getElementById("fillMeIn3").style.borderColor = "red";
document.getElementById("fillMeIn4").style.borderColor = "red";
document.getElementById("fillMeIn5").style.borderColor = "red";
document.getElementById("fillMeIn6").style.borderColor = "red";
document.getElementById("fillMeIn7").style.borderColor = "red";
return false;
}
else {
document.getElementById("fillMeIn").style.borderColor = "green";
document.getElementById("fillMeIn2").style.borderColor = "green";
document.getElementById("fillMeIn3").style.borderColor = "green";
document.getElementById("fillMeIn4").style.borderColor = "green";
document.getElementById("fillMeIn5").style.borderColor = "green";
document.getElementById("fillMeIn6").style.borderColor = "green";
document.getElementById("fillMeIn7").style.borderColor = "green";
}
}`
My HTML is as follows:
'<form id="mbrForm" onsubmit="return formCheck();" action="thanks.html" method="post">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
FIRST NAME:
<input id="fillMeIn" type="text" class="form-control" placeholder="First Name" >
</div>
<div class="col-md-4 vertical-gap">
LAST NAME:
<input id="fillMeIn2" type="text" class="form-control" placeholder="Last Name" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 vertical-gap">
ADDRESS:
<input id="fillMeIn3" type="text" class="form-control vertical-gap" placeholder="First Line" >
<input id="fillMeIn4" type="text" class="form-control vertical-gap" placeholder="Second Line" >
<input id="fillMeIn5" type="text" class="form-control vertical-gap" placeholder="Town/City" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
POST CODE:
<input id="fillMeIn6" type="text" class="form-control vertical-gap" placeholder="Postcode" >
</div>
<div class="col-md-4 vertical-gap">
PHONE No:
<input type="number" class="form-control vertical-gap" placeholder="Tel no">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
EMAIL ADDRESS:
<input id="fillMeIn7" type="email" class="form-control vertical-gap" placeholder="Email address" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row vertical-gap">
<div class="col-md-2"></div>
<div class="col-md-8">
DISCIPLINE:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
</label>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<!--<button type="button" input type="hidden" class="btn btn-success" name="redirect" value="thanks.html">SUBMIT</button>-->
<input type="submit" value="SUBMIT" class="btn btn-success btn-lg">
</div>
<div class="col-md-2"></div>
</div>
</form>'
Thanks!
You could have the ids in an Array, iterate through its values, and execute the repeatable code in a function that groups all the logic inside.
example :
["fillMeIn1", "fillMeIn2", "fillMeIn3", "fillMeIn4"].each(function(id){
// do things with id
})
Why not use the html "required" property instead?
If you want to do this with JS, you should give each variable a different name. In the code you posted you are continuously overwriting the same variable, and then, it evaluates val (which ended up being assigned to the (fill me7 value) to "", and if true, setting all the borders to red.
Set different variables, push the input values into an array when submit is triggered and loop through them if variables[i]==0, set getElementId(switch case[i] or another array with the name of the inputs[i]).bordercolor to red.
AGAIN, this sound VERY INEFFICIENT and I am not sure at all it would work. My guess is that it would take A LOT of time, and probably get timed out (except you are using some asych/try-catch kind of JS).
I would simply go for an HTML required property and then override the "required" property in CSS to make it look as you intend to. Simpler, easy and clean.
The main issue in your code is that you override the variable val each time you wrote var val = ....
Keeping your own your logic, you could write something like that.
var formModule = (function () {
var $fields = [
document.getElementById('fillMeIn'),
document.getElementById('fillMeIn2'),
document.getElementById('fillMeIn3'),
document.getElementById('fillMeIn4'),
document.getElementById('fillMeIn5'),
document.getElementById('fillMeIn6'),
document.getElementById('fillMeIn7')
];
function markInvalid($field) {
$field.style.borderColor = 'red';
}
function markValid($field) {
$field.style.borderColor = 'green';
}
return {
check: function () {
var isValid = true;
$fields.forEach(function ($f) {
if ($f.value === '') {
if (isValid) alert('Please fill in the missing fields');
isValid = false;
markInvalid($f);
}
else markValid($f);
});
return isValid;
}
};
})();
There are some extra concepts in this example which may be useful:
Working with the DOM is really slow, that's why you should
put your elements in a variable once for all and not everytime you
click on the submit button.
In my example i wrap the code with var formModule = (function () {...})();.
It's called module pattern. The goal is to prevent variables to leak in the rest of the application.
A better solution could be this one using the 'power' of html form validation:
HTML:
<form id="mbrForm" action="thanks.html" method="post">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
FIRST NAME:
<input id="fillMeIn" type="text" required class="form-control" placeholder="First Name">
</div>
<div class="col-md-4 vertical-gap">
LAST NAME:
<input id="fillMeIn2" type="text" required class="form-control" placeholder="Last Name">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 vertical-gap">
ADDRESS:
<input id="fillMeIn3" type="text" required class="form-control vertical-gap" placeholder="First Line">
<input id="fillMeIn4" type="text" required class="form-control vertical-gap" placeholder="Second Line">
<input id="fillMeIn5" type="text" required class="form-control vertical-gap" placeholder="Town/City">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
POST CODE:
<input id="fillMeIn6" type="text" required class="form-control vertical-gap" placeholder="Postcode">
</div>
<div class="col-md-4 vertical-gap">
PHONE No:
<input type="number" class="form-control vertical-gap" placeholder="Tel no">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
EMAIL ADDRESS:
<input id="fillMeIn7" type="email" required class="form-control vertical-gap" placeholder="Email address">
</div>
<div class="col-md-2"></div>
</div>
<div class="row vertical-gap">
<div class="col-md-2"></div>
<div class="col-md-8">
DISCIPLINE:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
</label>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<input id="btnSubmit" type="submit" value="SUBMIT" class="btn btn-success btn-lg">
</div>
<div class="col-md-2"></div>
</div>
</form>
JS:
var formModule = (function () {
var $form = document.getElementById('mbrForm');
var $btn = document.getElementById('btnSubmit');
var $fields = [
document.getElementById('fillMeIn'),
document.getElementById('fillMeIn2'),
document.getElementById('fillMeIn3'),
document.getElementById('fillMeIn4'),
document.getElementById('fillMeIn5'),
document.getElementById('fillMeIn6'),
document.getElementById('fillMeIn7')
];
checkValidation();
$form.addEventListener('change', checkValidation);
$form.addEventListener('keyup', checkValidation);
$fields.forEach(function ($f) {
$f.addEventListener('change', function () {
markInput($f, $f.checkValidity());
});
});
function checkValidation() {
$btn.disabled = !$form.checkValidity();
}
function markInput($field, isValid) {
$field.style.borderColor = isValid ? 'green' : 'red';
}
})();
In this example, the button gets disabled until the form is valid and inputs are validated whenever they are changed.
I added required attribute in HTML inputs so they can be handled by native javascript function checkValidity(). Note that in this case inputs email and number are also correctly checked. You could also use attribute pattern to get a more powerfull validation:
<input type="text" pattern="-?[0-9]*(\.[0-9]+)?">
Hope it helps.
I am creating input on the click of button and I want to add autocomplete functionality to it
Please note that it is working for a static element
my html code
<div class="pharmaSec">
<div class="form-group" id="medicineTable">
<div class="col-sm-8 selectContainer">
<input name="OTCtext[]" id="OTCtexts" class="form-control medicinefind"/>
</div>
<div class="col-sm-4 selectContainer">
<input type="text" class="form-control" placeholder="Qts" value="1"/>
</div>
</div>
<div class="form-group" id="medicineTableTemp">
<div class="col-sm-8 selectContainer">
<input name="OTCtext[]" id="OTCtext" class="form-control medicinefind">
<input type="hidden" id="hiddenValue" value="0">
</div>
<div class="col-sm-4 selectContainer">
<input type="text" class="form-control" placeholder="Qts" value="1"/>
</div>
</div>
my js code
$(document).ready(function () {
$('#btn_add_new').click(function () {
$('#medicineTable').append($('#medicineTableTemp').html());
$("input.medicinefind:last").focus();
});
});
$("input.medicinefind").live("keydown.autocomplete", function() {
$(this).autocomplete({source: '/medicineSearch', minLength: 1});
});
appreciate all the assistance needed.
I found my answer just in case if anyboody is stuck with the same issue
var counter = 0;
$('#btn_add_new').click(function () {
counter = counter+1;
var id = "OTCtext"+counter;
var template = ' <div class="col-sm-8 selectContainer"><input name="OTCtext[]" id="'+id+'" class="form-control medicinefind"><input type="hidden" id="hiddenValue" value="0"></div><div class="col-sm-4 selectContainer"><input type="text" name="medicine_qts[]" class="form-control" placeholder="Qts" value="1"/></div>';
$('#medicineTable').append(template);
$('#OTCtext' + counter).autocomplete({source: '/medicineSearch', minLength: 1});
});
I add a form using AJAX in a Php page now I add anther form within that form which is created using AJAX but it is not working.
This is the parent page.
<div class="col-xs-12 mg-top-30 text-left" id="studentstatus">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-2">
<label for="" class="control-label">Are you a?</label>
</div>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="studentstatus" value="fresh">Freshman</label>
<label class="radio-inline mg-top-5">
<input type="radio" name="studentstatus" value="compart">Reappeared</label>
</div>
</div>
<div id="adddata"></div>`
JQuery to working with AJAX is the following for adding First form:
$(function () {
$('#studentstatus input:radio').change(
function () {
var index = this.value;
$.get(
"add_freshman_form_in_maprevios.php", {
studentstatus: index
},
function (data) {
$("#adddata").html(data);
}
);
}
);
});
add_freshman_form_in_maprevios.php page HTML code is:
$output='<div class="col-xs-12 mg-top-10 text-left">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-2">
<label for="" class="control-label">Roll No.</label>
</div>
<div class="col-sm-2">
<input type="number" class="btn-block input-sm" placeholder="Previous roll no.">
</div>
</div>
<div class="col-xs-12 mg-top-10 text-left">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-3">
<label for="" class="control-label">Write down the names of failed papers:</label>
</div>
</div>
<div class="col-xs-12 mg-top-10 text-left">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-2">
<input type="text" class="btn-block input-sm" placeholder="Failed Paper name...">
</div>
</div>
<div class="col-xs-12 text-left">
<div class="col-sm-1 hidden-xs"></div>
<button class="mg-left-15 color addanother"> <i class="fa fa-plus-circle " > <label for="">Add another</label></i></button>
<div id="compartpaper"></div>
</div>';
echo $output;
It is working very well but when I want another textbox in this form using AJAX than it is not working. I write JQuery code for this purpose into the main page.
$('.addanother').click(function (e) {
e.preventDefault();
$.get(
"add_compart_form_in_previous_paper.php", {
username: $("#username").val()
},
function (data) {
$("#compartpaper").append(data);
}
);
});
The Form which I want to add in this page is mean :
<?php
$output='<div class="col-sm-2">
<input type="text" class="btn-block input-sm" placeholder="Failed Paper name...">
</div>';
echo $output;
?>
You're referring to an element that does not exist when the page is loaded , it is why not enter on the click event. Try this instead.
$("#adddata").on("click", ".addanother", function(){
//your code
});