AUSU jquery-Ajax Autosuggest Multiple values - mysql

I have a form which has the following fields:
Company Name,
Address,
City
Using the AUSU jquery autosuggest scripts I am able to populate the address field based on the search done in the company field but what I can't seem to be able to accomplish is also populating the city field with the appropriate value. All data is stored in a mysql database.
I've gotten as far as being able to have the address and city populate the address field but I need these 2 values to go into their respective fields (shiptoaddress and shiptocity).
Any suggestions?
This is my php to obtain data from mysql database:
<?php
$con = mysql_connect("localhost","userid","password");
if (!$con){ die('Could not connect: ' . mysql_error()); }
mysql_select_db("dbase", $con);
$id = #$_POST['id']; // The id of the input that submitted the request.
$data = #$_POST['data']; // The value of the textbox.
if ($id && $data)
{
if ($id=='clients')
{
$query = "SELECT shiptoaddress,company, shiptocity
FROM Clients
WHERE company LIKE '%$data%'
LIMIT 5";
$result = mysql_query($query);
$dataList = array();
while ($row = mysql_fetch_array($result))
{
$toReturn = $row['company'];
$dataList[] = '<li id="' .$row['shiptoaddress'] .$row['shiptocity'] . '">' . htmlentities($toReturn) . '</li>';
}
if (count($dataList)>=1)
{
$dataOutput = join("\r\n", $dataList);
echo $dataOutput;
}
else
{
echo '<li>No Results</li>';
}
}
}
?>
And this is part of the html form code:
<script>
$(document).ready(function() {
$.fn.autosugguest({
className: 'ausu-suggest',
methodType: 'POST',
minChars: 2,
rtnIDs: true,
dataFile: 'data.php'
});
});
</script>
</head>
<body>
<div id="wrapper">
<form action="index.php" method="get">
<div class="ausu-suggest">
<input type="text" size="100" value="" name="clients" id="clients" autocomplete="off" />
<input type="text" size="100" value="" name="shiptoaddress" id="shiptoaddress" autocomplete="off"/>
<input type="text" size="100" value="" name="shiptocity" id="shiptocity" autocomplete="off"/>
</div>
</form>

I solved my problem by using the Jquery autocomplete widget.

Related

Set a value to HTML select while using Ajax and SweetAlert2

I am building a form using SweetAlert2 + Ajax, but I have a problem with the <select> tag, so I will skip segments of the code that have nothing to do with the problem
The Ajax sends the email to the PHP code, then with the email I make a MySQL query to get the full information from the user (name, age and country), I storage the info in an array and returns it to the ajax with echo json_encode($arrayResult), then I print the data with SweetAlert2 but I have the problem that I dont know how to print it with the <select> tag, here is my code so you can understand me better...
The Ajax + SweetAlert2
$.ajax({
type: "POST",
url: "getuserdata.php",
data: {
email : emailX
},
success: function (response){
response = JSON.parse(response);
Swal.fire({
html:`<div>Insert your new information</div>
<div>
<span>Name</span>
<input id="name" type="text" value="${response.name}">
</div>
<div>
<span>email</span>
<input id="email" type="email" value="${response.email}">
</div>
<div>
<span>Age</span>
<input id="age" type="text" value="${response.age}">
</div>
<select id="country">
<option value="USA">USA</option>
<option value="England">England</option>
<option value="Canada">Canada</option>
</select>
`,
})
}
})
An just in case here is the PHP:
<?php
$mysqli = new mysqli("localhost","root","","store");
$mysqli->set_charset("utf8");
$email = $_POST['email'];
$sql = "SELECT * FROM clients WHERE email = '".$email."'";
$result = mysqli_query($mysqli, $sql);
$data = $result->fetch_assoc();
$count = mysqli_num_rows($result);
$arrayResult = [];
if($count > 0){
$arrayResult['name'] = $data['name'];
$arrayResult['age'] = $data['age'];
$arrayResult['country'] = $data['country'];
}else{
$arrayResult['name'] = '';
$arrayResult['age'] = '';
$arrayResult['country'] = '';
}
echo json_encode($arrayResult);
?>
Of course if this was a basic HTML code I would have solve it but it is inside a Javascript + Inside Ajax + inside a SweetAlert2 and I have try all the ways I know but dont work.
The country can be ONLY one of those 3 (USA, England and Canada), there is a ${response.country} that resturns one of those 3 countries.
So what I want is that depending of the country returned It will be the one selected in the <option> of the <select>
I guess you can just assign the return value to your select option!?
something like $("country").val(country);
also, maybe you can check this question, too.
link

HTML/PHP inline update and delete for each row of a table

Having a bit of a problem with an inline 'update' button, where I am pulling data from a mysql table (done), presenting that data to the screen using 'foreach' (done) and have a update and delete button on each line that POSTs the correct button 'name' and ID of the user (done).
However what the $_POST array isnt parsing is the correct data with the row information.... It does parse Changes to the bottom row, but if you change another row, it just parses the last row again....
<input type="hidden" name="action" value="submit" />
<pre></pre>
<?php print_r($_POST);?>
<?php
echo '<table class="table table-condensed">';
echo '<thead><tr><th style="width: 15%">Name</th><th style="width: 25%">Login</th><th style="width: 25%">Email</th><th style="width: 7%">Role</th><th style="width: 7%">Group</th><th style="width: 15%">LoftID</th><th>Edit</th><th>Delete</th></tr></thead><tbody>';
foreach($users as $person){
echo '<tr>';
echo '<td><input type="text" class="form-control" name="name" id="'.$person['id'].'" placeholder="Name" value="'.$person['name'].'"/></td>';
echo '<td><input type="text" class="form-control" name="login" id="'.$person['id'].'" placeholder="Login" value="'.$person['login'].'"/></td>';
echo '<td><input type="text" class="form-control" name="mail" id="'.$person['id'].'" placeholder="Mail" value="'.$person['mail'].'"/></td>';
echo '<td><input type="text" class="form-control" name="role" id="'.$person['id'].'" placeholder="Role" value="'.$person['role'].'"/></td>';
echo '<td><input type="text" class="form-control" name="group" id="'.$person['id'].'" placeholder="Group" value="'.$person['group'].'"/></td>';
echo '<td><select type="text" class="form-control" name="LoftID" id="'.$person['id'].'" placeholder="Loft">';
foreach($lofts as $info) {
if($info['id']==$person['LoftID']){
echo '<option value='.$info["id"].' selected>'.$info["name"].'</option>';
}
else{
echo '<option value='.$info["id"].'>'.$info["name"].'</option>';
}
}
echo '</select></td>';
echo '<td><button type="submit" name="update" value="'.$person['id'].'" class="btn btn-primary">Update</button></td>';
echo '<td><button type="submit" name="delete" value="'.$person['id'].'" class="btn btn-primary">Delete</button></td>';
echo '</tr>';
}
echo '</tbody></table>';
?>
</div>
</form>
What I need is for to allow me to pull the data from the $_POST so I can then throw it back into the database as an update based on the ID, which I believe I can do, as I have done that already in my code....
I would really like to do this without the need to display another page with the data on it to update....
Thanks in advance
You need Ajax for doing that job without reloading the page or go to another page with parameter. And remember that button doesn't has value like input. Use data-id or data-pid or what ever you like. And put a class name for example 'updateBtn' to identify the button.
echo '<td><button type="button" data-pid="'.$person['id'].'" class="btn btn-primary updateBtn">Update</button></td>';
<script>
$('.updateBtn').on('click', function() {
var pid = $(this).data('pid'); console.log(pid); // see the result in console
var pid = parseInt(pid); // change to int
$.ajax({
url: '/ajax/update-data/index.php', // specify folder and file name
data: { pid : pid },
dataType: 'json',
success: function (response) {
if(response.status == 'success') {
// do something to the html code to show the successful update
return false;
}
if(response.status == 'fail') {
// do something to the html code to show the fail update
return false;
}
}
});
});
</script>
Ajax file :
<?php
function response ($status) {
header("Content-Type:application/json");
$response['status'] = $status;
$json_response = json_encode($response);
echo $json_response;
}
if($_POST) {
$pid = filter_input(INPUT_POST, 'pid', FILTER_SANITIZE_NUMBER_INT);
if($pid) {
$done = // do php to chage update. You can refer to class or direct php mysql update
if($done) {
response ('success');
}else{
response ("fail");
}
}else{
response ("parameter fail");
}
}
?>
OK so I think I have found the answer, and have included the following;
echo '<form class="form-horizontal" action="" method="post">';
Just under the first foreach statement, so that each row is its own form element.
Does anyone see any issues with doing it this way?? The data will always be quite limited and likely to never be more than 10s of rows.
Kind regards and thanks for all the help

HTML mailto form

Can anyone help me with my feedback form for a website I am building?
I am not receiving any errors when I run this, although it doesn't actually send any email at all.
The following is the code I am trying to use:
<form action="mailto:admin#example.com" enctype="text/plain" method="post">
<p>Name: <input name="Name" type="text" id="Name" size="40"></p>
<p>E-mail address: <input name="E-mail" type="text" id="E-mail" size="40"></p>
<p>Comment:</p>
<p><textarea name="Comment" cols="55" rows="5"
id="Comment"></textarea></p>
<p><input type="submit" name="Submit" value="Submit"></p>
</form>
Sending mail from HTML Form is not a right option to do, you are using an HTTP Method (POST), so you have to set a http/https link from your action value. Otherwise, you have to send the email using the href tag, including a subject and body parameters.
E.g: Send Message
The mail application installed in your machine would automatically opened when you click that link.(Outlook, Gmail,...) and you can choose which one you have to send the mail within it.
you should maken a .php file
eg.
<form method="post" action="mail.php">
then in your mail.php put something like this:
<?php
session_start();
$to = "contact#webmagico.be"; // this is your Email address
$from = htmlspecialchars($_POST['email']); // this is the sender's Email address
$naam = htmlspecialchars($_POST['naam']);
$email = htmlspecialchars($_POST['email']);
$messageText = $naam . " " . $email . " wrote:" . "\n\n" . htmlspecialchars($_POST['bericht']);
$message = array(
"ontvanger" => $to,
"zender" => $from,
"naam" => $naam,
"email" => $email
);
$valid = true;
foreach($item in $message)
{
if(!isset($item) || $item === "")
{
$valid = false;
}
}
if($valid)
{
mail($to, $naam, $message, "From:" . $email);
}
else
{
$_SESSION['error'] = "Forgot something!"
}
/*file that gives the response*/
header('Location: thankyou.php');
?>
You can find different alternatives about a post-form on the web.
Hope this helps.

AJAX PHP form can't resend data / always stops at phone num. field

I'm trying to make a simple contact form for my website, so I bought one from Code Canyon. After not receiving slow and scarce help from the author, I'm asking you guys for help.
Basically it's a very simple contact form but I'm not too good with coding so it bothers me regardless. This is the HTML code;
<div id="contact" class="clearfix"><!-- contact -->
<h1><img name="logo" src="" width="300" height="50" alt="" style="background-color: #3366FF" /></h1><p class="txn">Lorem ipsum dim sum sum.</p>
<div id="message"></div>
<form method="post" action="contact.php" name="contactform" id="contactform">
<fieldset>
<legend>Please fill in the following form to contact us</legend>
<label for=name accesskey=U><span class="required">*</span> Your Name</label>
<input name="name" type="text" id="name" size="30" value="" />
<br />
<label for=email accesskey=E><span class="required">*</span> Email</label>
<input name="email" type="text" id="email" size="30" value="" />
<br />
<label for=phone accesskey=P><span class="required">*</span> Phone</label>
<input name="phone" type="text" id="phone" size="30" value="" />
<br />
<label for=subject accesskey=S>Subject</label>
<select name="subject" type="text" id="subject">
<option value="Support">Support</option>
<option value="a Sale">Sales</option>
<option value="a Bug fix">Report a bug</option>
</select>
<br />
<label for=comments accesskey=C><span class="required">*</span> Your comments</label>
<textarea name="comments" cols="40" rows="3" id="comments" style="width: 350px;"></textarea>
<p><span class="required">*</span> Are you human?</p>
<label for=verify accesskey=V> 3 + 1 =</label>
<input name="verify" type="text" id="verify" size="4" value="" style="width: 30px;" /><br /><br />
<input type="submit" class="submit" id="submit" value="Submit" />
</fieldset>
</form>
The JavaScript file I was given in the template...practically unchanged
jQuery(document).ready(function(){
$('#contactform').submit(function(){
var action = $(this).attr('action');
$("#message").slideUp(450,function() {
$('#message').hide();
$('#submit')
.after('<img src="assets/ajax-loader.gif" class="loader" />')
.attr('disabled','disabled');
$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
phone: $('#telephone').val(),
subject: $('#enquiry').val(),
comments: $('#message').val(),
},
function(data){
document.getElementById('message').innerHTML = data;
$('#message').slideDown('fast');
$('#contactform img.loader').fadeOut('slow',function(){$(this).remove()});
$('#contactform #submit').attr('disabled','');
if(data.match('success') != null) $('#contactform').slideUp('slow');
}
);
});
return false;
});
});
And then there is the contact-php file I got
<?php
if(!$_POST) exit;
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$subject = $_POST['subject'];
$comments = $_POST['comments'];
$verify = $_POST['verify'];
if(trim($name) == '') {
echo '<div class="error_message">Attention! You must enter your name.</div>';
exit();
} else if(trim($email) == '') {
echo '<div class="error_message">Attention! Please enter a valid email address.</div>';
exit();
} else if(trim($phone) == '') {
echo '<div class="error_message">Attention! Please enter a valid phone number.</div>';
exit();
} else if(!is_numeric($phone)) {
echo '<div class="error_message">Attention! Phone number can only contain digits.</div>';
exit();
} else if(!isEmail($email)) {
echo '<div class="error_message">Attention! You have enter an invalid e-mail address, try again.</div>';
exit();
}
if(trim($subject) == '') {
echo '<div class="error_message">Attention! Please enter a subject.</div>';
exit();
} else if(trim($comments) == '') {
echo '<div class="error_message">Attention! Please enter your message.</div>';
exit();
} else if(trim($verify) == '') {
echo '<div class="error_message">Attention! Please enter the verification number.</div>';
exit();
} else if(trim($verify) != '4') {
echo '<div class="error_message">Attention! The verification number you entered is incorrect.</div>';
exit();
}
if($error == '') {
if(get_magic_quotes_gpc()) {
$comments = stripslashes($comments);
}
// Configuration option.
// Enter the email address that you want to emails to be sent to.
// Example $address = "joe.doe#yourdomain.com";
//$address = "example#themeforest.net";
$address = "mylerworks#gmail.com";
// Configuration option.
// i.e. The standard subject will appear as, "You've been contacted by John Doe."
// Example, $e_subject = '$name . ' has contacted you via Your Website.';
$e_subject = 'You\'ve been contacted by ' . $name . '.';
// Configuration option.
// You can change this if you feel that you need to.
// Developers, you may wish to add more fields to the form, in which case you must be sure to add them here.
$e_body = "You have been contacted by $name with regards to $subject, their additional message is as follows.\r\n\n";
$e_content = "\"$comments\"\r\n\n";
$e_reply = "You can contact $name via email, $email or via phone $phone";
$msg = $e_body . $e_content . $e_reply;
if(mail($address, $e_subject, $msg, "From: $email\r\nReply-To: $email\r\nReturn-Path: $email\r\n")) {
// Email has sent successfully, echo a success page.
echo "<fieldset>";
echo "<div id='success_page'>";
echo "<h1>Email Sent Successfully.</h1>";
echo "<p>Thank you <strong>$name</strong>, your message has been submitted to us.</p>";
echo "</div>";
echo "</fieldset>";
} else {
echo 'ERROR!';
}
}
function isEmail($email) { // Email address verification, do not edit.
return(preg_match("/^[-_.[:alnum:]]+#((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i",$email));
}
?>
Problem is: let's say I fill up the form but forget to put my name in. The form will notify me I forgot it but I will not be able to post it, I will need to refresh the page. Also, it keeps giving me the "please enter a valid phone number" error even when I fill the form completely.
So how do I get it to work?
In case I didn't post something correctly here, check how the form looks here - You can view the form here
Your submit button is disabled after posting data . That is why you are not able to re-post it
$('#contactform #submit').attr('disabled','');
Use correct id of input field.
phone: $('#telephone').val(),
this will be always null as there is no component with this id
Its same kind of error. There is no element with id enquiry or message.
subject: $('#enquiry').val(),
comments: $('#message').val(),
Please be sure about name and id of your html components while retrieving values
Thanks

Wordpress Custom Registration Form

I have a client that needs a custom registration form.
I need to make a custom design on this page
I need to add custom fields like First Name, Company, Phone, etc.
Someone can help me with this?
A better place to ask WordPress questions is probably on WordPress Answers. Anyhoo, if you want to solve this without plugins, you need three things:
A custom WordPress theme
A Page Template
A WordPress Page that uses the Page Template
When you have these three parts in place, you can do the following in your Page Template:
<?php
/*
Template Name: Registration
*/
global $current_user;
wp_get_current_user();
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$company = $_POST['company'];
if (($firstname != '') && ($lastname != '') && ($company != '')) {
// TODO: Do more rigorous validation on the submitted data
// TODO: Generate a better login (or ask the user for it)
$login = $firstname . $lastname;
// TODO: Generate a better password (or ask the user for it)
$password = '123';
// TODO: Ask the user for an e-mail address
$email = 'test#example.com';
// Create the WordPress User object with the basic required information
$user_id = wp_create_user($login, $password, $email);
if (!$user_id || is_wp_error($user_id)) {
// TODO: Display an error message and don't proceed.
}
$userinfo = array(
'ID' => $user_id,
'first_name' => $firstname,
'last_name' => $lastname,
);
// Update the WordPress User object with first and last name.
wp_update_user($userinfo);
// Add the company as user metadata
update_usermeta($user_id, 'company', $company);
}
if (is_user_logged_in()) : ?>
<p>You're already logged in and have no need to create a user profile.</p>
<?php else : while (have_posts()) : the_post(); ?>
<div id="page-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="content">
<?php the_content() ?>
</div>
<form action="<?php echo $_SERVER['REQUEST_URI'] ?>" method="post">
<div class="firstname">
<label for="firstname">First name:</label>
<input name="firstname"
id="firstname"
value="<?php echo esc_attr($firstname) ?>">
</div>
<div class="lastname">
<label for="lastname">Last name:</label>
<input name="lastname"
id="lastname"
value="<?php echo esc_attr($lastname) ?>">
</div>
<div class="company">
<label for="company">Company:</label>
<input name="company"
id="company"
value="<?php echo esc_attr($company) ?>">
</div>
</form>
</div>
<?php endwhile; endif; ?>
Now, when you want to retrieve the stuff you've stored, you need to know whether the information is within the User object itself or in metadata. To retrieve the first and last name (of a logged-in user):
global $current_user;
$firstname = $current_user->first_name;
$lastname = $current_user->last_name;
To retrieve the company name (of a logged-in user):
global $current_user;
$company = get_usermeta($current_user->id, 'company');
That's the basic gist of it. There's still a lot of stuff missing here, like validation, error message output, the handling of errors occurring within the WordPress API, etc. There's also some important TODO's that you have to take care of before the code will even work. The code should probably also be split into several files, but I hope this is enough to get you started.
An advantage of using a custom registration form is that modifying the code according to the user's needs becomes easy. For a custom submit form you can make use of existing hooks in Wordpress like template_redirect and then map that hook to some function which will do the post-processing of the form, like validation and submitting data to the site's database. You can refer to an in-depth article here.
<div class="employee">
<input type="hidden" name="show_msg">
<form name="customer_details" method="POST" required="required" class="input-hidden">
Your Name: <input type="text" id="name" name="customer_name">
Your Email: <input type="text" id="email" name="customer_email">
Company: <input type="text" id="company" name="company">
Sex: <input type="radio" name="customer_sex" value="male">Male <input type="radio" name="customer_sex" value="female">Female
<textarea id="post" name="experience" placeholder="Write something.." style="height:400px;width:100%"></textarea>
<input type="submit" value="Submit">
<!--?php wp_nonce_field( 'wpshout-frontend-post','form-submit' ); ?-->
</form></div>
PHP function
function wpshout_frontend_post() {
wpshout_save_post_if_submitted();
}
add_action('template_redirect','wpshout_frontend_post', 2);
A custom WordPress registration form has two major advantages over the standard form.
The first is the integration with the overall look and feel of the website theme. Standard forms often don’t work well with custom themes and there is always a chance that the custom CSS files do not render well with the form. A custom form, on the other hand, can be easily set up to work with custom CSS.
The second and more popular reason of using a custom registration form is the option of custom fields that are not included on the standard form. A small custom registration form speeds up the process and collects all the necessary data from a neat interface.
function wordpress_custom_registration_form( $first_name, $last_name, $username, $password, $email) {
global $username, $password, $email, $first_name, $last_name;
echo '
<form action="' . $_SERVER['REQUEST_URI'] . '" method="post">
First Name :
<input type="text" name="fname" value="' . ( isset( $_POST['fname']) ? $first_name : null ) . '">
Last Name:
<input type="text" name="lname" value="' . ( isset( $_POST['lname']) ? $last_name : null ) . '">
Username <strong>*</strong>
<input type="text" name="username" value="' . ( isset( $_POST['username'] ) ? $username : null ) . '">
Password <strong>*</strong>
<input type="password" name="password" value="' . ( isset( $_POST['password'] ) ? $password : null ) . '">
Email: <strong>*</strong>
<input type="text" name="email" value="' . ( isset( $_POST['email']) ? $email : null ) . '">
<input type="submit" name="submit" value="Register"/>
</form>
';
}
This form can be inserted anywhere by using the shortcode [wp_registration_form]. Here is the code snippet for setting up the shortcode:
function wp_custom_shortcode_registration() {
ob_start();
wordpress_custom_registration_form_function();
return ob_get_clean();
}
I hope that by now you have a fair idea of creating a WordPress custom Registration form.Still any confusion kindly check Build Custom WordPress Registration Forms