Have been trying to collect the data entered into input fields that have NOT been submitted and post that data into another div buy pressing a button.
Html
<form>
<div class="div1"><input type="text" name="data1"></div>
<div class="div2"><input type="text" name="data2"></div>
<div class=submitformbutton" type="submit" name="submit" ></div>
</form>
<div class="capture_button"></div>
<div class="divoutput"> list data captured here </div>
It is still unclear what you are trying to do, but this will simply move the data out of the input fields an into your output area. There is no AJAX or form submission needed to do this.
// Get references to the DOM elements we'll need to use
var frm = document.querySelector("form");
var capBtn = document.querySelector(".capture_button");
var out = document.querySelector(".divoutput");
// Set up click event handler for capture button
capBtn.addEventListener("click", function(){
var outputString = "<ul>";
// Loop through form elements and write data to output area
for(var i = 0; i < frm.elements.length; i++){
// Ignore the submit button
if(frm.elements[i].type !== "submit"){
outputString += "<li>" + frm.elements[i].name + " = " + frm.elements[i].value + "</li>";
}
}
out.innerHTML = outputString + "</ul>";
// Show the submit button for further processing
document.querySelector(".submitformbutton").classList.remove("hidden");
// Hide the capture button
this.classList.add("hidden");
});.capture_button {
border:1px solid black;
background-color:#e0e0e0;
display:inline-block;
margin:5px 0;
padding:3px;
cursor:pointer;
}
.hidden { visibility:hidden; }<div>
<form>
<div class="div1"><input type="text" name="data1"></div>
<div class="div2"><input type="text" name="data2"></div>
<button class="submitformbutton hidden" type="submit">Submit</button>
</form>
</div>
<div>
<span class="capture_button">Capture the form data</span>
<div class="divoutput"></div>
</div></div>
You can use this script.
$(".capture_button").click(function() {
var data1 = $("[name='data1']").val();
var data2 = $("[name='data2']").val();
$(".divoutput").append(data1+ " " + data2);//or you can use html instead of append
});
I hope, this script will solve your problem.