I want to add fields in my HTML code via an "ADD USER button such that all the validations done in the First three fields Email Name & Phone number should be same in the new generated 3 fields.I have used Jquery validate plugin.
My HTML code is as follows
<!DOCTYPE html>
<!--<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>-->
<html>
<head>
<meta charset="utf-8">
<title>Manageuser_addUser</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--<script src="plugin/validation/dist/additional-methods.min.js"></script>-->
<script src="plugin/validation/dist/jquery.validate.min.js"></script>
<script src="plugin/utilities/validationutils.js"></script>
</head>
<body>
<div>
<h1>Manage Users!</h1>
<form id="formRegistration" method="post" action="">
<div>
<label for="email">Email Id*</label>
<input id="email" type="email" name="email" value="" placeholder="Enter your Email Id" />
</div>
<div>
<label for="name">Name*</label>
<input id="name" type="text" name="name" value="" placeholder="Enter your Name" />
</div>
I am trying to use this section of js and J query but its not working
<script type="text/javascript">
var i = 3;
function addField(tableid)
{
var row = document.createElement("tr");
var col1 = document.createElement("td");
var col2 = document.createElement("td");
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("name","field" + i );
col1.appendChild(document.createTextNode("Field" + i));
col2.appendChild(input);
row.appendChild(col1);
row.appendChild(col2);
var table = document.getElementById(tableid);
table.appendChild(row);
i++;
}
<div>
<label for="phone">Phone</label>
<input id="phone" type="text" name="phone" value="" placeholder="+xx-xxxxxxxxxx" />
</div>
<div>
<input type="submit" name="add" value="Add User" id="publiclogin">
</div>
<div>
<input type="submit" name="add" value="Add more Fields" id="">
</div>
</form>
</div>
</body>
Your javascript code seems incomplete, there should be:
$("#formRegistration").validate();
within the script tags
Related
let me start by saying that I'm a freshman. I would like to create a form with a button that, when pressed, will generate a page written in an inputa. How to do it? example:
<form action="" method="post">
<!-- a hidden input -->
<input type="hidden" name="a_hidden_input"/>
<!-- a text input -->
<input type="text" name="a_text_input"/>
<!-- submit button -->
<input type="submit" value="Submit"/>
</form>
This is the basic example for getting your data and displaying in the page .
<head>
<script>
function generate() {
debugger
var strText = document.getElementById("txtName").value;
var strText1 = document.getElementById("txtEmail").value;
document.getElementById("p1").innerHTML = strText;
document.getElementById("p2").innerHTML = strText1;
window.location.href = "http://mywebsite.com/home.html";
}
</script>
</head>
<body>
<form>
<input type="text" name="Name" id="txtName" placeholder="Name">
<input type="text" name="Email" id="txtEmail" placeholder="Email">
<input type="button" value="Submit" id="btnSubmit" onclick="generate()">
</form>
<div>
<h1>New Page</h1>
<p id="p1"></p>
<p id="p2"></p>
</div>
</body>
If u use any library like react js or framework like angular with backend technologies like php,nodejs, with databases as sql , mongodb or firebase it will be super easy for u .
I want to add multiple textarea using Javascript as a user input number of description in no_of_description input HTML tags.
Here is my code:
<div class="container">
<label for="no_of_description">No of Description</label>
<input type="number" id="no_of_description" name="no_of_description" value="1">
<hr/>
<form class="form" action="" method="POST">
<!-- if no_of_description is 1 (default)-->
<div class="form-group">
<label for="description_1">Description 1</label>
<textarea class="form-control" id="description_1" rows="3" cols="8"></textarea>
</div>
<!-- if no_of_description is 2, another description be added using javascript-->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
Follo Below way to create html form field dynamically.
<html>
<head>
<script type='text/javascript'>
function addFields(){
var number = document.getElementById("member").value;
var container = document.getElementById("container");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
container.appendChild(document.createTextNode("TextBox " + (i+1)));
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
container.appendChild(input);
container.appendChild(document.createElement("br"));
}
}
</script>
</head>
<body>
<input type="text" id="member" name="member" value="">Number of TextBox:<br />
Add
<div id="container"/>
</body>
</html>
I have this Jquery/javascript code which clones a template element and assigns the clone an iterative ID (so the first clone is called 'eventCard0', the second 'eventCard1' etc.)
This works fine besides .prop('name', 'eventCard' + number) which for some reason doesn't change the clone's name attribute in the same manner as it changes the clone's ID. I can't figure out why this is at all
var newEventBtn = document.getElementById("newEventButton");
newEventBtn.onclick = function() {
let number = $('#events .eventInputs').length;
let cloneParent = "#eventCardTemplate";
let newClone = $(cloneParent).clone().prop('id', "eventCard" + number).prop('name', "eventCard" + number);
newClone.appendTo("#events");
}
This is the template tag <li id="eventCardTemplate" name="eventCardTemplate" class="eventInputs">
And this is the entire HTML:
<?php
session_start();
if (!isset($_SESSION['loggedin'])) {
header('Location: index.html');
exit();
}
?>
<html>
<head>
<title>Timeline Creator</title>
<link rel="stylesheet" type="text/css" href="timelineCreator.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<li id="eventCardTemplate" name="eventCardTemplate" class="eventInputs">
<input type="text" name="eventName" class="eventName" maxlength="50" placeholder="Event Name" required>
<textarea name="eventDesc" class="eventDesc" placeholder="Event Description" required></textarea>
<p class="label">Start Date</p>
<input type="date" name="startDate" class="date" required>
<!-- <label for="startIsEnd">Start date = End Date</label>
<input type="checkbox" name="startIsEnd" class="startIsEnd"> -->
<p class="label">End Date</p>
<input type="date" name="endDate" class="date" required>
<p class="label">Political</p>
<input type="checkbox" name="political" value="political" class="checkboxes">
<p class="label">Economic</p>
<input type="checkbox" name="economic" value="economic" class="checkboxes">
<p class="label">Social</p>
<input type="checkbox" name="social" value="social" class="checkboxes">
</li>
<-- Back
<form action="createTimeline.php" method="post" id="timelineCreator">
<input type="text" name="timelineName" id="timelineName" maxlength="50" placeholder="Timeline Name" autofocus required>
<textarea id="timelineDesc" name="timelineDesc" placeholder="Timeline Description" required></textarea>
<ul id="events">
</ul>
<button type="button" id="newEventButton">+ Add Event</button>
<input type="submit" id="createTimeline" value="Create Timeline">
</form>
<script src="timelineCreator.js"></script>
</body>
</html>
Your element does not have the name property, so .prop won't change it.
Look at this link for a list of elements that do have the name property. https://developer.mozilla.org/en-US/docs/Web/API/Element/name
In this case you should be using .attr instead of .prop :
let newClone = $(cloneParent).clone().attr('id', "eventCard" + number).attr('name', "eventCard" + number);
This is what I tried for setting the textbox values but it doesn't seem to be working. I want the textboxes to have the values in them when the page loads. the function is within the script tag.
function setMSRP()
{
var MSRP = "$29,120.00";
var destinationCharge = "$875.00";
var rebate = "-$10,000.00";
var taxes = "6%"
var titlesAndFees = "$209.00";
document.getElementById("txtMSRP").value = MSRP;
document.getElementById("txtDestinationCharge").value = destinationCharge;
document.getElementById("txtRebates").value = rebate;
document.getElementById("txtTaxes").value = taxes;
document.getElementById("txtElectricTitleAndFees").value = titlesAndFees;
}
</script>
</head>
<body onload="setMSRP()">
<form>
<h1>Calculate Focus Price</h1>
<hr/>
<label for="txtMSRP">MSRP:</label>
<input autofocus id="txtMSRP" type="text" readonly="readonly"/>
<br/>
<label for="txtDestinationCharge">Destination Charge:</label>
<input type="text" id="txtDestinationCharge" readonly="readonly"/>
<br/>
<label for="txtRebates">Rebates:</label>
<input type="text" id="txtRebates" readonly="readonly"/>
<br/>
<label for="txtTaxes">Taxes:</label>
<input type="text" id="txtTaxes" readonly="readonly"/>
<br/>
<label for="txtElectricTitleAndFees">Electric Title and Fees:</label>
<input type="text" id="txtElectricTitleAndFees" readonly="readonly"/>
<br/>
<input type="button" id="btnCalculateTotal" onclick="calcTotal()"
</form>
</body>
You have some syntax errors in code. Look at the modified example below:
<html>
<head>
<script>
function setMSRP() {
var MSRP = "$29,120.00";
var destinationCharge = "$875.00";
var rebate = "-$10,000.00";
var taxes = "6%"
var titlesAndFees = "$209.00";
document.getElementById("txtMSRP").value = MSRP;
document.getElementById("txtDestinationCharge").value = destinationCharge;
document.getElementById("txtRebates").value = rebate;
document.getElementById("txtTaxes").value = taxes;
document.getElementById("txtElectricTitleAndFees").value = titlesAndFees;
}
</script>
</head>
<body onload="setMSRP()">
<form>
<h1>Calculate Focus Price</h1>
<hr/>
<label for="txtMSRP">MSRP:</label>
<input autofocus id="txtMSRP" type="text" readonly="readonly" />
<br/>
<label for="txtDestinationCharge">Destination Charge:</label>
<input type="text" id="txtDestinationCharge" readonly="readonly" />
<br/>
<label for="txtRebates">Rebates:</label>
<input type="text" id="txtRebates" readonly="readonly" />
<br/>
<label for="txtTaxes">Taxes:</label>
<input type="text" id="txtTaxes" readonly="readonly" />
<br/>
<label for="txtElectricTitleAndFees">Electric Title and Fees:</label>
<input type="text" id="txtElectricTitleAndFees" readonly="readonly" />
<br/>
<input type="button" id="btnCalculateTotal" onclick="calcTotal()">
</form>
</body>
</html>
I want the textboxes to have the values in them when the page loads.
You don't need JS for this:
<input id="txtMSRP" type="text" value="<your_value>" />
If you wanted placeholders inside the input[type=text], simply use
var textbox = document.querySelector("#textbox");
textbox.setAttribute("placeholder", "This is the Placeholder");
Or use the HTML Attribute to set the value/placeholder:
<input type="text" id="textbox" value="Hello" placeholder="Introductory Statement" />
This question already has answers here:
Javascript OnPaste
(2 answers)
Closed 8 years ago.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Submit Form</title>
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<script src="domready.js"></script>
<script>
DomReady.ready(function() {
(function () {
var Username =document.getElementById("Username").onpaste = function() {username()};
alert(Username.length);
var Password = document.getElementById("Password").onpaste = function() {validate()};
var DOB = document.getElementById("DOB").onpaste = function() {validate()};
var Email = document.getElementById("Email").onpaste = function() {validate()};
var Country = document.getElementById("Country").onpaste = function() {validate()};
function validate(){
setTimeout(username, 3000);
}
function username(Username){
/*if(Username.value <= 5){*/
alert(Username.length);
}
})();
});
</script>
</head>
<body>
<div id="wrp">
<form action="">
<div>
<label for="Username">Username</label>
<input type="text" id="Username">
</div>
<div>
<label for="Password">Password</label>
<input type="password" id="Password">
</div>
<div>
<label for="DOB">Date of birth</label>
<input type="text" id="DOB">
</div>
<div id="wrp-gender">
<label for="Gender" id="Gender">Gender</label>
<div id="wrp-radio-btn">
<label for="Male">Male</label>
<input type="radio">
<label for="Female">Female</label>
<input type="radio">
</div>
</div>
<div>
<label for="Email">Email</label>
<input type="text" id="Email">
</div>
<div>
<label for="Country">Country</label>
<input type="text" id="Country">
</div>
<div>
<input type="submit" value="Submit" id="Submit">
</div>
</form>
</div>
</body>
</html>
The alert(Username.length) statement does get executed & an alert box pops up with value of 0.
Why is the value of variable Username null or 0 when I enter a value in input box?
I saw something similar when I was using jQuery's paste event.
Its a strange one, I think the paste event fires before the text is actually pasted into the input.
I was able to solve it using setTimeout to push it to the end of the event queue
var Username = document.getElementById("Username");
Username.onpaste = username;
function username(){
setTimeout(function(){
alert(Username.value.length);
});
}
fiddle