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
Related
I'm trying to select a form element in javascript using the querySelector but it won't work and sometime it returns the form element.
Here's my code:
JavaScript
const ele = document.querySelector('form');
console.log(ele);
ele.addEventListener('submit', function(e) {
console.log("in the eventlister function");
const pass = document.getElementsByClassName("P")[0].value;
const cpass = document.getElementsByClassName("CP")[0].value;
const messagePara =document.getElementById("generated_message");
if(pass != cpass){
e.preventDefault();
messagePara.textContent ="check your password!!";
messagePara.style.color= 'red';
return false;
}
else{
messagePara.textContent ="";
}
});
HTML
<form class="inputF">
<div class="inputD">
<label for="fname" >Full Name</label>
<input type="text" id="fname" required>
</div>
<div class="inputD">
<label for="uname">Username</label>
<input type="text" id="uname">
</div>
<div class="inputD">
<label>Email address</label>
<input type="email" id="Email" placeholder="example#gmail.com" required >
</div>
<div class="inputD">
<label for="phn">Phone Number</label>
<input type="number" id="phn">
</div>
<div class="inputD">
<label for="pass">Password</label>
<div class="pass">
<input type="password" class="P IptP" required>
<i class="fa fa-eye-slash show-hide"></i>
</div>
</div>
<div class="inputD">
<label for="cpass">Confirm Password</label>
<div class="pass">
<input type="password" class="CP IptP" required>
<i class="fa fa-eye-slash show-hide"></i>
</div>
</div>
<div>
<button id="save_btn" >Continue</button>
</div>
</form>
I tried adding class for the form and select the form using the ClassName but still the same problem occurred. How can I fix this problem ?
When manipulating the DOM with a <script> in the <header>, you'll want to wait until the document has loaded.
document.body.addEventListener('load',function(){
// Your DOM sensitive code here
});
otherwise, you might want to include your script after the form tag
<!DOCTYPE html>
<html>
<!-- Your header; moving your script from here -->
<body>
<!-- Your form here -->
<!-- Move script here-->
<script>
// DOM sensitive code here as the last element in the body
</script>
</body>
I need make form for arabic users can enter her names by arabic and English but enter username by English only and can use all number but not starting with any number and need do smart by class alert shown when press a false key and hide with true.
// Not Allow Chracter
let EnelementsArray = document.querySelectorAll(
"#usernameInput, #passwordInput"
);
let ArelementsArray = document.querySelectorAll("#fname, #lname");
function manage(e) {
var t = document.getElementsByTagName("input");
}
phone.addEventListener("input", function () {
this.value = this.value.replace(/[^0-9]/g, "");
});
EnelementsArray.forEach(function (e) {
e.addEventListener("input", function () {
this.value = this.value.replace(/[^a-zA-Z0-9$]/g, "");
});
});
ArelementsArray.forEach(function (e) {
e.addEventListener("input", function () {
this.value = this.value.replace(/[^a-zA-Zأ-ي]/g, "");
});
});
<form
name="login"
id="regForm"
action=""
method="post"
onsubmit="return doLogin()"
>
<!-- One "tab" for each step in the form: -->
<div class="tab">
<p>أكنب أسمك باللغه عربيه</p>
<p>
<input
name="fname"
id="fname"
placeholder="أسم الاول"
oninput="this.className = ''"
/>
</p>
<p>
<input
name="lname"
id="lname"
placeholder="أسم تاني"
oninput="this.className = ''"
/>
</p>
</div>
<div class="tab">
<p>البريد هو حسابك علي gmail مثلا forexampl#gmail.com</p>
<p>
<input
name="email"
type="email"
placeholder="البريد الاكتروني"
id="email"
oninput="this.className = ''"
/>
</p>
<p>
<input
name="phone"
type="text"
placeholder="رقم الموبايل"
id="phone"
oninput="this.className = ''"
/>
</p>
</div>
<div class="tab">
<p>
أنشاء أسم مستخدم وكلمه مرور لك لدخول للإنترنت بيهم باللغه الإنجليزيه فقط
</p>
<p>
<input
name="username"
id="usernameInput"
placeholder="أسم المستخدم"
oninput="this.className = ''"
/>
</p>
<p>
<input
name="password"
id="passwordInput"
placeholder="كلمة المرور"
oninput="this.className = ''"
/>
</p>
</div>
<div class="footerForm">
<div class="FormBtn">
<button type="button" name="act" id="nextBtn" onclick="nextPrev(1);">
التالي
</button>
</div>
<div class="FormBtn">
<button
type="button"
name=""
id="prevBtn"
onclick="nextPrev(-1)"
disabled
>
السابق
</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div class="CirclesSteps">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
Can I do Phone number format for rtl version and and check if starting by (01) and not min or maxlength for input number in html form
I am using local storage to save the username in the first-page.html and retrieving it into the second-page.html
But if I have two or more places in my second-page.html where I want the username to be retrieved, how can I achieve it using two different ids. Since the id once used cannot be used in another input field.
Can anyone please help.
Index.html:
<script>
function save(){
var fieldValue = document.getElementById('user').value;
localStorage.setItem('text', fieldValue);
}
</script>
<div class="form-group" id="login-fields">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"><span class="text--white glyphicon glyphicon-user"></span></i>
</span>
<input type="text" name="user" id="user" placeholder="Username" class="form-control" required/>
</div>
</div>
</div>
<input class="view sign-in-app" type="submit" value="Sign In" id="submit-login" onclick="save()" />
SecondPage.html
<script>
function load(){
var storedValue = localStorage.getItem('text');
if(storedValue){
document.getElementById('here').value = storedValue;
}
}
</script>
<body onload="load()">
<!-- first div -->
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<input type="text" name="userName" id="here" class="form-control" placeholder="Username" required>
</div>
</div>
</div>
<!-- second div -->
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group"> // change the id here
<input type="text" name="userName" id="here" class="form-control" placeholder="Username" required>
</div>
</div>
</div>
</body>
Just give each element different ids, really. No problem with that. And then when you set, set both:
if (storedValue) {
document.getElementById('here').value = storedValue;
document.getElementById('my-other-id').value = storedValue;
}
I'm trying to code this form in sharing.html so that when one is done putting in information and want to add more contacts, they can click on "add another contact" but when I tried to write out the code, the dreamweaver I was using said that there's a error in Javascript. I don't know how I can fix this error: (the script is almost at the bottom)
<div class="recordsbox">
<h1>Sharing Center</h1>
<p>Please enter the contact information that you want to share.</p>
<div id="shareform">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
<div class="addcontact">
<input type="button" value="Add another contact?" onClick="addForm('shareform');">
</div>
<script>
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
';
document.getElementById(divName).appendChild(newform);
shareform++;
}
</script>
<div class="nextbutton">
Next
</div>
</div>
I based this code on that tutorial: http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/.
Also you can check out full code at http://hamzakhan.name/dev/eric/options_innerpage/sharing.html
For a quicker look, here is the script in question:
<script>
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
';
document.getElementById(divName).appendChild(newform);
shareform++;
}
</script>
Here is the new code:
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'"><form id="share" method="POST"><div class="notifyfield2"><div class="sharefield"><label>Who is this person?</label><input type="text"></div></div><div class="notifyfield"><label>Email Address:</label><input type="email" ></div><div class="notifyfield"><label>Phone Number:</label><input type="tel" ></div></form><hr class="greenline"></div>';
document.getElementById(divName).appendChild(newform);
shareform++;
}
You need to delete all invisible characters. You can't "newline" string.
For the below code I want the content of the submit button with the .btn-primary attribute to change to "Success!" only if the input fields are all not null.
At preset the code goes straight to success when the button is press whether or not the fields have content.
I thought it might be because the fields may somehow already have a value that is not null so I ran this code: alert($('#Comment').attr("value")); and it returned undefined in the alert message. Undefined is the same as null in js/jquery isn't it?
I got this code to work earlier and it was typed almost the same way with just a few changes. I undid the changes but it still does not work.
Any help will be appreciated. (If anyone knows this) Are there instances in which the same code could not work at a different time, all things being equal?
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
$(document).ready(function () {
var Fname = $('#FirstName').attr("value");
var Lname = $('#LastName').attr("value");
var Email = $('#Email').attr("value");
var Comment = $('#Comment').attr("value");
$(".btn-primary").click(function () //This block should say, if all fields are not null changed the content of button to "Success!" and change the content of <h1> to "THANKS, I'VE GOT YOUR MESSAGE."
{
if (Fname != null && Lname != null && Email != null && Comment != null)
{
$("button").html("Success!");
$("h1").html("THANKS, I'VE GOT YOUR MESSAGE");
}
})
});
</script>
And this is the html on the same page
<form class="form-horizontal" role="form" action="/Home/Contact" method="post">
<div class="form-group">
<div class="col-lg-10">
<input class="form-control" data-val="true" data-val-required="Please enter your first name" id="FirstName" type="text" placeholder="First Name" name="FirstName"/>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<input class="form-control" required data-val="true" data-val-required="Please enter your last name" id="LastName" type="text" placeholder="Last Name" name="LastName"/>
<span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true" data-></span>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input class="form-control" required data-val="true" data-val-required="Please enter your email" id="Email" name="Email" type="email" placeholder="Email#Address.com"/>
<span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<textarea class="form-control" required data-val="true" data-val-required="Please enter a brief detailed message" id="Comment" name="Comment" placeholder="A Short but detailed message"></textarea>
<span class="field-validation-valid text-danger" data-valmsg-for="Comment" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<button type="submit" class="btn btn-primary btn-sm active" value="submit">Submit</button>
<input type="reset" class="btn btn-default btn-sm active" value="reset">
</div>
</div>
</form>
When your document loads you are storing the value of Fname, Lname ..... so on. The issue is you then use these values in your conditional test but the values will not have changed as they are just the raw value from the first time the page loaded. One quick fix would be to bring these inside the click so on every click they can re evaluated
Also when checking you are only checking for null but these are not going to equal null anyway. Better would be to fully validate them or just test for generic truthy which excludes the falsy values such as null, undefined, empty string
$(document).ready(function () {
$(".btn-primary").click(function (e)
{
var Fname = $('#FirstName').val();
var Lname = $('#LastName').val();
var Email = $('#Email').val();
var Comment = $('#Comment').val();
//ADDED JUST TO STOP THE FORM SUBMITTING
e.preventDefault();
//very quick test but this could be a lot more detailed for true validation on each field
if (Fname && Lname && Email && Comment) {
$("button").html("Success!");
$("h1").html("THANKS, I'VE GOT YOUR MESSAGE");
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1></h1>
<form class="form-horizontal" role="form" action="#" method="post">
<div class="form-group">
<div class="col-lg-10">
<input class="form-control" data-val="true" data-val-required="Please enter your first name" id="FirstName" type="text" placeholder="First Name" name="FirstName" />
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<input class="form-control" required data-val="true" data-val-required="Please enter your last name" id="LastName" type="text" placeholder="Last Name" name="LastName" /> <span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true" data-></span>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input class="form-control" required data-val="true" data-val-required="Please enter your email" id="Email" name="Email" type="email" placeholder="Email#Address.com" /> <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<textarea class="form-control" required data-val="true" data-val-required="Please enter a brief detailed message" id="Comment" name="Comment" placeholder="A Short but detailed message"></textarea> <span class="field-validation-valid text-danger" data-valmsg-for="Comment" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<button type="submit" class="btn btn-primary btn-sm active" value="submit">Submit</button>
<input type="reset" class="btn btn-default btn-sm active" value="reset">
</div>
</div>
</form>