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.
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'm trying to post a pseudo with ajax like in the title , i think actually with my code i send no informations to my php file.
so this is the code :
$('#send').click(function(){
var pseudo = $('#psd').val();
});
function recuppoint() {
$.post('point.php',{pseudo: pseudo} ,function(data) {
console.log('['+data + ']');
$('.infos2').html(data);
});
}
setInterval(recuppoint, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="logForm" action="">
<div class="field">
<label class="field-label" for="mailconnect">Votre mail</label>
<input class="field-input"type="email" name="mailconnect" id="email" />
</div>
<div class="field" id="psd">
<label class="field-label" for="client">pseudo client</label>
<input class="field-input" type="text" name="pseudo" id="pseudo" />
</div>
<div class="field">
<label class="field-label" for="mdpconnect">mdp</label>
<input class="field-input" type="password" name="mdpconnect" id="password" />
</div>
<button id="send" class="send"name="formsubscribe">begin</button>
</form>
<div>
<div id="infos" class="infos" align="center"> </div>
<div id="infos2" class="infos2" align="center"> </div>
</div>
So guys how can i solve the problem with the var pseudo ?
thank you
Your div element with id "psd", doesnt have value. If you want to send html use .html(); If you want to get only input values so try some like this:
var x = $('input[name=nameOfInput]').val();
Then you should send it with ajax.
your ajax call should be like this .
you can not access the input field with its parent id as you did $('#psd').val();
but you can access it value with its id itself like this
<input class="field-input" type="text" name="pseudo" id="pseudo" />
$('#send').on('click', function(){
var pseudo = $('#pseudo').val();
$.ajax({
url:'point.php',
type:'POST',
data:{ ele: pseudo},
success:function(data){
$('.infos2').html(data);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="logForm" action="">
<div class="field">
<label class="field-label" for="mailconnect">Votre mail</label>
<input class="field-input"type="email" name="mailconnect" id="email" />
</div>
<div class="field" id="psd">
<label class="field-label" for="client">pseudo client</label>
<input class="field-input" type="text" name="pseudo" id="pseudo" />
</div>
<div class="field">
<label class="field-label" for="mdpconnect">mdp</label>
<input class="field-input" type="password" name="mdpconnect" id="password" />
</div>
<button id="send" class="send"name="formsubscribe">begin</button>
</form>
<div>
<div id="infos" class="infos" align="center"> </div>
<div id="infos2" class="infos2" align="center"> </div>
</div>
HTML:
<div class="loginDiv">
<form class="validate" role="form">
<div class="form-group float-label-control">
<input type="text" id="empId" placeholder="Employee ID" required>
</div>
<div class="form-group float-label-control">
<input type="tel" name="mobileNo" maxlength="10" id="mobile" placeholder="Mobile Number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required>
</div>
<div class="align_center">
<div class="btn loginBtn" id="regBtn" onclick="new User().register()">REGISTER</div>
</div>
</form>
Js File
var User = function() {
var self = this;
self.register = function() {
var mobile = $("#mobile").val();
var regSeven = /^7[0-9].*$/
var regEight = /^8[0-9].*$/
if($("#empId").val() =='')
{
alert(Language.InvalidEmployeeId);
return false;
}
if(mobile =='')
{
alert(Language.EmptyMobileNumber);
return false;
}
}
};
if i write a coding for click event like below its working when i use OnClick event function is not calling
$("#regBtn").click(function ()
{
new User().register();
})
how to make the onclick work.. thanks in advance
In onclick call a function that does new User().register().
Do not write literal expression, wrap that expression in function and call that function.
try with this code
$("#regBtn").click(function() {
var mobile = $("#mobile").val();
var regSeven = /^7[0-9].*$/;
var regEight = /^8[0-9].*$/;
if ($("#empId").val() == '') {
// alert(Language.InvalidEmployeeId);
console.log("InvalidEmployeeId");
return false;
}
if (mobile == '') {
//alert(Language.EmptyMobileNumber);
console.log("Empty mobile number");
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loginDiv">
<form class="validate" role="form">
<div class="form-group float-label-control">
<input type="text" id="empId" placeholder="Employee ID" required>
</div>
<div class="form-group float-label-control">
<input type="tel" name="mobileNo" maxlength="10" id="mobile" placeholder="Mobile Number" onkeyup="javascript:if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required>
</div>
<div class="align_center">
<div class="btn loginBtn" id="regBtn">REGISTER</div>
</div>
</form>
</div>
Do something like this...
<div class="loginDiv">
<form class="validate" role="form">
<div class="form-group float-label-control">
<input type="text" id="empId" placeholder="Employee ID" required>
</div>
<div class="form-group float-label-control">
<input type="tel" name="mobileNo" maxlength="10" id="mobile" placeholder="Mobile Number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required>
</div>
<div class="align_center">
<div class="btn loginBtn" id="regBtn" onclick="registerUser()">REGISTER</div>
</div>
</form>
</div>
Java script
function registerUser(){
new User().register();
}
In this case the function registerUser() is re-usable as you commented above "Actually i want to make use of the onclick event so that function can be reused if i give a id i cant reuse that in another page".
I'm new to AngularJS and I'm trying to submit a simple form using ng-submit but the button not working as well as it's not clickable, It's working on Firefox but the cursor still not changing when it's on the button and not working on Chrome.
HTML
<form novalidate name="newTripForm" ng-submit="vm.addTrip()">
<div class="form-group">
<label for="name">Trip Name</label>
<input type="text" class="form-control" id="name" name="name" ng-model="vm.newTrip.name"/>
</div>
<div class="form-group">
<input type="submit" class="btn btn-sm btn-success" id="submit" value="Add"/>
</div>
</form>
JavaScript
vm.addTrip = function ()
{
alert(vm.newTrip.name);
};
try this:
<form novalidate name="newTripForm" ng-submit="vm.addTrip()">
<div class="form-group" ng-init="vm.newTrip.name = '';">
<label for="name">Trip Name</label>
<input type="text" class="form-control" id="name" name="name" ng-model="vm.newTrip.name" required/>
</div>
<div class="form-group">
<input type="submit" class="btn btn-sm btn-success" id="submit" value="Add"/>
</div>
Based on and AngularJS docs, you can have two submits on your form.
I created a quick sample based of what is on the docs and your example.
(function() {
var app = angular.module("test", []);
var TestController = function() {
var vm = this;
vm.newTrip = {
name: ""
};
vm.addTrip = function() {
// Some code
console.log("Added " + vm.newTrip.name + " to database!");
vm.newTrip.name = "";
}
}
app.controller("TestController", [TestController]);
})();
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="test">
<div ng-controller="TestController as vm">
<form novalidate name="newTripForm" ng-submit="vm.addTrip()">
<div class="form-group">
<label for="name">Trip Name</label>
<input type="text" class="form-control" id="name" name="name" ng-model="vm.newTrip.name" />
</div>
<div class="form-group">
<input type="submit" class="btn btn-sm btn-success" id="submit" value="Add" />
</div>
</form>
</div>
</body>
</html>
try this remove the form
<div class="form-group">
<label for="name">Trip Name</label>
<input type="text" class="form-control" id="name" name="name" ng-model="vm.newTrip.name"/>
</div>
<div class="form-group">
<button ng-click="addTrip()"></button>
</div>
I have to create 3 input text boxes for getting user input about names and email addresses.
I have to create it dynamically, i.e. as the user clicks on the email input field a new line of all the three element supposed to be created.
This is the code for one line with the 3 inputs:
<div class='row' id="inputcontainer">
<div class="form-group clearfix" >
<div class="col-md-2 col-md-offset-2">
<div class="form-text-field first-name">
<label>First name</label>
<input type="text" id="firstName10" class="signup-input" name="" placeholder="">
</div>
</div>
<div class="col-md-2">
<div class="form-text-field last-name">
<label>Last name</label>
<input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
</div>
</div>
<div class="col-md-4">
<div class="form-text-field email">
<div>
<label>Email</label>
<input type="text" data-index="0" id="inputMail0" class="signup-input text-value " name="email[0]" placeholder="e.g. example#url.com"/>
<span class="common-sprite disNone sign-up-cross first"></span>
</div>
</div>
</div>
</div>
</div>
How to create it dynamically ?
I'm using the following code for cloning and it's clone it several times instead 1
maxIndex = 0;
$('form').on('input','.email',function(){
$(this).parent().find('.common-sprite').removeClass('disNone');
var lastmail = $(this); if(($(this).val().length > 0)&&(lastmail.data('index') == maxIndex)) {
var count = $('.row.inputcontainer').length;
console.log(count);
maxIndex++;
var clone = $('#template').clone(true).attr('id', '');
clone.find('.firstName[id=firstName'+(maxIndex-1)+']').attr('id', 'firstName' + maxIndex).attr('name', 'first[' + maxIndex +']').addClass('signup-input firstName').val('');
clone.find('.lastName[id=lastName'+(maxIndex-1)+']').attr('id', 'lastName' + maxIndex).attr('name', 'last[' + maxIndex +']').addClass('signup-input lastName').val('');
clone.find('.email[id=inputMail'+(maxIndex-1)+']').attr('id', 'inputMail' + maxIndex).attr('name', 'email[' + maxIndex +']').data('index', maxIndex).addClass('signup-input text-value email').val('');
$('.inputcontainer').append(clone);
}
something like this? i used .blur() to trigger the dynamic adding so that if you type something in the email input and you click outside of it, then the next 3 lines of information will show up. i also added some classes to help jquery find elements faster and more reliably. i used clone() to recreate the same structure of the 3 lines every time.
$(document).ready(function() {
$('.email').on('blur', function() {
if($(this).val().length > 0) {
var count = $('.row').length;
console.log(count);
var clone = $('#template').clone(true).attr('id', '');
clone.find('.firstName').attr('id', 'firstName' + count).val('');
clone.find('.lastName').attr('id', 'lastName' + count).val('');
clone.find('.email').attr('id', 'inputMail' + count).val('');
$('body').append(clone);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row inputcontainer' id="template">
<div class="form-group clearfix" >
<div class="col-md-2 col-md-offset-2">
<div class="form-text-field first-name">
<label>First name</label>
<input type="text" id="firstName0" class="signup-input firstName" name="" placeholder=""/>
</div>
</div>
<div class="col-md-2">
<div class="form-text-field last-name">
<label>Last name</label>
<input type="text" id="lastName0" class="signup-input lastName" name="" placeholder="optional"/>
</div>
</div>
<div class="col-md-4">
<div class="form-text-field email">
<div>
<label>Email</label>
<input type="text" data-index="0" id="inputMail0" class="signup-input text-value email" name="email[0]" placeholder="e.g. example#url.com"/>
<span class="common-sprite disNone sign-up-cross first"></span>
</div>
</div>
</div>
</div>
</div>
hope this helps!
Is this something similar to what you would like?
$(document).on("blur",".add",function()
{
$("#inputcontainer").append("<br />");
$("#inputcontainer").append("First Name <input type='text' class='signup-input' name='' placeholder='' /><br />");
$("#inputcontainer").append("last Name <input type='text' class='signup-input' name='' placeholder='optional' /><br />");
$("#inputcontainer").append("Email Address <input type='text' data-index='0' class='signup-input text-value add' name='email[0]' placeholder='e.g. example#url.com' /><br />");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row' id="inputcontainer">
<div class="form-group clearfix t" >
<div class="col-md-2 col-md-offset-2">
<div class="form-text-field first-name">
<label>First name</label>
<input type="text" id="firstName10" class="signup-input" name="" placeholder="">
</div>
</div>
<div class="col-md-2">
<div class="form-text-field last-name">
<label>Last name</label>
<input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
</div>
</div>
<div class="col-md-4">
<div class="form-text-field email">
<div>
<label>Email</label>
<input type="text" data-index="0" id="inputMail0" class="signup-input text-value add" name="email[0]" placeholder="e.g. example#url.com"/>
<span class="common-sprite disNone sign-up-cross first"></span>
</div>
</div>
</div>
</div>
</div>
Type into the email textbox then leave to create the new textboxes.