On clicking generate i want the data to change as input given. It's changing only for a second and then back to what it was.help

Question

https://code.sololearn.com/WA5A11A21a18/?ref=app

Answer 1

Use event parameter to clear default actions

<button class="btn" id="btn" onclick="fun(event)">Generate</button>

function fun(event){
event.preventDefault();
//.....your code
}

Answer 2

dheeraj gupta your button is in a form, so it got default 'type' of "submit" and default 'action' to make a request, even if you don't have defined url to send form data at url specified in it, with
'method' attribute (GET, POST...), and then reload page with response (or blank page if no 'action' was specified)...

appart from the solution provided by Divya Mohan, you could set explicitly the 'type' attribute to 'button' in the <button> tag (same behavior witth <input>, but 'type' attribute usually set to 'button' if no needs of 'submit')...

as you use jquery to get values of form fields, you could shorter the code (along with remove 'onclick' from <button> and add 'type'):

$("#btn").on("click", () => {
$("#one").text($("#bname").val());
$("#two").text($("#name").val());
$("#four").text($("#pno").val());
$("#three").text($("#mail").val());
$("form").hide();
});

I've made some changes:
+ swap 'three' & 'four' id to reflect model
+ correct email id
+ add hide form to let see result

Answer 3

https://code.sololearn.com/WHGcaZE2mA74/?ref=app