I had a successful execution before adding the form tag. But somehow the JavaScript is replaced. Is there a way to do without this form submission. I need to pass the data to PHP. Thank You in Advance..
This is the html I tried
<!DOCTYPE html>
<html>
<head>
<script src="riu003.js"></script>
</head>
<body>
<form name="myform" method="post" action="/riu/riu-01/riu001.php" enctype="multipart/form-data">
<div id="aaa">
</div>
<button style="width: 100%" class="bbb" onclick="addfielderbutt()">Add Fields</button>
<button style="width: 100%; height: 45px; background-color: dodgerblue" onclick="submity()" type="Submit" value="submit">SUBMIT</button>
</form>
</body>
</html>
And here is the JavaScript file.
function createElemented(element, attribute, inner) {
if (typeof(element) === "undefined") { return false; }
if (typeof(inner) === "undefined") { inner = ""; }
var el = document.createElement(element);
if (typeof(attribute) === 'object') {
for (var key in attribute) {
el.setAttribute(key, attribute[key]);
}
}
if (!Array.isArray(inner)) { inner = [inner]; }
for (var k = 0; k < inner.length; k++) {
if (inner[k].tagName) {
el.appendChild(inner[k]);
} else {
el.appendChild(document.createTextNode(inner[k]));
}
}
return el;
};
var noofclicks = 0;
function addfielderbutt() {
noofclicks = noofclicks + 1;
var uptexty = createElemented("TEXTAREA", { class: "upt_" + noofclicks, name: "positiveuse_" + noofclicks, type: "text" }, "Type the postive uses here...");
var nptexty = createElemented("TEXTAREA", { class: "unt_" + noofclicks, name: "negativeuse_" + noofclicks, type: "text" }, "Type the negative uses here...");
var dptexty = createElemented("TEXTAREA", { class: "dpt_" + noofclicks, name: "positivedisuse_" + noofclicks, type: "text" }, "Type the postive disuses here...");
var dntexty = createElemented("TEXTAREA", { class: "dnt_" + noofclicks, name: "negativedisuse_" + noofclicks, type: "text" }, "Type the negative disuses here...");
var breakkk = createElemented("BR");
document.getElementById("aaa").appendChild(uptexty);
document.getElementById("aaa").appendChild(nptexty);
document.getElementById("aaa").appendChild(dptexty);
document.getElementById("aaa").appendChild(dntexty);
document.getElementById("aaa").appendChild(breakkk);
}
function submity(){
document.cookie = "numberofclicks="+noofclicks;
}
The problem is probably because your submit button have type="submit". Since you mentioned it was working before adding the form tag, i'm guessing that submity() is the function that sends the data to PHP, but now that you added a form tag, it will not be executed. This is because a clicking a button with type="submit" inside a form tag not only sends the form data to the link in the action attribute, but also navigates to it.
I'm fairly sure I understand the issue with your original code - that being the inability to prevent the default action occurring when using the button. I modified the code a little and added the ajax function which would allow the sending of the form data without reloading the page. Essentially the same code but rewritten to use external event listeners rather than inline event handler calls. Hope i helps.
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
/*
this is to emulate whatever code you have in
the form action /riu/riu-01/riu001.php
*/
exit( json_encode( $_POST ) );
}
?>
<!DOCTYPE html>
<html>
<head>
<title>You have got to have a title...</title>
<style>
button{ width: 100%;height:45px;background-color: dodgerblue }
.bbb{}
fieldset{border:none;}
</style>
<script>
document.addEventListener('DOMContentLoaded',()=>{
/*
presumably this will be in riu003.js
------------------------------------
*/
let counter = 0; // the counter to be incremented.
let url=location.href; // change this to "/riu/riu-01/riu001.php"
const submity=function(e){
/*
explicitly prevent the default form submission
*/
e.preventDefault();
/* The payload is a FormData object */
let payload=new FormData( document.querySelector('form[name="myform"]') );
/*
The callback can do far more than this...
*/
let callback=function( r ){
alert( r )
}
/*
send the ajax request to the backend PHP script.
The actual url used will not be `location.href`
according to the original code...
*/
ajax.call( this, url, payload, callback );
};
/* a variation on the createElemented function */
const create=function(type,attributes,parent){
try{
let el = ( typeof( type )=='undefined' || type==null ) ? document.createElement( 'div' ) : document.createElement( type );
let _arr=['innerhtml','innertext','html','text'];
for( let x in attributes ) if( attributes.hasOwnProperty( x ) && !~_arr.indexOf( x ) ) el.setAttribute( x, attributes[ x ] );
if( attributes.hasOwnProperty('innerHTML') || attributes.hasOwnProperty('html') ) el.innerHTML=attributes.innerHTML || attributes.html;
if( attributes.hasOwnProperty('innerText') || attributes.hasOwnProperty('text') ) el.innerText=attributes.innerText || attributes.text;
if( parent!=null ) typeof( parent )=='object' ? parent.appendChild( el ) : document.getElementById( parent ).appendChild( el );
return el;
}catch( err ){
console.warn( err.message );
}
};
/* ultra basic ajax function to send a POST request */
const ajax=function(url,payload,callback){
let xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( this.status==200 && this.readyState==4 )callback.call( this, this.response );
}
xhr.open('POST',url,true);
xhr.send(payload);
};
const addfielderbutt=function(e){
counter++;
/* explicitly prevent the default action being triggered */
e.preventDefault();
/* create a fieldset and append new children to it */
let fieldset=create( 'fieldset', {}, document.getElementById('aaa') );
/* add the children */
create( 'textarea',{ 'class':'upt_' + counter, name:'positiveuse_' + counter },fieldset );
create( 'textarea',{ 'class':'unt_' + counter, name:'negativeuse_' + counter },fieldset );
create( 'textarea',{ 'class':'dpt_' + counter, name:'positivedisuse_' + counter },fieldset );
create( 'textarea',{ 'class':'dnt_' + counter, name:'negativedisuse_' + counter },fieldset );
};
/*
Bind the event handlers to the buttons
*/
document.querySelector( 'button.bbb' ).addEventListener( 'click', addfielderbutt );
document.querySelector( 'button[ type="submit" ]' ).addEventListener( 'click', submity );
});
</script>
</head>
<body>
<form name='myform' method='post'>
<div id='aaa'>
<!-- generated content will appear here -->
</div>
<button class='bbb'>Add Fields</button>
<button type='Submit' value='submit'>SUBMIT</button>
</form>
</body>
</html>