I am a beginner in jQuery. I want all my input value of my form in an array = (item 01, item 02 and and) save ..
It should show items in a table?
What I have done and it does not work:
<form id="form_id">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
<input type="submit" value="submit" id="submit-button" />
</form>
<div id="table">
<h2>List of all person</h2>
<table class="footable">
<thead>
<tr>
<th data-class="expand"> First Name </th>
<th> Last Name </th>
</tr>
</thead>
<tbody>
<tr>
<td>e.g --> array[1].firstname</td>
<td>e.g --> array[1].lastname</td>
</tr>
</tbody>
</table>
</div>
The Javascript code:
$(function() {
$('#submit-button').click(function() {
var formInputs = new Array();
//Get the form ID
var id = $(this).parent().attr('id');
$('#' + id + ' input').each(function() {
//Get the input value
var inputValue = $(this).val();
//Get the input id
var inputId = $(this).attr('id');
//Add them to the array
formInputs[inputId] = inputValue;
});
show....
});
});
try this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit-button").click(function(){
var data = $('#form_id').serializeArray();
var obj = {};
for (var i = 0, l = data.length; i < l; i++) {
obj[data[i].name] = data[i].value;
}
$('table.footable tbody').append('<tr><td>'+obj['firstname']+'</td><td>'+obj['lastname']+'</td></tr>');
$("#firstname").val('');
$("#lastname").val('');
})
})
</script>
<form id="form_id">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname" value="" placeholder="Max" required="required" autofocus="autofocus" />
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname" value="" placeholder="Max" required="required" autofocus="autofocus" />
<input type="button" value="submit" id="submit-button" />
</form>
<div id="table">
<h2>List of all person</h2>
<table class="footable">
<thead>
<tr>
<th data-class="expand"> First Name </th>
<th> Last Name </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
This should work
<form id="form_id">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
<input type="button" value="submit" id="submit-button" />
</form>
<div id="table">
<h2>List of all person</h2>
<table class="footable">
<thead>
<tr>
<th data-class="expand">First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
var names = [],
tbody = $("#table tbody");
function getInfo(e) {
var nameObj = {
first: e.target.form[0].value,
last: e.target.form[1].value
};
names.push(nameObj);
e.target.form[0].value = "";
e.target.form[1].value = "";
tbody.empty();
names.forEach(function (name) {
var tr = $("<tr>");
tr.append($("<td>").text(name.first));
tr.append($("<td>").text(name.last));
tbody.append(tr);
});
}
$("#submit-button").on("click", getInfo);
On jsfiddle
Related
I am trying to write a single-page app with the below details, but unable to complete all. (shared the code below)
Header input fields.
Items input(can be using modal) and View(as table)
Sub-items input(using modal) and view(as table) , each items can or cannot have sub-items.
Create/Submit button will send all data to an end-point using Ajax.
sub table data will be added by input form through a bootstrap modal.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form>
<table class="table">
<tbody>
<tr>
<td><input type="text" class="form-control" id='txtCustomerNumb' placeholder="Customer Number" /></td>
<td><input type="text" class="form-control" id='txtCustomerName' placeholder="Customer Name" /></td>
<td><input type="text" class="form-control" id='txtDeliverTo' placeholder="Deliver To" /></td>
<td></td>
</tr>
<tr>
<td><input type="text" class="form-control" id='txtDriverName' placeholder="Driver Name" /></td>
<td><input type="text" class="form-control" id='txtDriverContact' placeholder="Driver Contact" /></td>
<td><input type="text" class="form-control" id='txtVehNumber' placeholder="Vehicle No." /></td>
<td></td>
</tr>
<tr>
<td>
<select class="form-control" id="txtDeliverTo" placeholder="Exit Point">
<option value="">Select Exit Point</option>
<option value="Exit_Point_1">Exit Point 1</option>
<option value="Exit_Point_2">Exit Point 2</option>
<option value="Exit_Point_3">Exit Point 3</option>
</select>
</td>
<td><input type="text" class="form-control" id='txtDeliverTo' placeholder="Deliver To" /></td>
<td><input type="text" class="form-control" id='txtExitType' placeholder="Type Of Exit" /></td>
<td></td>
</tr>
</tbody>
</table>
<div class="form-row">
<div class="form-group col-md-4">
<label>Name:</label>
<input type="text" name="name" class="form-control" value="Smith" required="">
</div>
<div class="form-group col-md-6">
<label>Email:</label>
<input type="text" name="email" class="form-control" value="smith#abc.com" required="">
</div>
<div class="form-group col-md-2" style="padding-top: 23px;">
<button type="submit" class="btn btn-success save-btn">Add</button>
</div>
</div>
</form>
<br/>
<table class="table table-bordered data-table">
<thead>
<th>Name</th>
<th>Email</th>
<th width="200px">Action</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<script type="text/javascript">
$("form").submit(function(e){
e.preventDefault();
var name = $("input[name='name']").val();
var email = $("input[name='email']").val();
$(".data-table tbody").append("<tr data-name='"+name+"' data-email='"+email+"'><td>"+name+"</td><td>"+email+"</td><td><button class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td></tr>");
$("input[name='name']").val('');
$("input[name='email']").val('');
});
$("body").on("click", ".btn-delete", function(){
$(this).parents("tr").remove();
});
$("body").on("click", ".btn-edit", function(){
var name = $(this).parents("tr").attr('data-name');
var email = $(this).parents("tr").attr('data-email');
$(this).parents("tr").find("td:eq(0)").html('<input name="edit_name" value="'+name+'">');
$(this).parents("tr").find("td:eq(1)").html('<input name="edit_email" value="'+email+'">');
$(this).parents("tr").find("td:eq(2)").prepend("<button class='btn btn-info btn-xs btn-update'>Update</button><button class='btn btn-warning btn-xs btn-cancel'>Cancel</button>")
$(this).hide();
});
$("body").on("click", ".btn-cancel", function(){
var name = $(this).parents("tr").attr('data-name');
var email = $(this).parents("tr").attr('data-email');
$(this).parents("tr").find("td:eq(0)").text(name);
$(this).parents("tr").find("td:eq(1)").text(email);
$(this).parents("tr").find(".btn-edit").show();
$(this).parents("tr").find(".btn-update").remove();
$(this).parents("tr").find(".btn-cancel").remove();
});
$("body").on("click", ".btn-update", function(){
var name = $(this).parents("tr").find("input[name='edit_name']").val();
var email = $(this).parents("tr").find("input[name='edit_email']").val();
$(this).parents("tr").find("td:eq(0)").text(name);
$(this).parents("tr").find("td:eq(1)").text(email);
$(this).parents("tr").attr('data-name', name);
$(this).parents("tr").attr('data-email', email);
$(this).parents("tr").find(".btn-edit").show();
$(this).parents("tr").find(".btn-cancel").remove();
$(this).parents("tr").find(".btn-update").remove();
});
</script>
</body>
</html>
Consider the following example. This is using the latest Bootstrap version.
$(function() {
function addItem(data, table) {
var row = $("<tr>").data("item", data).appendTo(table);
$.each(data, function(k, v) {
$("<td>").html(v).appendTo(row);
});
$("<td>").appendTo(row);
$.each(["update", "cancel", "edit", "delete"], function(i, el) {
$("<button>", {
class: "btn btn-sm btn-" + el
}).html(el[0].toUpperCase() + el.substr(1)).appendTo("td:last", row);
});
$(".btn-edit, .btn-update", row).addClass("btn-info");
$(".btn-cancel", row).addClass("btn-warning");
$(".btn-delete", row).addClass("btn-danger");
$("button:lt(2)", row).hide();
}
function editItem(row) {
var item = $(row).data("item");
var keys = Object.keys(item);
$("td:not(:last)", row).each(function(i, el) {
$(el).html(
$("<input>", {
name: "item_" + keys[i],
type: (i < 2) ? "text" : "number",
value: item[keys[i]]
})
);
});
$("button", row).show();
$("button:gt(1)", row).hide();
}
function updateItem(row) {
var newItem = {
name: $("input[name='item_name']", row).val(),
desc: $("input[name='item_desc']", row).val(),
qnty: $("input[name='item_qnty']", row).val()
};
var keys = Object.keys(newItem);
$(row).data("item", newItem);
$("td:not(:last)", row).each(function(i, el) {
$(el).empty().html(newItem[keys[i]]);
});
$("button", row).show();
$("button:lt(2)", row).hide();
}
$("form").submit(function(e) {
e.preventDefault();
var item = {
name: $("input[name='item']").val(),
desc: $("input[name='description']").val(),
qnty: $("input[name='quantity']").val()
};
addItem(item, "table.data-table");
$("input[name='item'], input[name='description'], input[name='quantity']").val('');
});
$(".table").on("click", ".btn-delete", function() {
if (confirm("Are you sure you wish to delete this row?")) {
$(this).closest("tr").remove();
}
});
$(".table").on("click", ".btn-edit", function() {
editItem($(this).closest("tr"));
});
$(".table").on("click", ".btn-cancel", function() {
var row = $(this).closest("tr");
var item = $(row).data("item");
var keys = Object.keys(item);
$("td:not(:last)", row).each(function(i, el) {
$(el).html(item[keys[i]]);
});
$("button", row).show();
$("button:lt(2)", row).hide();
});
$("body").on("click", ".btn-update", function() {
updateItem($(this).closest("tr"));
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div class="container">
<form>
<div class="row align-items-center">
<div class="col-10">
<table class="table">
<tbody>
<tr>
<td><input type="text" class="form-control" id='txtCustomerNumb' placeholder="Customer Number" /></td>
<td><input type="text" class="form-control" id='txtCustomerName' placeholder="Customer Name" /></td>
<td><input type="text" class="form-control" id='txtDeliverTo' placeholder="Deliver To" /></td>
<td></td>
</tr>
<tr>
<td><input type="text" class="form-control" id='txtDriverName' placeholder="Driver Name" /></td>
<td><input type="text" class="form-control" id='txtDriverContact' placeholder="Driver Contact" /></td>
<td><input type="text" class="form-control" id='txtVehNumber' placeholder="Vehicle No." /></td>
<td></td>
</tr>
<tr>
<td>
<select class="form-control" id="txtDeliverTo" placeholder="Exit Point">
<option value="">Select Exit Point</option>
<option value="Exit_Point_1">Exit Point 1</option>
<option value="Exit_Point_2">Exit Point 2</option>
<option value="Exit_Point_3">Exit Point 3</option>
</select>
</td>
<td><input type="text" class="form-control" id='txtDeliverTo' placeholder="Deliver To" /></td>
<td><input type="text" class="form-control" id='txtExitType' placeholder="Type Of Exit" /></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<button class="btn btn-primary" type="submit">Create</button>
</div>
</div>
</form>
</div>
<form>
<div class="row mb-3">
<div class="col-2">
<input type="text" name="item" class="form-control" placeholder="Item Name" required />
</div>
<div class="col-4">
<input type="text" name="description" class="form-control" placeholder="Item Description" required="">
</div>
<div class="col-2">
<input type="number" name="quantity" class="form-control" placeholder="Quantity" required="">
</div>
<div class="col">
<button type="submit" class="btn btn-success save-btn">Add</button>
</div>
</div>
</form>
<table class="table table-bordered data-table">
<thead>
<th>Name</th>
<th>Description</th>
<th>Quantity</th>
<th>Action</th>
</thead>
<tbody>
</tbody>
</table>
You can see there are a lot of functions that can be created if you choose. The cancel event is an example without using functions.
You will want to use .closest() to find the parent row. You can then properly select elements from the row as needed.
It did not make a lot of sense to add and remove buttons, better to just hide them when not needed.
You can use Bootstrap-Table, here is an example of what you are looking to do:
https://examples.bootstrap-table.com/#welcome.html#view-source
In this case you can have a table with more options, also you can use ajax to load, paginate and execute actions to the data.
Other option is inside your table you can insert a subtable with javascript.
I have created a form in which I want that if there are some specific entries, the form should not get submitted, and some functions should be executed. But for every other entry, the form should get submitted and work as normal.
function checkuser() {
let name = document.forms[0].name.value;
let email = document.forms[0].email.value;
let message = document.forms[0].message.value;
if ((name == "admin") && (email == "admin#admin.com") && message == ("admin")) {
alert("hey"); //SOME FUNCTION
} else {
document.forms[0].setAttribute("action", "login.php");
document.forms[0].setAttribute("onsubmit", " ");
document.forms[0].submit();
}
}
<form method="post" onsubmit="event.preventDefault(); return checkuser(this)" id="form">
<table align="center">
<tr>
<th><label for="name"> Name : </label></th>
<td> <input type="text" height=100px id="name" name="name" placeholder="Enter your Name..." required> </td>
</tr>
<tr>
<th><label for="email"> Email : </label> </th>
<td><input type="email" id="email" name="email" placeholder="Enter your Email ID..." required></td>
</tr>
<tr>
<th><label for="phone"> Phone Number : </label> </th>
<td><input type="tel" id="phone" name="phone" placeholder="Enter your Phone no..." pattern="[0-9]{10}"></td>
</tr>
<tr>
<th><label for="message"> Message : </label> </th>
<td><textarea id="message" name="message" placeholder="Enter Message..." required></textarea></td>
</tr>
</table>
<div class="buttons">
<input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset">
</div>
</form>
It works just fine, but the problem is just that, for normal values, I have to press SUBMIT button twice to redirect the form to "login.php" and submit it. I think, when I press it once, it removes the "submit" method and adds the "action" to the form, and on pressing it twice, it is submitted.
I need it to work with just one click. If I input special values, it should execute the following function, and for normal values, it should directly submit the form using "login.php" as an action.
Any help would be appreciated.
I did it like this...
function checkuser() {
let name = document.forms[0].name.value;
let email = document.forms[0].email.value;
let message = document.forms[0].message.value;
if ((name == "admin") && (email == "admin#admin.com") && message == ("admin")) {
alert("hey"); //SOME FUNCTION
} else {
document.forms[0].submit();
}
}
<form method="post" action="login.php" id="form">
<table align="center">
<tr>
<th><label for="name"> Name : </label></th>
<td> <input type="text" height=100px id="name" name="name" placeholder="Enter your Name..." required> </td>
</tr>
<tr>
<th><label for="email"> Email : </label> </th>
<td><input type="email" id="email" name="email" placeholder="Enter your Email ID..." required></td>
</tr>
<tr>
<th><label for="phone"> Phone Number : </label> </th>
<td><input type="tel" id="phone" name="phone" placeholder="Enter your Phone no..." pattern="[0-9]{10}"></td>
</tr>
<tr>
<th><label for="message"> Message : </label> </th>
<td><textarea id="message" name="message" placeholder="Enter Message..." required></textarea></td>
</tr>
</table>
<div class="buttons">
<input type="button" value="Submit" onclick="checkuser();">
<input type="reset" value="Reset" name="reset">
</div>
</form>
I'm trying to clone the row in table from the values of the input textbox member and looping it. How can the textbox id change after looping/cloning? Pls help me with my code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.clonedInput:first').hide();
$('member').ready(function(){
$("input").change(function(){
alert("The text has been changed.");
var number = $("#member").val();
var e = $('.clonedInput:first');
$('.clonedInput').not('.clonedInput:first').remove();
for (i=0;i<number;i++) {
e.show().clone().insertAfter(e);
}
$('.clonedInput:first').hide();
});
});
</script>
</head>
<body>
<label>Number of boxes: </label><input type="number" id="member">
<div class="row">
<table class="table table-striped">
<thead>
<tr>
<td>Length</td>
<td>Width</td>
<td>Height</td>
<td>Volumetric Weight</td>
<td>Total Weight</td>
</tr>
</thead>
<tbody class = "tbodyClone">
<tr id="clonedInput1" class="clonedInput">
<td><input id="length" name="length" required type="text" class="form-control" placeholder="" value="" /></td>
<td><input id="width" name="width" required type="text" class="form-control" placeholder="" value="" /></td>
<td><input id="height" name="height" required type="text" class="form-control" placeholder="" value="" /></td>
<td><input id="volumetric_weight" name="volumetric_weight" required type="text" class="form-control" placeholder="" value="" /></td>
<td><input id="total_weight" name="total_weight" required type="text" class="form-control" placeholder="" value="" /></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Thank you in advance!
I was trying this inside the for loop. But i dont know what am i doing wrong
var cloneIndex=0;
$(this).parents(".clonedInput").clone()
.appendTo(".tbodyClone")
.attr("id", "clonedInput" + cloneIndex)
.find("*")
.each(function () {
var id = this.id || "";
var match = id.match(regex) || [];
if (match.length == 3) {
this.id = match[1] + (cloneIndex);
}
})
cloneIndex++;
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.clonedInput:last').hide();
$('member').ready(function(){
$("input").change(function(){
alert("The text has been changed.");
var number = $("#member").val();
var e = $('.clonedInput:first');
$('.clonedInput').not('.clonedInput:first').remove();
for (i=0;i<number;i++) {
var regex = /^(.*)(\d)+$/i;
var cloneIndex = $(".clonedInput").length;
e.show().clone().insertBefore(e)
.attr("id", "clonedInput" + cloneIndex)
.find("*")
.each(function () {
var id = this.id || "";
var match = id.match(regex) || [];
if (match.length == 3) {
this.id = match[1] + (cloneIndex);
}
})
}
$('.clonedInput:last').hide();
});
});
</script>
</head>
<body>
<label>Number of boxes: </label><input type="number" id="member">
<div class="row">
<table class="table table-striped">
<thead>
<tr>
<td>Length</td>
<td>Width</td>
<td>Height</td>
<td>Volumetric Weight</td>
<td>Total Weight</td>
</tr>
</thead>
<tbody class = "tbodyClone">
<tr id="clonedInput1" class="clonedInput">
<td><input id="length0" name="length" required type="text" class="form-control" placeholder="" value="" /></td>
<td><input id="width0" name="width" required type="text" class="form-control" placeholder="" value="" /></td>
<td><input id="height0" name="height" required type="text" class="form-control" placeholder="" value="" /></td>
<td><input id="volumetric_weight0" name="volumetric_weight" required type="text" class="form-control" placeholder="" value="" /></td>
<td><input id="total_weight0" name="total_weight" required type="text" class="form-control" placeholder="" value="" /></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
HTML:
<tbody>
<tr id="hiddenRow">
<td>
<button id="saveBtn" class="btn btn-success btn-xs">save</button>
</td>
<td id="firstName">
<input id="first" type="text" placeholder="first name" name="first_name" />
</td>
<td id="lastName">
<input id="last" type="text" placeholder="last name" name="last_name" />
</td>
<td id="date">
<input id="dateOf" type="text" placeholder="date of birth" name="date_of_birth" />
</td>
<td id="address">
<input id="addres" type="text" placeholder="address" name="address" />
</td>
<td id="phone">
<input id="phonenumber" type="text" placeholder="phone" name="phone" />
</td>
<td id="email">
<input id="mail" type="text" placeholder="email" name="email" />
</td>
<td id="left">
<input id="leftEye" type="text" placeholder="left eye" name="left_eye" />
</td>
<td id="right">
<input id="rightEye" type="text" placeholder="right eye" name="right_eye" />
</td>
</tr>
</tbody>
JS:
$('.new_customer').click(function () {
$("#hiddenRow").show();
$("#saveBtn").click((function () {
var firstval = $("#first").val(),
lastval = $("#last").val(),
dateval = $("#dateOf").val(),
addressval = $("#addres").val(),
phoneval = $("#phonenumber").val(),
emailval = $("#mail").val(),
leftval = $("#leftEye").val(),
rightval = $("#rightEye").val();
$("#firstName").text(firstval);
$("#lastName").text(lastval);
$("#date").text(dateval);
$("#address").text(addressval);
$("#phone").text(phoneval);
$("#email").text(emailval);
$("#left").text(leftval);
$("#right").text(rightval);
}));
Here is the Fiddle
I want to create new row each time I click on "new_customer" and each time save new data onclick Save. I'm just a beginner and my code is bad, I know) I will be glad any ideas. How can I do this in above method? thank you
var new_row='<tr>
<td>
<button id="saveBtn" class="btn btn-success btn-xs">save</button>
</td>
<td id="firstName">
<input id="first" type="text" placeholder="first name" name="first_name" />
</td>
<td id="lastName">
<input id="last" type="text" placeholder="last name" name="last_name" />
</td>
<td id="date">
<input id="dateOf" type="text" placeholder="date of birth" name="date_of_birth" />
</td>
<td id="address">
<input id="addres" type="text" placeholder="address" name="address" />
</td>
<td id="phone">
<input id="phonenumber" type="text" placeholder="phone" name="phone" />
</td>
<td id="email">
<input id="mail" type="text" placeholder="email" name="email" />
</td>
<td id="left">
<input id="leftEye" type="text" placeholder="left eye" name="left_eye" />
</td>
<td id="right">
<input id="rightEye" type="text" placeholder="right eye" name="right_eye" />
</td>
</tr>';
$("#hiddenRow tbody tr:last").after(new_row);
Add this code on add new row button and Write code for save data
I guess so this is an example of what you want:
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>
<table id="myTable">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
</script>
</body>
</html>
Reference and working example
I am working on sign up form using html form , but i am facing problem my password cannot validate when I enter wrong password and enter write past does not show anything so what should i do any help.
function validate(){
var = pass(document.getElementById("pwd").value;
var = pas1(document.getElementById("cpwd").value;
if (pass==pas1)
{
}
else
{
alert("Try again");
}
}
</script>
</head>
<body>
<p class="style2 style8">SIGN UP FORM!!!!</p>
<form onclick="validate()" action="insert.php" method="post">
<table width="270" height="386" border="1" align="right" bordercolor="#993366" bgcolor="#CCCCCC"><td width="260"><table width="232" border="1">
<tr>
<td colspan="2"><span class="style2">loginform</span></td>
</tr>
<tr>
<td width="72"><span class="style5">Name</span></td>
<td width="144"><label>
<input name="name" type="text" id="name" onblur="MM_validateForm('name','','R');return document.MM_returnValue" placeholder="Name" />
</label></td>
</tr>
<tr>
<td width="72"><span class="style5">Gender</span></td>
<td><p>
<label>
<input type="radio" name="gender" value="Male" id="gender"/>
<span class="style5">Male</span></label>
<span class="style5" onfocus="MM_validateForm('fname','','R');return document.MM_returnValue"><br />
<label>
<input type="radio" name="gender" value="female" id="gender" />
female</label>
</span><br />
</p></td>
</tr>
<td width="72"><span class="style5">DOB</span></td>
<td width="144"><span id="sprytextfield1">
<label>
<input name="dob" type="text" id="dob" onblur="MM_validateForm('dob','','R');MM_validateForm('dob','','R');return document.MM_returnValue" placeholder="yyyy/mm/dd"/>
</label>
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
</tr>
<tr>
<td><span class="style5">Password</span></td>
<td><label>
<input name="pwd" type="password" id="pwd" onchange="MM_validateForm('pwd','','R');return document.MM_returnValue" placeholder="password"/>
</label></td>
</tr>
<tr>
<td width="72"><span class="style5">Confirm Password</span></td>
<td width="144"><label>
<input name="cpwd" type="password" id="cpwd" onchange="MM_validateForm('cpwd','','R');return document.MM_returnValue" placeholder="Confirm Password"/>
</label> </td>
</tr>
<tr>
<td colspan="2"><label>
<div align="center">
<input type="submit" name="submit" id="submit" value="Signup" />
</div>
</label></td>
</tr>
</table>
<label></label></td>
</tr>
</table>
</form>
<h1> </h1>
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "date", {format:"yyyy/mm/dd"});
//-->
</script>
</body>
</html>
there is no pass in your content. You are writing it as:
var = pass(document.getElementById("pwd").value;
var = pas1(document.getElementById("cpwd").value;
Which should be this:
var pass = (document.getElementById("pwd").value;
var pas1 = (document.getElementById("cpwd").value;
Because the variable's name comes before the = sign. To show that this variable is having this value!
So, now lets use this one and try it like this:
if(pass==pas1) {
// save the password or whatever
} else {
// please try again..
}
This way, the user will check the inputs again. And it they are not working. Then you must first check that whether you are using correct ID of the element, or you are using ClassName as ID!
That's what the issue might be.
Well, for starters,
var = pass(document.getElementById("pwd").value;
var = pas1(document.getElementById("cpwd").value;
should be
var pass = document.getElementById("pwd").value;
var pas1 = document.getElementById("cpwd").value;
Edit:
Also, change onclick="validate()" to onclick="return validate();" and add return false; after the alert("Try again");.
Just small change in your code
function validate(){
var pass = document.getElementById("pwd").value;
var pas1 = document.getElementById("cpwd").value;
if (pass==pas1){
}
else{
alert("Try again");
return false;
}
}