WP - Add New User Form - javascript

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
}

Related

Comparing two value in a dynamic table using jQuery in Asp.net core 2.2

I have the following dynamic table
I want to compare the value of submit Quantity textbox and Stock textbox together to check if Submit Quantity value is greater than stock value for all rows.
When submit Quantity textbox loses focus I want check, if Submit Quantity value is greater than stock, I want show an alert that "Not enough goods exist in stock" and Submit Quantity textbox must receive focus again.
My HTML and C#
<tbody>
#{ var i = 0;}
#foreach (var item in Model)
{
<tr>
<td></td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<input type="number" onblur="compare()" id="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" id="stock" readonly="readonly" class="form-control" />
</td>
</tr>
}
I have no idea how to do that
Any help will be appreciated
Thanks in advance
Edit:
This is what I have done to achieve the result but it only works on first row Submit Quantity textbox not on second row
function compare() {
$('#submitQ').each(function () {
let submit = $('#submitQ').val();
let quantity = $('#stock').val();
if (submit > quantity) {
alert('Not enough goods!')
$('#submitQ').select();
return false
}
})
You cannot have mutliple elements with same ids instead use class selector .Then , just get value of submit quantity using $(this).val() and stock value using .closest('tr').find('.stock').. then simply compare these values .
Demo Code :
$('.submitQ').on("blur", function() {
//get value of submit qnty
let submit = $(this).val();
//get stock
let quantity = parseInt($(this).closest('tr').find('.stock').val());
if (submit > quantity) {
alert('Not enough goods!')
$(this).focus(); //show focus
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<th>No</th>
<th>Name</th>
<th>Brand</th>
<th>Requested Quantity</th>
<th>Submit Quantity</th>
<th>Stock</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" value="something" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<!--use class-->
<input type="number" class="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" value="8" class="stock" readonly="readonly" class="form-control" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" value="something" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<input type="number" class="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" value="5" class="stock" readonly="readonly" class="form-control" />
</td>
</tr>
</tbody>
</table>

How to get JSON data from HTML form with backbone js

I am creating a dynamic form in a Backbone.js view. I want to get all the JSON data from the form in my view without using jQuery. Is there any way to get the data?
For example: When You check the checkbox, I only want the data for the checked field.
<table class="table">
<thead>
<tr>
<th></th>
<th>{{labels.selectImage}}</th>
<th>{{labels.nameVisibleToShop}}</th>
<th>{{labels.sourceCode}}</th>
<th>{{labels.pricePerItem}}</th>
</tr>
</thead>
<tbody>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
</tbody>
</table>

Enabling form fields in case of minor

form field screenshot
I am collecting nominees data from users for nomination in my organization. The form fields have been attached as image for your reference.
I use iondatepicker for the date field. In case the date of birth chosen by the users for the nominee works out to be the age of a minor i want the fields of the minors' guardian data to be enabled. else they should remain as disabled or with the value 'NA'. Please find below the codes for the form fields.
<table>
<tr>
<td>
<div id="result-1">
<input style="width: 600px;" type="text" value="" name="dob" id="mydate"
data-lang="en" data-years="1925-2018" size="10" maxlength="10"
placeholder='date of birth of nominee (dd/mm/yyyy)' data-format="DD/MM/YYYY"
class="form-control"/>
</div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<b>If Nominee is a Minor, give
GUARDIAN's Particulars</b>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_name" id="g_name" size="30" maxlength="200"
placeholder='Guardian Name' class="form-control"/>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_relation" id="g_relation" size="30" maxlength="200"
placeholder='Guardian Relationship with you' class="form-control"/>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_address" id="g_address" size="30" maxlength="200"
placeholder='Guardian Address' class="form-control"/>
</td>
</tr>
</table>
You can try following solution (assuming you are not using any libraries like jQuery or moment.js, it's in plain javascript):
var myDate = document.getElementById('mydate')
myDate.addEventListener('change', function(e){
var val = e.target.value
var date = new Date(val)
if ( isNaN( date.getDate()) ){
alert('Wrong date format!')
return;
}
var compareDate = new Date()
compareDate.setFullYear(compareDate.getFullYear()-18)
if(compareDate < date){
document.getElementById('g_name').value=""
document.getElementById('g_relation').value=""
document.getElementById('g_address').value=""
document.getElementById('g_name').disabled=false
document.getElementById('g_relation').disabled=false
document.getElementById('g_address').disabled=false
}else{
document.getElementById('g_name').value="NA"
document.getElementById('g_relation').value="NA"
document.getElementById('g_address').value="NA"
document.getElementById('g_name').disabled=true
document.getElementById('g_relation').disabled=true
document.getElementById('g_address').disabled=true
}
})
<table>
<tr>
<td>
<div id="result-1">
<input style="width: 600px;" type="text" value="" name="dob" id="mydate"
data-lang="en" data-years="1925-2018" size="10" maxlength="10"
placeholder='date of birth of nominee (dd/mm/yyyy)' data-format="DD/MM/YYYY"
class="form-control"/>
</div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<b>If Nominee is a Minor, give
GUARDIAN's Particulars</b>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_name" id="g_name" size="30" maxlength="200" disabled
placeholder='Guardian Name' class="form-control"/>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_relation" id="g_relation" size="30" maxlength="200" disabled
placeholder='Guardian Relationship with you' class="form-control"/>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_address" id="g_address" size="30" maxlength="200" disabled
placeholder='Guardian Address' class="form-control"/>
</td>
</tr>
</table>

onfocus not working in javascript

i am putting together some javascript form validation and i cant figure out how to get this onfocus to take hold of my div... i just need it to alert me that my onfocus function is making contact with my last name imput... :(
html:
<div id="contact">
<form name="form1" action="send.php" method="post" id="contact_f">
<table id="contact_table">
<tr>
<td class="col1" colspan="2">
<h1 class="center_text">Contact Aron</h1>
<div id="error_messages">
errors
</div>
</td>
</tr>
<tr>
<td class="col1">
<label for="first_name">First Name*</label><br>
<input id="first_name" required name="Name" type="text" pattern="[a-zA-Z]+">
</td>
<td class="col2">
<label for="last_name">Last Name*</label><br>
<input id="last_name" required type="text">
</td>
</tr>
<tr>
<td class="col1">
<label for="email">Email*</label><br>
<input id="email" required type="email">
</td>
<td class="col2">
<label for="confirm_email">Confirm Email*</label><br>
<input id="confirm_email" required type="text">
</td>
</tr>
<tr>
<td class="col1">
<label for="phone">Phone Number <span id="color_gray">xxx-xxx-xxxx</span></label><br>
<input id="phone" type="tel" pattern="\d{3}[\-]\d{3}[\-]\d{4}">
</td>
<td class="col2">
</td>
</tr>
<tr class="col2">
<td class="col1" colspan="2">
<label for="message">Message*</label><br>
<textarea id="message" required type="text"></textarea>
</td>
</tr>
<tr>
<td class="col1" colspan="2">
<button id="submit_button" type="submit" value="submit">Submit Form</button>
</td>
</tr>
</table>
</form>
javascript in question:
document.getElementById("last_name").onfocus=function() {
alert("last name");
};
Actually your code is working fine. You can try it with using jquery, like this -
$(document).ready(function() {
$( "#last_name" ).focus(function() {
alert("Last name");
});
});
You need to use:
document.getElementById("last_name").onfocus=function() {
alert(this.value);
};
Try this
window.addEventListener('load',function(){
document.getElementById("last_name").addEventListener('focus',function() {
alert(this.value);
});
});

how to move previous page and show values in fields?

i make two web page,i want to get data from first page on second page,if user click edit message then move first page and show the entered data of user,here is my code:
first.php
<h1>Compose Message</h1>
<script type="text/javascript" src="<?=MURL?>/js/ckeditor/ckeditor.js"></script>
<script src="//ticket_inspector_new.com/js/tooltip.js" type="text/javascript"> </script>
<form action="" method="post" id="form" enctype="multipart/form-data">
<table class="form">
<tr class="heading">
<th style="width: 25%;">Recipients</th>
<th style="width: 75%;"> </th>
</tr>
<tr>
<td>
<label for="campaigns">Campaigns</label>
</td>
<td>
<select name="events[]" multiple size="10" >
<?
$select = sprintf ("SELECT event_id,event_name
FROM `events`
WHERE (`user_id` = '%s') order by event_name",
$GLOBALS ['mysqli']->real_escape_string ($_SESSION['user_id']));
$res = $GLOBALS ['mysqli']->query ($select) or die ($GLOBALS ['mysqli']->error . __LINE__);
if ($res->num_rows > 0)
{
while($row = $res->fetch_assoc ())
{
?>
<option value="<?=$row['event_id']?>"><?=$row['event_name']?></option>
<?
}
}
?>
</select>
</td>
</tr>
<tr>
<td style="padding-left:95px;">
<label for="fromdate">Registrants From</label>
</td>
<td style="padding-left:10px;">
<input name="fromdate" type="text" value="" class="calendar time" id="fromdate" size="30" />
<label for="todate">To</label>
<input name="todate" type="text" value="" class="calendar time" id="todate" size="30" />
</td>
</tr>
<tr>
<td>
<label for="upload">Upload CSV</label>
<span class="helptip">
Select CSV file for upload.
</span>
</td>
<td>
<input name="uploadcsv" type="file" />
</td>
</tr>
<tr class="heading">
<th style="width: 25%;">Message</th>
<th style="width: 75%;"> </th>
</tr>
<tr>
<td>
<label for="description">Description(optional)</label>
</td>
<td>
<input name="description" type="text" value="" id="description" size="35" />
</td>
</tr>
<tr>
<td>
<label for="subject">Subject</label>
</td>
<td>
<input name="subject" type="text" value="" id="subject" size="35" />
</td>
</tr>
<tr>
<td>
<label for="fromname">From Name</label>
</td>
<td>
<input name="fromname" type="text" value="" id="fromname" size="27" />
</td>
</tr>
<tr>
<td>
<label for="replyto">Reply To</label>
</td>
<td>
<input name="replyto" type="text" value="" id="replyto" size="27" />
</td>
</tr>
<tr>
<td>
<label for="senddatetime">Send Date/Time</label>
<span class="helptip">
Click the calender to select the date you wish ans select time zone from select box.
</span>
</td>
<td>
<input name="senddatetime" type="text" value="" class="calendar time" id="senddatetime" size="30" />
<select name="timezone" id="timezone">
<option value="Pacific/Honolulu">Hawaii-Aleutian Time (Honolulu, no DST)
</option><option value="America/Anchorage">Alaska Time (Anchorage)</option><option value="America/Los_Angeles"
selected="selected">Pacific Time (Los Angeles)</option><option value="America/Denver">Mountain Time (Denver)</option><option
value="America/Phoenix">Mountain Time (Phoenix, no DST)</option><option value="America/Chicago">Central Time (Chicago)
</option><option value="America/Regina">Central Time (Regina, no DST)</option><option value="America/New_York">Eastern Time
(New York)</option><option value="America/Halifax">Atlantic Time (Halifax)</option>
</select>
<script>
var list = document.getElementById('timezone');
var selval = "0";
for(var i = 0; i < list.options.length; ++i)
{
if(list.options[i].value==selval)
{
list.options[i].selected = true;
i=list.options.length;
}
}
</script>
</td>
</tr>
<tr>
<td>
<label for="message">Message</label>
</td>
<td colspan="2">
<textarea name="message" class="ckeditor" id="message" cols="90" rows="15" style="width: 100%;"></textarea>
</td>
</tr>
</table>
<table class="form">
<tr class="heading">
<th style="width:100%; background-color:#C4C4FE; font-size:10px; font-weight:normal;">Emails can take upto 30 minutes to Send.We have zero tolerance for spam messages.Every message sent out is reviewed for spam.Any spam messages sent will result in termination of account.</th>
</tr>
</table>
<p class="center_align">
<input type="submit" class="button arrow" name="submit_skip" value="Continue" />
</p>
</form>
and here is my second page:
<h1>Confirm Message</h1>
<?
$recepients=0;
$count=count($_POST['events']);
?>
<input type="button" class="button edit" name="submit_skip" value="Edit Message" />
<input type="submit" class="button email" name="submit_email" value="Send Message" />
i want when user click on edit massage it moves previous page and values shown in fields
?>
Since you want to send form to a two different scripts I suggest that you use 2 forms:
<form action="formfilling.php">
<?php
//prepare the recived POST to send back:
foreach( $_POST as $key => $value ){
if( is_array($_POST[$key]) ){ //if post is array e.g. your events[]
foreach( $_POST[$key] as $subvalue ){
echo '<input type="hidden"'
.' name="'.htmlspecialchars($key).'[]"'
.' value="'.htmlspecialchars($subvalue).'">'."\n";
}
} else{
echo '<input type="hidden"'
.' name="'.htmlspecialchars($key).'"'
.' value="'.htmlspecialchars($value).'">'."\n";
}
}
?>
<input type="submit" class="button edit" name="submit_skip" value="Edit Message" />
</form>
<form action="submitemail.php">
<?php //possibly show message? ?>
<input type="submit" class="button email" name="submit_email" value="Send Message" />
</form>
And then in formfilling check if input is not empty if not => echo its value
if( !empty($_POST['inputName']) ) echo htmlspecialchars($_POST['inputName']);
And for the array something like
if( !empty($_POST['inputName']) ){
foreach( $_POST['inputName'] as $val ){
//Test if the current option has the value of $val if so:
echo /*OPTION with SELECTED*/;
}
}
ALWAYS USE HTML ESCAPING when printing/echoing $_POST/$_GET
=> dont trust the users!
=> in PHP there is a htmlspecialchars() function
go to the previous page with javascript
window.history.go(-1)

Categories