I have a form, echo'd from a php page, and I need to error handle multiple text fields
the 'phone' field is not meant to have more than 10 NUMBERS
the 'fname', 'oname' and 'sname' are meant to have only letters
and the 'date' is meant to have only date format.
How do i achieve this using javascript?
echo '
<html>
<head>
<title>Member Registration</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<!-- USE JAVASCRIPT FOR ERROR HANDLING -->
<body>
<h1>Member Registration</h1>
<form method="POST" enctype="multipart/form-data" action="register.php" name="regform" onsubmit="return validateForm();return allnumeric()">
<table>
<tr>
<td><label for="fname">First name: </label> <input class="fields" type="text" name="fname" value="" required></td>
<td><label for="sname">Surname: </label> <input class="fields" type="text" name="sname" value="" required></td>
<td><label for="oname">Other names: </label> <input class="fields" type="text" name="oname" value="" required></td>
</tr>
<tr>
<td>Choose Profile Picture:</td><td> <input type="file" name="image" id="file" class="fields"></td>
</tr>
<tr>
<td><label for="nationalid" >National ID: </label> <input class="fields" type="text" name="nationalid" value="" required></td>
<td><label for="dob">Date: </label><input class="fields" type="text" name="dob" required></td>
</tr>
<tr>
<td><label for="email">Email: </label> <input class="fields" type="text" name="email" value="" required></td>
</tr>
<tr>
<td><label for="phone">Phone Number: </label> <input class="fields" type="text" name="phone" value="" required></td>
</tr>
<tr>
<td><label for="gender">Male</label><input type="radio" value="M" name="gender" required></td>
<td><label for="gender">Female</label><input type="radio" value="F" name="gender" required></td>
</tr>
<tr>
<td><input type="submit" value="Submit" name="submit" onclick="return matchcheck"></td>
</tr>
</table>
</form>
</body>
</html>';
here is the script i have written so far
function validateForm()
{
var x=document.forms["regform"]["email"].value;
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
function isNumeric(){
var a = document.getElementById('phone').value;
var b = /^\d+$/;
if(a.search(b) == -1)
{
alert(Must be Interger);
return false;
}
}
</script>
Related
The below table I want to change the input value for first row become value="1" onclick the copy button.
This value="1" when I entered manually and the value should repeat to the entire row when I click the copy button.
Note: I couldn't found any script regarding this to add the tried code.
Kindly comment below for further clarification.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
Copy this first value to the rest:
$(function() {
$(".btn-success").on("click", function(e) {
e.preventDefault(); // stop the link
var $inputs = $(this).closest("tr").find("input");
var val = $inputs.eq(0).val(); // take the first
$inputs.val(val);
})
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
You could do it like this:
$('.table a.btn').click(function() {
var inputVal = $(this).prev().val();
var td = $(this).closest("td");
var sib = td.siblings().find("input");
sib.val(inputVal)
});
This will take the value from the input associated with the link/button and put that value into the other input's on the same tr
Demo
$('.table a.btn').click(function() {
var inputVal = $(this).prev().val();
var td = $(this).closest("td");
var sib = td.siblings().find("input");
sib.val(inputVal)
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
You get the value of input using prev() inside click handler of the copy button.
Find parent td using closest and then get all its sibling tds. find input inside sibling tds and append first input value to the input existing values
$(document).ready(function(){
$('a.btn.btn-success').on('click', function(){
var val = $(this).prev('input').val();
var $td = $(this).closest('td');
var $siblings = $td.siblings();
//to append values
/*$siblings.find('input.form-control').each(function(){
$(this).val($(this).val() + val);
});*/
// to replace values
$siblings.find('input.form-control').val(val);
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
This JS code could be helpful.
jQuery(document).ready(function($) {
jQuery('.table a.btn').click(function(event) {
event.preventDefault();
var fieldVal = jQuery(this).siblings('.form-control').val();
jQuery(this).parent('td').siblings('td').children('.form-control').val(fieldVal);
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
In order to answer the question "Is it possible to place the button outside?":
Here is a version with the button in front of all the input fields:
Starting from the button itself (this) you look for the closest parent container of type td, then find all its siblings and their children of type input. The result is a jquery object with all the inputs of one table row. Then do the copying of values from the first (flds.eq(0)) to the rest of them all (flds.slice(1)).
$('.table a.btn').click(function() {
var flds = $(this).closest('td').siblings().find('input');
flds.slice(1).val(flds.eq(0).val());
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table"><thead><tr>
<th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th>
</tr></thead><tbody><tr><td>
Copy
</td><td>
<input type="text" class="form-control" value="1">
</td><td>
<input type="text" class="form-control" value="11">
</td><td>
<input type="text" class="form-control" value="11">
</td></tr><tr><td>
Copy
</td><td>
<input type="text" class="form-control" value="2">
</td><td>
<input type="text" class="form-control" value="2">
</td><td>
<input type="text" class="form-control" value="2">
</td></tr><tr><td>
Copy
</td><td>
<input type="text" class="form-control" value="3">
</td><td>
<input type="text" class="form-control" value="3">
</td><td>
<input type="text" class="form-control" value="3">
</td></tr></tbody></table>
In my project the var ans3 is calculated through javascript! I just want to built another script which should auto display some text into the Category of Ans3 Field according to the values of the calculated var3 and age.
Sample example criteria:
if ans3 < 5 and age < 18 ----> display: Normal Range,
else if ans3 < 10 and age < 50 -----> display: Increased Range,
else ... display: Out of Limits!
I know that this may be done using conditions but i can't exactly figure it out! any thoughts please would be usefull!
<html>
<head>
</head>
<body>
<style>
#ans, #ans2 {
display:none;
}
</style>
<div id="bodyfatmonitoring">
<form name="fatmonitor" Method="post" id="fatmonitor" enctype="multipart/form-data">
<h2 style="color:#b3b3cc;">Calculator</h2>
<table>
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td>
<label for="first">First: *</label>
<input type="text" name="first" size="35" id="first" required autocomplete="off">
</td>
<td>
<label for="fifth">Fifth: *</label>
<input type="text" name="fifth" size="35" id="fifth" autocomplete="off">
</td>
</tr>
<tr>
<td>
<label for="second">Second: *</label>
<input type="text" name="second" size="35" id="second" autocomplete="off">
</td>
<td>
<label for="sixth">Sixth: *</label>
<input type="text" name="sixth" size="35" id="sixth" autocomplete="off">
</td>
</tr>
<tr>
<td>
<label for="third">third: *</label>
<input type="text" name="third" size="35" id="third" autocomplete="off">
</td>
<td>
<label for="seventh">Seventh: *</label>
<input type="text" name="seventh" size="35" id="seventh" autocomplete="off">
</td>
</tr>
<tr>
<td>
<label for="fourth">Fourth: *</label>
<input type="text" name="fourth" size="35" id="fourth" autocomplete="off">
</td>
<td>
<label for="age">Age: *</label>
<input type="text" name="age" size="35" id="age" autocomplete="off">
</td>
</tr>
<input type="text" name="ans" size="35" id="ans"/>
<input type="text" name="ans2" size="35" id="ans2"/>
<tr>
<td>
<label for="firstname2">Name | Lastname: *</label>
<input type="text" name="firstname2" size="35" id="firstname2" autocomplete="off"/>
</td>
<td>
<label for="mandate">Date: *</label>
<input type="date" name="mandate" size="35" id="mandate" autocomplete="off"/>
</td>
</tr>
<tr>
<td>
<label for="ans3">Ans3 %: *</label>
<input type="text" name="ans3" size="35" id="ans3" autocomplete="off"/>
</td>
<td>
<label for="category">Category of Ans3: *</label>
<input type="text" name="category" size="35" id="category" autocomplete="off"/>
</td>
</tr>
<tr>
<td>
<button type="button" id="calculator" name="calculator" onclick="Calculate();">Υπολογισμός</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<script>
function Calculate() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
var third = document.getElementById('third').value;
var fourth = document.getElementById('fourth').value;
var fifth = document.getElementById('fifth').value;
var sixth = document.getElementById('sixth').value;
var seventh = document.getElementById('seventh').value;
var ans = document.getElementById('ans').value;
var ans2 = document.getElementById('ans2').value;
document.getElementById('ans').value = parseInt(first) + parseInt(second) + parseInt(third) + parseInt(fourth) + parseInt(fifth) + parseInt(sixth) + parseInt(seventh);
document.getElementById('ans2').value = 1.112 - 0.00043499 * parseInt(document.getElementById('ans').value) + 0.00000055 * Math.pow(parseInt(document.getElementById('ans').value), 2) - 0.00028826 * parseInt(document.getElementById('age').value);
document.getElementById('ans3').value = ((4.95 / document.getElementById('ans2').value) - 4.5) * 100;
}
</script>
Please check my fiddle.
Fiddle
When i enter any data in any rows in slab_range, i need to autofill all the other rows of 'Slab Range' with a value 'No Bid'. If i left blank, nothing has to be filled. Likewise if i enter any data in 'Part Number', all the other rows of 'Part Number' has to be filled with value '2'. The rows are coming from db, so i cant tell how many rows it will be, it should iterate all the rows.
<tr>
<td>
<input size="1" id="sl[0]" name="sl[0]" value="1" type="text">
</td>
<td>
<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
</td>
<td>
<input size="9" name="item_partno[]" id="item_partno[]" type="text">
</td>
</tr>
There you go, now it's your task to refactoring the code because both methods are equals.
var ProcessTable = (function () {
var _slabs, _partsNumber;
var _init = function () {
_slabs = $('input[name^="slab_range"]');
_partsNumber = $('input[name^="item_partno"]');
_slabs.on('blur', _slabBlurHandler);
_partsNumber.on('blur', _partNumberBlurHandler);
};
var _slabBlurHandler = function (e) {
var value = $.trim($(this).val());
if (value !== '') {
_slabs.val('No bid');
} else {
_slabs.val('');
}
$(this).val(value); // Because the previous line override the original value
};
var _partNumberBlurHandler = function (e) {
var value = $.trim($(this).val());
if (value !== '') {
_partsNumber.val('2');
} else {
_partsNumber.val('');
}
$(this).val(value); // Because the previous line override the original value
};
return {
init: _init
}
})();
ProcessTable.init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cart1" name="cart" method="post" class="single" action="price_edit_save.php?supplier_name=Jupiter+Microwave+Components+Inc&tender_id=151501">
<div class="clone_row">
<table style="border-collapse: collapse;" id="table" border="1" cellpadding="2" cellspacing="2" width="100%">
<thead>
<tr bgcolor="#E6E6FA">
<th width="4%">SlNo</th>
<th width="4%">Slab Range</th>
<th width="6%">Part Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input size="1" name="id[0]" value="9978" readonly="readonly" type="hidden">
<input size="1" id="sl[0]" name="sl[0]" value="1" type="text">
<input size="1" id="item_id[0]" name="item_id[0]" readonly="readonly" type="hidden">
</td>
<td>
<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
</td>
<td>
<input size="9" name="item_partno[]" id="item_partno[]" type="text">
</td>
</tr>
<tr>
<td>
<input size="1" name="id[1]" value="9979" readonly="readonly" type="hidden">
<input size="1" id="sl[1]" name="sl[1]" value="2" type="text">
<input size="1" id="item_id[1]" name="item_id[1]" readonly="readonly" type="hidden">
</td>
<td>
<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
</td>
<td>
<input size="9" name="item_partno[]" id="item_partno[]" type="text">
</td>
</tr>
<tr>
<td>
<input size="1" name="id[1]" value="9979" readonly="readonly" type="hidden">
<input size="1" id="sl[1]" name="sl[1]" value="2" type="text">
<input size="1" id="item_id[1]" name="item_id[1]" readonly="readonly" type="hidden">
</td>
<td>
<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
</td>
<td>
<input size="9" name="item_partno[]" id="item_partno[]" type="text">
</td>
</tr>
</tbody>
</table>
</div>
<div class="addMoreDIV">
</div>
<table>
<tr>
<td>
<input value="--Update Data--" type="submit">
</td>
</tr>
</table>
</form>
And please, be more kindly when you ask for "help".
I am trying to create an array from the content of a table. The content of the tables looks something like this:
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
And the script that I have written is like this
$(document).on('click', '#guardarBtn', function (event) {
var content=[];
$('.rowUpdate').each(function (i) {
$(this).find('td').each(function (j, v) {
if (j != 0) {
var input = $("input", this),
name = input.attr("name").substring(0, input.attr("name").length),
value = input.val();
alert(value);
content[name] = value;
alert(JSON.stringify(content));
}
});
//alert(content);
rows.push(content);
});
});
But when I click on the button to get the content of the columns of the table and save it in an array it shows blank
UPDATED Js Fiddle link is here
Thanks in advance
Check this one. I changed var content= []; to var content= {};
$(document).on('click', '#guardarBtn', function (event) {
var content= {};
$('.rowUpdate').each(function (i) {
$(this).find('td').each(function (j, v) {
if (j != 0) {
var input = $("input", this),
name = input.attr("name").substring(0, input.attr("name").length),
value = input.val();
content[name] = value;
// alert(JSON.stringify(content));
}
});
alert(JSON.stringify(content));
// rows.push(content);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
Try this (keep the HTML the same):
$(document).on('click', '#guardarBtn', function (event) {
var rows = [];
$('.rowUpdate').each(function (i) {
var row = {};
$(this).find('td').each(function (j, v) {
if (j != 0) {
var input = $("input", this),
name = input.attr("name").substring(0, input.attr("name").length),
value = input.val();
row[name] = value;
}
rows.push(row);
});
});
Shorter way to access :
$(document).on('click', '#guardarBtn', function (event) {
var content = {};
$('.rowUpdate').each(function (i) {
$(this).find('input[type=text]').each(function(){
content[$(this).attr("name")] = $(this).val();
});
});
alert(JSON.stringify(content));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
Try This :
<form name="form_name" id='form_name'>
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
</form>
js Here :
$(document).on('click', '#guardarBtn', function (event) {
var row=[];
$('.rowUpdate').each(function (i) {
var content=[];
$(this).find('input').each(function(key,value){
var field_name=$(this).attr('name');
var field_value=$(this).val();
content[field_name]=field_value;
});
row.push(content);
});
console.log(row);
});
If I well understand the question, you just need for something like this (I'm not sure however why you used nested each loops - is there any reason of this? Do you have more code in between these loops?)
$(document).on('click', '#guardarBtn', function(e){
var content={};
$('.rowUpdate td').find('input').each(function(){
content[this.name] = this.value;
});
alert(JSON.stringify(content));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
I'm creating a plugin where I'm wanting the owner of the company to be able to log in and be able to add employees/contractors and upon creating them, have them added to the wpdb. Right now, I've copied over the the html that was in the source code for the Add New User (I don't want to use the add new user format) and I've got the form there (minus what I'm guessing is the ajax and javascript bits). When I click submit it just returns to the page.
Here is the code that is being called in... I'm wondering if I'm missing some includes or something along those lines, thanks in advance! :)
<?php
function e34s_tc_add_staff()
{
global $wbdb;
?>
<div class="wrap">
<?php screen_icon(); ?>
<h2 id="add-new-user"> Add New Staff Member</h2>
<div id="ajax-response"></div>
<p>Create a new staff member for this site.</p>
<form action="" method="post" name="createuser" id="createuser" class="validate">
<input name="action" type="hidden" value="createuser" />
<input type="hidden" id="_wpnonce_create-user" name="_wpnonce_create-user" value="5ebe2973f8" /><input type="hidden" name="_wp_http_referer" value="/wordpress/wp-admin/user-new.php" /><table class="form-table">
<tr class="form-field form-required">
<th scope="row"><label for="user_login">Username <span class="description">(required)</span></label></th>
<td><input name="user_login" type="text" id="user_login" value="" aria-required="true" /></td>
</tr>
<tr class="form-field form-required">
<th scope="row"><label for="email">E-mail <span class="description">(required)</span></label></th>
<td><input name="email" type="text" id="email" value="" /></td>
</tr>
<tr class="form-field">
<th scope="row"><label for="first_name">First Name </label></th>
<td><input name="first_name" type="text" id="first_name" value="" /></td>
</tr>
<tr class="form-field">
<th scope="row"><label for="last_name">Last Name </label></th>
<td><input name="last_name" type="text" id="last_name" value="" /></td>
</tr>
<tr class="form-field form-required">
<th scope="row"><label for="pass1">Password <span class="description">(required)</span></label></th>
<td>
<input class="hidden" value=" " /><!-- #24364 workaround -->
<input name="pass1" type="password" id="pass1" autocomplete="off" />
</td>
</tr>
<tr class="form-field form-required">
<th scope="row"><label for="pass2">Repeat Password <span class="description">(required)</span></label></th>
<td>
<input name="pass2" type="password" id="pass2" autocomplete="off" />
<br />
<div id="pass-strength-result">Strength indicator</div>
<p class="description indicator-hint">Hint: The password should be at least seven characters long. To make it stronger, use upper and lower case letters, numbers and symbols like ! " ? $ % ^ & ).</p>
</td>
</tr>
<tr>
<th scope="row"><label for="send_password">Send Password?</label></th>
<td><label for="send_password"><input type="checkbox" name="send_password" id="send_password" /> Send this password to the new user by email.</label></td>
</tr>
<tr class="form-field">
<th scope="row"><label for="role">Staff Type</label></th>
<td><select name="role" id="role">
<option value='employee'>Employee</option>
<option value='contractor'>Contractor</option>
</select>
</td>
</tr>
</table>
<p class="submit"><input type="submit" name="createuser" id="createusersub" class="button button-primary" value="Add New Staff Member " /></p>
</form>
</div>
<?php
}