Develop Reference

Download the responses of a html form to a text file

I have an HTML form with a few questions. After answering each when the user clicks submit, I want the responses to get downloaded either in a text file or a pdf file. I'm not either getting "null" written in that file.
<form class="contact100-form validate-form">
<div id="source">
<div class="wrap-input100 validate-input" required="required">
<span class="label-input100"><h4>Name</h4></span>
<input
id="source"
class="input100"
type="text"
name="name"
placeholder="enter your full name..."
/>
</div>
<div class="wrap-input100 validate-input" required="required">
<span class="label-input100"><h4>Your Birthday</h4></span>
<input
id="source"
class="input100"
type="text"
name="name"
placeholder="write your complete DOB dd-mm-yyyy..."
/>
</div>
<div class="wrap-input100 validate-input" required="required">
<span class="label-input100"><h4>Contact Number (Primary)</h4></span>
<input
id="source"
class="input100"
type="text"
name="name"
placeholder="this is most important..."
/>
</div>
<div class="container-contact100-form-btn">
<div class="wrap-contact100-form-btn">
<div class="contact100-form-bgbtn"></div>
<button type="button" id="save" title="Save as text file">
Send
</button>
</div>
</div>
</div>
</form>
<script type="text/javascript">
// when document is ready
document.getElementById("save").onclick = function () {
// when clicked the button
var content = document.getElementById("source").getAttribute("value");
// a [save as] dialog will be shown
window.open(
"data:application/txt," + encodeURIComponent(content),
"_self"
);
};
</script>

.getAttribute("value")
The value attribute holds the default value for the element.
The current value, which will be what the user has typed in, is held in the value property.
Use .value.

You need different id (and name) for each input.
You also need to replace .getAttribute("value") with .value
The following code works:
<form class="contact100-form validate-form">
<div id="source">
<div class="wrap-input100 validate-input" required="required">
<span class="label-input100"><h4>Name</h4></span>
<input id="name" class="input100" type="text" name="name" placeholder="enter your full name..." />
</div>
<div class="wrap-input100 validate-input" required="required">
<span class="label-input100"><h4>Your Birthday</h4></span>
<input id="birthday" class="input100" type="text" name="birthday" placeholder="write your complete DOB dd-mm-yyyy..." />
</div>
<div class="wrap-input100 validate-input" required="required">
<span class="label-input100"><h4>Contact Number (Primary)</h4></span>
<input id="contactNb" class="input100" type="text" name="contactNb" placeholder="this is most important..." />
</div>
<div class="container-contact100-form-btn">
<div class="wrap-contact100-form-btn">
<div class="contact100-form-bgbtn"></div>
<button type="button" id="save" title="Save as text file">Send</button>
</div>
</div>
</div>
</form>
<script type="text/javascript">
document.getElementById("save").onclick = function () {
var name = document.getElementById('name').value;
var birthday = document.getElementById('birthday').value;
var contactNb = document.getElementById('contactNb').value;
var content = " name: " + name + "\n birthday: " + birthday + "\n contact number: " + contactNb
window.open( "data:application/txt," + encodeURIComponent(content), "f.txt" );
};
</script>
edit: in order to choose the filename, follow this link:
https://stackoverflow.com/a/7034818/3520059

Is this the right way to implement google recpatcha v3?

I've added the snippet inside the tag:
<script src='https://www.google.com/recaptcha/api.js?render=EXAMPLE123456789-_987654321'></script>
After that, I added this javascript callback inside each form on the site: (grecaptcha above the submit button).
<form accept-charset="UTF-8" target="_blank" action="https://website.infusionsoft.com/app/form/process/1234567890" class="infusion-form" id="inf_form_1234567890" method="POST">
<input name="inf_form_xid" type="hidden" value="1234567890" />
<input name="inf_form_name" type="hidden" value="First Last.com&#a;Web Form submitted&#a;HOME PAGE&#a;First / Last" />
<input name="infusionsoft_version" type="hidden" value="1.00.00.1" />
<div>
<div>
<p class ="white">Register Now</p>
</div>
</div>
<div>
<div> </div>
</div>
<div class="user-fields">
<div class="infusion-field">
<label for="inf_field_FirstName_home">First Name *</label>
<input class="infusion-field-input" id="inf_field_FirstName" name="inf_field_FirstName" placeholder="First Name *" type="text" required />
</div>
<div class="infusion-field">
<label for="inf_field_Email_home">Email *</label>
<input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text" required />
</div>
</div>
<div>
<div> </div>
</div>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('EXAMPLE123456789-_987654321', {action: 'homepage'})
.then(function(token) {
// Verify the token on the server.
});
});
</script>
<div class="infusion-submit">
<button class="infusion-btn" type="submit">Submit!</button>
</div>
</form>
<script type="text/javascript" src="https://website.infusionsoft.com/app/webTracking/getTrackingCode"></script>
<script type="text/javascript" src="https://website.infusionsoft.com/app/timezone/timezoneInputJs?xid=12345678900987654321"></script>
Is this the correct way?

javascript function to insert values from content-editable span to a hidden form

I am trying to fetch values from editable spans for hidden form to a hidden form via this javascript:
<script type="text/javascript">
function fillup() {
document.getElementById('fname').value = document.getElementById('nfname').innerHTML;
document.getElementById('mname').value = document.getElementById('nmname').innerHTML;
document.getElementById('lname').value = document.getElementById('nlname').innerHTML;
document.getElementById('email').value = document.getElementById('nemail').innerHTML;
document.getElementById('gen').value = document.getElementById('ngen').innerHTML;
document.getElementById('dob').value = document.getElementById('ndob').innerHTML;
var str = document.getElementById('nloc').innerHTML;
var parts = str.split(',');
document.getElementById('city').value = parts[0];
document.getElementById('state').value = parts[1];
if(document.getElementById('fname').value == '' || document.getElementById('mname').value == '' || document.getElementById('lname').value == '' || document.getElementById('email').value == '' || document.getElementById('gen').value == '' || document.getElementById('dob').value == '' || document.getElementById('city').value == '' || document.getElementById('state') == '' ){
alert('something is empty!');
}
else {
alert(str);
}
}
</script>
and following is the form:
<form method="post" action="{{ path('admin_update') }}">
<div class="hidden">
<input type="text" id="fname" name="fname" />
<input type="text" id="mname" name="mname" />
<input type="text" id="lname" name="lname" />
<input type="email" id="mail" name="email" />
<input type="text" id="gen" name="gen" />
<input type="text" id="dob" name="dob" />
<input type="text" id="city" name="city" />
<input type="text" id="state" name="state" />
</div>
<input type="submit" id="btn" value="save changes" onclick="fillup()" />
</form>
as said earlier, except the submit button other textareas are disabled in the form, the spans are:
<div class="row">
<div class="fname">
<span class="fname" id="nfname" contenteditable="true" onchange="appear()">{{ fname }}</span>
<hr />
<span class="st">First name</span>
</div>
<div class="mname">
<span class="mname" id="nmname" contenteditable="true" onchange="appear()">{{ mname }}</span>
<hr />
<span class="st">Middle name</span>
</div>
<div class="lname">
<span class="lname" id="nlname" contenteditable="true" onchange="appear()">{{ lname }}</span>
<hr />
<span class="st">Last name</span>
</div>
</div>
<div class="row">
<div class="email">
<span class="email" id="nemail" contenteditable="true">{{ email }}</span>
<hr />
<span class="st">Email</span>
</div>
</div>
<div class="row">
<div class="gender">
<span class="gender" id="ngen" contenteditable="true">{{ gen }}</span>
<hr />
<span class="st">Gender</span>
</div>
<div class="DOB">
<span class="DOB" id="ndob" contenteditable="true" id="datepicker">{{ dob|date("m/d/Y") }}</span>
<hr />
<span class="st">Date of birth</span>
</div>
<div class="loc">
<span class="loc" id="nloc" contenteditable="false">{{ loc }}</span>
<hr />
<span class="st">Location</span>
</div>

I've put your code into a plunkr
https://plnkr.co/edit/n8m58L7dFiFOPJBKJfvI?p=preview
To me it looks ok - and it definitly works, as far as I understand your requirement.
I would suggest to bind the function call "fillup()" to the onSubmit event of the form.
<form method="post" action="." onSubmit="fillup()">
Also please check for this line in the function:
document.getElementById('email').value = document.getElementById('nemail').innerHTML;
The element's id is NOT "email" - it is "mail"

Edit localStorage user?

Hello i am trying to edit the user with localStorage, but can't seem to parse the value of my user info to the input field of my "EditUser" form.
I have read that set/getItem() should be used, but have tried with my User:index without success.
How can i EDIT the current user that has logged in via localStorage?
Fiddle example
http://jsfiddle.net/f3dsfpob/6/
HTML
<form id="userReg">
<div class="item text">
<label>Username:</label>
<div class="field">
<input type="text" name="user_name" id="nameUSER" />
</div>
</div>
<div class="item text">
<label>Password:</label>
<div class="field">
<input type="password" name="password" />
</div>
</div>
<div class="button-wrapper">
<div class="item button button-default">
<div class="field">
<input type="submit" id="registerUser" value="Register" />
</div>
</div>
</div>
<input type="hidden" name="id_entry" value="0" />
</form>
<fieldset name="Login" id="logUser">
<legend>Login</legend>
<input type="text" name="first_name" id="firstName" />
<br />
<input type="password" id="passWord" />
<br />
<div class="item button">
<div class="field">
<input type="button" id="logIN" value="login" />
</div>
</div>
<p id="result"></p>
<p id="negative"></p>
</fieldset>
<div id="form">
<form id="EditUser">
<table class="form">
<tr>
<td>
<input type="text" name="changeUser" placeholder="username" />
</td>
</tr>
<tr>
<td>
<input type="text" name="changePass" placeholder="password" />
</td>
</tr>
<tr>
<td colspan="2" class="button">
<input id="formSubmit" type="button" value="Undo" onClick="dbClear()" />
<input id="formSubmit" type="button" value="Change" onClick="dbEdit()" />
</td>
</tr>
</table>
<input id="inputAction" type="hidden" name="action" value="add" />
<input id="inputKey" type="hidden" name="key" value="0" />
</form>
</div>
<p id="loginResult"></p>
<p id="negative"></p>
<p id="registerResult"></p>
JAVASCRIPT
var User = {
index: window.localStorage.getItem("User:index"),
$form: document.getElementById("userReg"),
$button_register: document.getElementById("registerUser"),
$button_login: document.getElementById("logIN"),
init: function () {
if (!User.index) {
window.localStorage.setItem("User:index", User.index = 1);
}
User.$form.addEventListener("submit", function (e) {
var entry = {
id: parseInt(this.id_entry.value),
user_name: this.user_name.value,
password: this.password.value,
e_mail: this.e_mail.value
};
if (entry.id == 0) {
User.storeAdd(entry);
}
e.preventDefault();
}, true);
User.$button_login.addEventListener("click", function (e) {
for(var i = 1; i < User.index; i++) {
var key = "User:" + i;
var entry = JSON.parse(localStorage[key]);
console.log("entry : ", key, entry);
if (document.getElementById("firstName").value == entry.user_name && document.getElementById("passWord").value == entry.password) {
alert("Logged in as"+" "+entry.user_name);
document.getElementById("loginResult").innerHTML = "Logged in as"+" "+entry.user_name;
console.log("entry : ", key, entry);
LoginUser();
e.preventDefault(e);
}
else
{
document.getElementById("negative").innerHTML = "Username or Password does not match";
}
}
});
},
storeAdd: function (entry) {
entry.id = User.index;
window.localStorage.setItem("User:index", ++User.index);
window.localStorage.setItem("User:" + entry.id, JSON.stringify(entry));
document.getElementById("registerResult").innerHTML = "Registration succesful";
return;
}
};
User.init();

You have a couple of things wrong.
e_mail: this.e_mail.value
There is no email field. This throws an error and makes your form submit handler not prevent default.
Btw - it may not be a good idea to store user info in LocalStorage like that.

How to close fancybox and reset input form values

Hello I have a contact us form using fancybox, and I want to reset/clear the form input values when fancybox closes (either when user clicks outside the popup or using the "close" popup button)
the element which holds the fancybox content is 'inline' so my guess was:
...
$("#fancybox-overlay").fancybox({
'afterClosed': function() {
$('#inline').hide(250, function() {
$('#name input').val('');
$('#phone input').val('');
$('#email input').val('');
$('#subject input').val('');
$('#msgcontent textarea').val('');
$('#security_code input').val('');
$('#name input').removeClass('error');
$('#phone input').removeClass('error');
$('#email input').removeClass('error');
$('#subject input').removeClass('error');
$('#msgcontent textarea').removeClass('error');
$('#security_code input').removeClass('error');
$('#security_code_error').html('');
});
}
});
But the result is as below:
before :
and after:
Any help to make the form values reset/cleared during a "close" action from clicking outside the popup, will be very much appreciated. Thanks.
UPDATE:
The html requested by #Spokey is:
<div id="inline" style="z-index:999999;">
<h2 class="popupheader">...Contact Us: Send us a Message</h2>
<div style="margin:2% 8%;background:#fff;border-radius:5px;width:auto;box-shadow: 3px 3px 10px #bbb;">
<p style="display:inline-block;padding:10px;">
...
</p>
<p style="display:inline-block;padding:10px;float:right;">
...
</p>
</div>
<form id="contact" name="contact" action="#" method="post">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" class="txt" style="margin-left: 3px">
<br>
<label for="phone">Your Phone No.</label>
<input type="text" id="phone" name="phone" class="txt" >
<br>
<label for="email">Your E-mail</label>
<input type="email" id="email" name="email" class="txt">
<br>
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" class="txt" size="45">
<br>
<label for="msgcontent">Enter a Message</label>
<textarea id="msgcontent" name="msgcontent" class="txtarea" style="margin-left: 3px"></textarea>
<br>
<label for="security_code" style="width:auto;">Verify you are human</label>
<img border="0" id="captcha" src="../../image.php" alt=""> <a href="JavaScript: new_captcha();">
<img border="0" alt="" src="../../images/refresh.png" align="bottom"></a>
<input name="security_code" id="security_code" class="txt" style="width:150px;vertical-align: top;margin: 0px;" size="20" type="text" >
<span id="security_code_error" name="security_code_error" style="background:#fefefe;color:red;"></span><? /*<div class="field_error error_pos"><?php if($error['security_code'] != "") echo $error['security_code']; ?></div> */ ?>
<br />
<hr style="color:#f2f2f2;border:1px solid #f2f2f2;width:auto;">
<button id="send" name="send">Send Message</button>
</form>
</div>

And you can do it a lot more easier and cleaner. E.g. if you want to clear all input fields just do it that way without repetitive and spaghetti code:
document.getElementById("yourFormId").reset();

You don't need to hide #inline, as the plugin will hide it itself
$("#fancybox-overlay").fancybox({
'afterClose': function() {
$('#inline input, #inline textarea').val('');
$('#inline').children().removeClass('error');
$('#security_code_error').empty();
}
});
NOTE changed 'afterClosed' for fancybox2
to 'afterClose' (typo error)