Good day I want to use this json data to use the autocomplete of semantic ui. any Idea please. below is my code I saw in different sites.
record.json
{
records: [
{
idno: "PH00019404-1",
firstname: "CHERRY MAE"
},
{
idno: "PH00008381-2",
firstname: "LUZMIN"
}
]
}
My Html
<div class="ui search focus">
<div class="ui search icon input">
<input class="ui search" type="text" placeholder="Colors..." autocomplete="off">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
My Javascript
<script type="text/javascript">
$(document).ready(function () {
$('.ui.search').search({
apiSettings: {
url: 'www.mysite.com/record.json',
minCharacters : 3,
onResponse: function(results) {
var response = {
results : []
};
$.each(results, function(index, item) {
response.results.push({
title : item.idno,
description : item.firstname
//url : item.html_url
});
});
return response;
},
},
});
});
</script>
I got the answer to this link. https://semantic-ui.com/modules/search.html#/examples
<script>
$('.ui.search')
.search({
apiSettings: {
url: 'http://localhost/views/api/members?q={query}'
},
fields: {
results : 'records',
description : 'name',
title : 'idno'
},
minCharacters : 3
})
;
</script>
Related
i am trying to submit a form with laravel and vuejs in a component like below :
<form action="#" #submit.prevent="submitMobile">
<div class="container my-5 z-depth-1">
<!-- Form -->
<form class="" action="">
<!-- Section heading -->
<div class="input-group">
<input class="form-control send-sms-btn" name="mobile"
v-validate="'required:11'" placeholder="_ _ _ _ _ _ _ _"
aria-label="Enter your email address"
aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn-theme btn btn-md btn-primary rounded-right m-0 px-3 py-2 z-depth-0 waves-effect"
type="submit" id="button-addon2">submit
</button>
</div>
</div>
</form>
</form>
and here is my vuejs :
export default {
props: [
],
data: function () {
return {
}
},
methods: {
sendContactFormServer() {
axios({
method: 'POST',
url: '/customer/send-sms',
data: {
"mobile": this.form.mobile,
},
headers: {
'Content-Type': 'appllication/json',
'Accept': 'application/json',
}
})
.then(window.location.href = "/")
.catch(error => console.log(error))
},
submitMobile: function() {
this.$http.post('/customer/send-sms', this.formData).then(function(response) {
console.log(response);
}, function() {
console.log('failed');
});
}
}
}
i tried 2 functions but both of them returns me to the same page with the query string of the input i have send . now i want to know how can i submit this form without refreshing the page . thanks in advance
try this.$router.push()
https://router.vuejs.org/guide/essentials/named-routes.html
submitMobile: function() {
this.$http.post('/customer/send-sms', this.formData).then(function(response) {
this.$router.push({
name: "route_name", // tis route name you need to add
query: { mobile: this.mobile },
});
}, function() {
console.log('failed');
});
}
I have autocomplete jQuery script working for pulling suggestions from MySQL database when typing in form fields on the page (3 input fields).
That is working fine, but what I would like is to when I select suggested option in the first field - all 3 fields should be filled.
Fields that I have right now is first name, last name, and company. When I select the first name - last name and company should be automatically filled with data.
Here's php:
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function()
{
$( "#first_name" ).autocomplete({
source: 'autocomplete.php'
});
});
$(function()
{
$( "#last_name" ).autocomplete({
source: 'autocomplete.php'
});
});
$(function()
{
$( "#company" ).autocomplete({
source: 'autocomplete.php'
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="ui-widget">
<p>First name</p>
<input type="text" id="first_name">
</div>
<div class="ui-widget">
<p>Last name</p>
<input type="text" id="last_name">
</div>
<div class="ui-widget">
<p>Company</p>
<input type="text" id="company">
</div>
</div>
</body>
</html>
And here's the autocomplete.php file:
<?php
$host="localhost";
$username="user";
$password="password";
$databasename="dbname";
$connect=mysql_connect($host,$username,$password);
$db=mysql_select_db($databasename);
$searchTerm = $_GET['term'];
$select =mysql_query("SELECT * FROM jemployee WHERE first_name LIKE '%".$searchTerm."%'");
while ($row=mysql_fetch_array($select))
{
$spojeno = $row['first_name'] . ' ' . $row['last_name'] . ' ' . $row['kompanija'];
$data[] = $spojeno;
}
//return json data
echo json_encode($data);
?>
So, when the suggested option from "first_name" is selected - "last_name" and "company" should be filled with corresponding data from a database. Any suggestions?
Use something Jquery likes:
$(document).on('keyup', '#firstname', funtion(){
$.ajax({
type:"POST",
url:"ajax.php",
data:$("#firstname").val();
},
success:function (res){
$("#lastname").val(res.lastname);
$("#company").val(res.company);
},
)};
});
And PHP ajax.php file:
<?php
\\Select lastname, company with $_POST['data']
echo json_endcode($result);
Should check and handle the ajax response. If you can you this solution, please make it better.
What I did is passing the ajax "item" result as the autocomplete "value" :
It looks like this :
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Id, //the data that will be shown in the list !
value: item //item holds "Id" and "Name" properties
};
}))
}
I then subscribe the autoComplete "select" event to prevent it's default behaviour.
I then fill the different fields I need to :
select: function(event, ui){
//Update Customer Name Field on Id selection
event.preventDefault()
$("#CustomerId").val(ui.item.value.Id);
$("#CustomerName").val(ui.item.value.Name);
},
here's the entire autocomplete call, in case it helps ;)
$("#CustomerId").autocomplete({
source: function (request, response) {
$.ajax({
url: "/.../../GetAvailablePartnerInformations",
type: "POST",
dataType: "json",
data: { prefix: request.term },
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Id,
value: item
};
}))
}
})
},
change: function (event, ui) {
//Forces input to source values, otherwise, clears
//NOTE : user could still submit right after typing => check server side
if (!ui.item) {
//http://api.jqueryui.com/autocomplete/#event-change -
// The item selected from the menu, if any. Otherwise the property is null
//so clear the item for force selection
$(event.target).val("");
$(event.target).addClass("is-invalid");
}
else {
$(event.target).removeClass("is-invalid");
}
},
select: function(event, ui){
//Update Customer Name Field on Id selection
event.preventDefault()
//Note : the "value" object is created dynamically in the autocomplete' source Ajax' success function (see above)
debugger;
$("#CustomerId").val(ui.item.value.Id);
$("#CustomerName").val(ui.item.value.Name);
},
messages: {
noResults: "",
results: function (resultsCount) { }
},
autoFocus: true,
minLength: 0
})
I am following this Invisible ReCaptcha doc on my php website: http://www.pinnacleinternet.com/installing-invisible-recaptcha/ everything works well. but while implement on multiple forms in a same page then Captcha only work on first form and not sure what’s happening with the second form, I curious to know how its work with multiple forms in a single page.
Or anyone please suggest a working doc for multiple forms?
//this is #Geordy's javascript portion modified according to jquery.validate
<script type="text/javascript">
$().ready(function() {
var demo1Call = 0;
var demo2Call = 0;
// validate and submit 1st form
$("#demo-form1").validate({
rules: {
pass: {
required: true,
pwcheck: true,
minlength: 5
},
},
messages: {
pass: {
required: "Please provide a password",
pwcheck: "<br />*Minimum length 8<br />*Maximum length 24<br />*Atleast a digit<br />*Atleast an upper case<br />*Atleast a lowercase<br />*Atleast a special character from these !##$%",
minlength: "Your password must be at least 5 characters long"
},
},
success: function(error){
console.log("Successfully validated");
},
submitHandler: function(form) {
demo1Call++;
if(demo1Call==1){
widgetId1 = grecaptcha.render('recaptcha1', {
'sitekey' : '<?php echo $config['client-key']; ?>',
'callback' : onSubmit1,
'size' : "invisible"
});
}
grecaptcha.reset(widgetId1);
grecaptcha.execute(widgetId1);
},
});
//validate and submit 2nd form
$("#demo-form2").validate({
rules: {
pass: {
required: true,
pwcheck: true,
minlength: 5
},
},
messages: {
pass: {
required: "Please provide a password",
pwcheck: "<br />*Minimum length 8<br />*Maximum length 24<br />*Atleast a digit<br />*Atleast an upper case<br />*Atleast a lowercase<br />*Atleast a special character from these !##$%",
minlength: "Your password must be at least 5 characters long"
},
},
success: function(error){
console.log("Successfully validated");
},
submitHandler: function(form) {
demo2Call++;
if(demo2Call==1){
widgetId2 = grecaptcha.render('recaptcha2', {
'sitekey' : '<?php echo $config['client-key']; ?>',
'callback' : onSubmit2,
'size' : "invisible"
});
}
grecaptcha.reset(widgetId2);
grecaptcha.execute(widgetId2);
},
});
});
$.validator.addMethod("pwcheck", function(value) {
var pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!##$%])[0-9A-Za-z!##$%]{8,24}$/;
return pattern.test(value);
});
function onSubmit1(token){
document.getElementById("demo-form1").submit();
};
function onSubmit2(token){
document.getElementById("demo-form2").submit();
};
</script>
The below code work for me
<?php
$config = require('config.php');
?>
<html>
<head>
<title>reCAPTCHA demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Boostrap Validator -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
var demo1Call = 0;
var demo2Call = 0;
$('#demo-form1').validator().on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
console.log("validation failed");
} else {
// everything looks good!
demo1Call++;
e.preventDefault();
console.log("validation success");
if(demo1Call==1)
{
widgetId1 = grecaptcha.render('recaptcha1', {
'sitekey' : '<?php echo $config['client-key']; ?>',
'callback' : onSubmit1,
'size' : "invisible"
});
}
grecaptcha.reset(widgetId1);
grecaptcha.execute(widgetId1);
}
});
$('#demo-form2').validator().on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
console.log("validation failed");
} else {
// everything looks good!
demo2Call++;
e.preventDefault();
console.log("validation success");
if(demo2Call==1)
{
widgetId2 = grecaptcha.render('recaptcha2', {
'sitekey' : '<?php echo $config['client-key']; ?>',
'callback' : onSubmit2,
'size' : "invisible"
});
}
grecaptcha.reset(widgetId2);
grecaptcha.execute(widgetId2);
}
});
});
function onSubmit1(token){
document.getElementById("demo-form1").submit();
};
function onSubmit2(token){
document.getElementById("demo-form2").submit();
};
</script>
</head>
<body>
<div class="container">
<br>
<div class="row">
<div class="col-md-5 col-md-offset-3">
<form id="demo-form1" data-toggle="validator" role="form" action="admin.php" method="POST" >
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Geordy James" required/>
</div>
<div id='recaptcha1' ></div>
<button class="btn btn-block btn-primary" type="submit">Submit</button>
</form>
</div>
</div>
<br>
<div class="row">
<div class="col-md-5 col-md-offset-3">
<form id="demo-form2" data-toggle="validator" role="form" action="admin2.php" method="POST" >
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Geordy James" required/>
</div>
<div id='recaptcha2' ></div>
<button class="btn btn-block btn-primary" type="submit">Submit</button>
</form>
</div>
</div>
</div>
<script src="https://www.google.com/recaptcha/api.js" async defer ></script>
</body>
</html>
I used Unofficial Google Invisible reCAPTCHA PHP library in this program and you can download it from https://github.com/geordyjames/google-Invisible-reCAPTCHA . If this method doesn't work for you please comment below.
Attempted to post this on the Foundation forum, but for some reason it would not post.
The first code snippet below shows the working code for my form using data-abide="ajax", and the .on('valid.fndtn.abide',function(){});. The elements are disabled etc. and the modal opens. When the modal is closed I remain on the page as desired.
I am attempting to now have this use AJAX, where the request will be to a php script handling the data insert, and the element manipulation and modal will happen on success.
The second code snippet shows that attempt, which is not working. When I run this code, the alert fires, but then the page submits, with nothing written to the console, no modal, and the page refreshing. What am I doing wrong?
I have also included partial code (third snippet), for the form and modal.
If anyone has a working example using Foundation, data-abide="ajax" and reveal-modal, where the form is submitted, an AJAX call is made to a PHP script to insert data into the DB, and on success the modal window opens, please provide a sample.
SNIPPET 1 - works
<script type="text/javascript">
$(document).ready(function () {
$("#pledge_btn").attr("disabled", true);
$(document).foundation({
abide: {
validate_on: 'manual',
patterns: {
edu_address: /\.edu$/
}
}
});
$('a.custom-close-reveal-modal').click(function(){
$('#emailModal').foundation('reveal', 'close');
});
$('#pledge_form')
.on('invalid.fndtn.abide', function() {
$("#pledge_btn").attr("disabled", true);
$("#terms").prop("checked",false);
console.log('Not Submitted');
})
.on('valid.fndtn.abide', function() {
$("#pledge_form :input").prop('readonly', true);
$("#pledge_btn").attr("disabled", true);
$("#terms").attr("disabled", true);
$("#sweeps").attr("disabled", true);
console.log('Submitted: ', data);
$('#myModal').foundation('reveal', 'open');
});
});
SNIPPET 2 - Does NOT work
<script type="text/javascript">
$(document).ready(function () {
$("#pledge_btn").attr("disabled", true);
$(document).foundation({
abide: {
validate_on: 'manual',
patterns: {
edu_address: /\.edu$/
}
}
});
$('a.custom-close-reveal-modal').click(function(){
$('#emailModal').foundation('reveal', 'close');
});
$('#pledge_form')
.on('invalid.fndtn.abide', function() {
$("#pledge_btn").attr("disabled", true);
$("#terms").prop("checked",false);
alert("Form NOT submitted");
})
.on('valid.fndtn.abide', function() {
var lname = $("#lName").val();
var dataString = 'lname=' + lname;
alert("Form submitted");
$.ajax({
url : create_pledge.php,
type : $(this).attr('method'),
data : dataString,
success : function( data ) {
$("#pledge_form :input").prop('readonly', true);
$("#pledge_btn").attr("disabled", true);
$("#terms").attr("disabled", true);
$("#sweeps").attr("disabled", true);
console.log('Submitted: ', data);
$('#myModal').foundation('reveal', 'open');
},
error : function( data, xhr, err ) {
console.log('Oops: ', data, xhr , err);
}
});
return false;
});
});
</script>
PARTIAL FORM and MODAL Code
<div class="row pledge-row">
<form data-abide="ajax" id="pledge_form" method="post" name="pledge_form">
<div class="row">
<div class="large-6 medium-12 columns">
<label class="pledge-label">First Name*</label>
<input id="fName" type="text" required pattern="[a-zA-Z]+"/>
<small class="error">First Name is required</small>
</div>
</div>
<div class="row">
<div class="large-6 medium-12 columns">
<label class="pledge-label">Last Name*</label>
<input id="lName" type="text" required pattern="[a-zA-Z]+"/>
<small class="error">Last Name is required</small>
</div>
</div>
<div class="row">
<div class="large-6 medium-12 columns">
<label class="pledge-label">Email*</label>
<input id="email" type="email" required style="margin:0 0 5px 0 !important;"/>
<small class="error">.edu email address is required</small>
<span id="email-result"></span>
<div class="valid-email">(must be a properly formatted .edu email)</div>
</div>
</div>
<!-- CODE REMOVED FOR THIS POST -->
</form>
</div>
<!-- Modal -->
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Thanks for pledging.</h2>
<p>please check your email for our confirmation/validation email.</p>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
Found the answer. I needed to have the ajax request in the submit, not the valid event.
So this works:
$('#pledge_form')
.on('invalid.fndtn.abide', function() {
$("#pledge_btn").attr("disabled", true);
$("#terms").prop("checked",false);
// alert("Form NOT submitted");
})
.on('valid.fndtn.abide', function() {
// alert("Form submitted");
console.log('VALID');
})
.on('submit', function(e) {
var ajaxObj = $.ajax({
url : 'create_pledge.php',
type : $(this).attr('method'),
data : $(this).serialize(),
success : function( ) {
$("#pledge_form :input").prop('readonly', true);
$("#pledge_btn").attr("disabled", true);
$("#terms").attr("disabled", true);
$("#sweeps").attr("disabled", true);
console.log('Submitted');
$('#myModal').foundation('reveal', 'open');
},
error : function( xhr, err ) {
console.log('Oops: ', xhr , err);
},
complete: function(){
console.log('COMPLETE');
}
});
});
});
I had the same problem too with fancybox and ajax check before submit.
This is my solution that works for sure
<form id="my_form" action="...." method="POST" class="popup" data-abide="ajax">
<input type="text" name="check_this_field_with_ajax" id="check_this_field_with_ajax">
....
</form>
<script type="text/javascript" src="..../js/foundation.min.js"></script>
<script type="text/javascript" src="..../js/foundation/foundation.abide.js"></script>
<script type="text/javascript">
$('#my_form')
.on('invalid.fndtn.abide', function() {
console.log('NOT Submitted');
})
.on('valid.fndtn.abide', function() {
console.log('VALID');
})
.on('submit', function(e) {
var ajaxRequest = $.ajax({
type: 'GET',
url: "....",
data: {xxx: yyy},
cache: false,
dataType: 'json',
});
....
ajaxRequest.done(function() {
if (ok) {
$('#check_this_field_with_ajax').parent().removeClass('error');
$('#my_form').attr({'submit_this_form': 'yes'});
$(document).foundation('abide', 'reflow');
$('#my_form').trigger('submit.fndtn.abide');
}
});
}
</script>
Now go to in foundation.abide.js, search line "validate : function (els, e, is_ajax) {" and add:
if (
is_ajax &&
form.attr('submit_this_form') === 'yes'
) {
return true;
}
before
if (is_ajax) {
return false;
}
I have a form that seems to POST successfully after submitting via AJAX. Under "NET" in Firebug the posted info displays properly. But I cannot echo this data at all.
I'm trying this, which is the 1st field in my form: <?php echo $_POST['sun_exposure']; ?>
Does this have anything to do with the form's ACTION not having a url?
Also, I'm trying to POST data to the same page, and not a PHP file. Maybe this is part of the problem? This is also a Wordpress page, and not a file.
Here's the live url: http://www.richmindonline.com/container-creations/personal-creations-assistant/
Here's the form code:
<form id="quotation_form" name="vdmQuotationForm" action="#" method="post">
<div id="page1">
<div id="step0_header" class="steps-headers" onClick="step0ToggleClick();">Step 1<span style="margin-left:30px;">Sun Exposure</span></div>
<div id="step0" class="quotation-steps"><strong>Describe the sun exposure of your planter...</strong><br/>
<div class="radio-container"><input onchange="go_to_next_step();" type="radio" name="sun_exposure[]" id="full_sun" value="Full Sun"<?php checked( 'Full Sun',$_POST['sun_exposure[]']); ?> /><label class="label-quotation-steps">Full Sun</label><br class="clear"/></div>
<div class="radio-container"><input onchange="go_to_next_step();" type="radio" name="sun_exposure[]" id="part_sun" value="Part Sun"<?php checked( 'Part Sun',$_POST['sun_exposure[]']); ?> /><label class="label-quotation-steps">Part Sun</label><br class="clear"/></div>
<div class="radio-container"><input onchange="go_to_next_step();" type="radio" name="sun_exposure[]" id="full_shade" value="Full Shade"<?php checked( 'Full Shade',$_POST['sun_exposure[]']); ?> /><label class="label-quotation-steps">Full Shade</label><br class="clear"/></div>
</div>
</div>
</div>
</form>
Here's the AJAX request, which is wrapped up in the jQuery validate script:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#quotation_form').validate({ // initialize the plugin
rules: {
'sun_exposure[]': {
required: true,
},
'height[]': {
required:true,
},
'diameter[]': {
required:true,
},
'shape[]': {
required:true,
},
'placement[]': {
required:true,
},
},
messages: {
'sun_exposure[]': {
required: 'Please choose a sun exposure for your plant',
},
'height[]': {
required: 'Please choose the height of your planter'
},
'diameter[]': {
required: 'Please choose the diamter of your planter'
},
'shape[]': {
required: 'Please choose the shape of your planter'
},
'placement[]': {
required: 'Please choose the placement of your planter'
},
},
errorPlacement: function (error, element) {
alert(error.text());
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
var form_data = $("#quotation_form").serialize();
$.ajax({
url: "http://www.richmindonline.com/container-creations/personal-creations-assistant/",
type: 'POST',
data: form_data,
cache: true,
success: function(data) {
alert(data);
}
});
$('#page1').hide();
$('html, body').animate({ scrollTop: $('body').offset().top }, 10);
$('#page2').show();
$('.intro').hide();
$('.to_page1').show();
return false;
}
}); // end .validate()
});
</script>