I'm trying to get the values from my form when the user clones the row. When I clone the rows are the id still the same? If so how do I make the new rows to have a unique id?
jQuery(function($) {
var $button = $('#add-row'),
$row = $('.period-row').clone();
$button.click(function() {
$row.clone().insertBefore($button);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="heading">Please select appointment period</h3>
<div class="form-wrapper">
<form action="#" id="date-form" name="date-form" method="POST">
<div class="period-row">
<label for="start">From:</label>
<input type="datetime-local" name="start[]" id="start">
<label for="end">To:</label>
<input type="datetime-local" name="end[]" id="end">
</div>
<input type="button" id="add-row" name="add-row" value="add period" />
<button type="submit">submit</button>
</form>
</div>
I don't understand what exactly you want and to do it on the proper way you have to use class on the input and not id because the id is unique. But I hope this code will help you.
jQuery(function($) {
var $button = $('#add-row'),
$row = $('.period-row').clone();
$button.click(function() {
let from = $('#start').val();
let to = $('#end').val();
$row.clone().insertBefore($button).addClass('active');
$('.period-row.active').find("#start").val(from);
$('.period-row.active').find("#end").val(from);
$('.period-row').removeClass('active');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="heading">Please select appointment period</h3>
<div class="form-wrapper">
<form action="#" id="date-form" name="date-form" method="POST">
<div class="period-row">
<label for="start">From:</label>
<input type="datetime-local" name="start[]" id="start">
<label for="end">To:</label>
<input type="datetime-local" name="end[]" id="end">
</div>
<input type="button" id="add-row" name="add-row" value="add period" />
<button type="submit">submit</button>
</form>
</div>
Related
my task is to store user multiple input values in javascript array using push method
the code is
<body>
<h3>employee form</h3>
<div class="row">
<div class="col-md-6">
<form>
<label for="id">Id</label>
<input type="number" id="i1"/></br>
<label>Name:</label>
<input type="Name" id="name"></br>
<label for="qty">Qty:</label>
<input type="Qty" id="qty"/></br>
<label for="price">price:</label>
<input type="price" id="price"/></br>
<button onclick="pushData();">ADD</button>
</div>
<div class="col-md-6" id="display">
</div>
</div>
</form>
<script>
var myArr = [""];
i tried but i didnt get exact output freinds please give some tips are codes friends
function pushData() {
const products = [];
const data = {
id: document.getElementById('id').value,
name: document.getElementById('name').value,
qty: document.getElementById('qty').value,
price: document.getElementById('price').value
}
products.push(data);
document.getElementById('display').innerText += JSON.stringify(data, null, 2) + ',';
}
<h3>employee form</h3>
<div class="row">
<div class="col-md-6">
<form method="post">
<label for="id">Id</label>
<input type="number" id="id" /></br>
<label>Name:</label>
<input type="text" id="name"></br>
<label for="qty">Qty:</label>
<input type="text" id="qty"></br>
<label for="price">price:</label>
<input type="text" id="price" /></br>
<button type="submit" onclick="event.preventDefault(); pushData();">ADD</button>
</form>
</div>
<div class="col-md-6">
[<span id="display"></span>]
</div>
</div>
You can try this one it just push multiple products into array in display div
Try this..
<div>
<input type="text" class="name" />
<input type="text" class="quantity" />
<input type="text" class="price" />
<button class="update" >
Update Data
</button>
</div>
<div class="updated_data"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var final_array = [];
$(".update").on("click",()=>{
// Creating a new sub array
var sub_array = [];
// Getting the input vals
var name = $(".name").val();
var quantity = $(".quantity").val();
var price = $(".price").val();
// adding vals to the new array
sub_array.push(name,quantity,price);
//Updating the main array with sub array we just created
final_array.push(sub_array);
// Displaying in the page
$(".updated_data").append(`
<div>
<p>${(final_array[final_array.length-1])[0]}</p>
<p>${(final_array[final_array.length-1])[1]}</p>
<p>${(final_array[final_array.length-1])[2]}</p>
</div>
`);
//Clearing all input fields for new entry
$(".name").val('');
$(".quantity").val('');
$(".price").val('');
});
</script>
All the inserted values are being stored in a main array final_array .
Here's the working JSfiddle for the same
I made this in Jquery instead of JS cause its easy to work with.
Let me know if you came across any trouble.
Without any specific output format, this is how to get and push inputs value into array and displaying in order.
let myArr = [];
function pushData(){
const inputs = document.getElementsByClassName("getVal");
for(let i=0; i<inputs.length;i++){
myArr.push(inputs[i].value);
}
document.getElementById("display").textContent = myArr;
}
<html>
<head>
</head>
<body>
<h3>Employee Form</h3>
<div class="row">
<div class="col-md-6">
<form>
<label for="id">Id</label>
<input type="number" id="i1" class="getVal"/></br>
<label>Name:</label>
<input type="Name" id="name" class="getVal"></br>
<label for="qty">Qty:</label>
<input type="Qty" id="qty" class="getVal"/></br>
<label for="price">price:</label>
<input type="price" id="price" class="getVal"/></br>
<button type="button" onclick="pushData()">ADD</button>
</form>
</div>
<div class="col-md-6" id="display">
</div>
</div>
</body>
</html>
<form action="apply.html" method="post">
<div class="cloudinformation">
<h2>
Job reference number:
</h2>
<h4>
1FN43
</h4>
<input type="submit" value="Apply">
</div>
</form>
<form action="apply.html" method="post">
<div class="consultantinformation">
<h2>
Job reference number:
</h2>
<h4>
6LZ9W
</h4>
<input type="submit" value="Apply">
</div>
</form>
<form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform">
<label>Job Reference Number:</label>
<input type="text" id="onlyletters" name="onlyletters" pattern="[a-zA-Z0-9]+" minlength="5" maxlength="5" placeholder="Reference number for specified job.." required="required">
</form>
How do I set it up so that, depending on which job press apply for, it will retrieve the job reference number of the specified job and display it in read-only format on the apply.html, which is the form you are redirected to when you press "apply"?
Does this is what you want to achieve
var applyBtn = document.querySelectorAll("button")
var hideFormAll = document.querySelectorAll(".cloudinformation")
for (let i = 0; i < applyBtn.length; i++) {
applyBtn[i].addEventListener('click', function() {
var referNumb = applyBtn[i].parentElement.querySelector(".refree")
document.querySelector("#onlyletters").value = referNumb.textContent
document.querySelector(".formAll").style.display = "none"
document.querySelector("#regform").style.display = "block"
})
}
#regform {
display: none;
}
<div class="formAll">
<div class="cloudinformation">
<h2>
Job reference number:
</h2>
<h4 class="refree">1FN43</h4>
<button>Apply</button>
</div>
<div class="consultantinformation">
<h2>
Job reference number:
</h2>
<h4 class="refree">6LZ9W</h4>
<button>Apply</button>
</div>
</div>
<form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform">
<label>Job Reference Number:</label>
<input type="text" id="onlyletters" name="onlyletters" pattern="[a-zA-Z0-9]+" minlength="5" maxlength="5" placeholder="Reference number for specified job.." required="required" readonly>
<input type="submit" value="Submit">
</form>
I would like to take the information stored in the form from my date input and send it to a variable in JavaScript.
<body>
<form action="" method="get" class="countdown">
<div class="countdown">
<label for="birthday">Enter your birthday: </label>
<input type="date" name="birthday" id="birthday" required>
</div>
<div class="countdown">
<input type="submit" value="Submit"
</div>
</form>
<script src="lab3.js"></script>
</body>
var bDay = document.getElementById("birthday").value
console.log(bDay)
You'll want to do something like this:
//Wait for page to finish loading
window.addEventListener("load",function(){
//Run function when you submit form
document.getElementById("form").addEventListener("submit",function(e){
//Stop the form from submitting:
e.preventDefault();
//Get your input value
var bDay = document.getElementById("birthday").value;
//Log it to your console
console.log(bDay)
});
});
<!DOCTYPE html>
<html>
<body>
<!-- Add an id to your form-->
<form id='form' action="" method="get" class="countdown">
<div class="countdown">
<label for="birthday">Enter your birthday: </label>
<input type="date" name="birthday" id="birthday" required>
</div>
<div class="countdown">
<input type="submit" value="Submit">
</div>
</form>
<!-- <script src="lab3.js"></script> -->
</body>
</html>
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
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>