Develop Reference

Receive and send form data

Greetings to the experts on WEB development, I myself am a beginner in this field, I am doing a training project, so the question arose. There is a form:
...
<form name="date">
<p>
<label for="date">Choose date</label>
<input type="date" name="calendar" id="calendar" onchange="handlerDate(event)">
</p>
</form>
...
Which I then process in this way:
function handlerDate(e) {
e.preventDefault();
let dateForm = document.forms["date"];
let dateChosen = dateForm.elements["calendar"].value;
let dateNow = new Date();
dateChosen = new Date(dateChosen);
if ($('#uncorrectDate').length)
$('#uncorrectDate').remove();
if ((dateChosen.getFullYear() !== dateNow.getFullYear() || dateChosen.getMonth() !== dateNow.getMonth()) ||
((dateChosen.getFullYear() === dateNow.getFullYear() || dateChosen.getMonth() === dateNow.getMonth()) &&
(dateChosen.getDate() < dateNow.getDate()))
) {
$('<p id="uncorrectDate">Incorrect date</p>').appendTo('.mainbody');
$("#userInfo").remove();
} else {
if($('#userInfo').length)
$('#userInfo').remove();
var timesGet = GetOrders(dateChosen.toLocaleDateString());
times = timesGet.booked;
let selectTimes = '</p><p><label>Choose time: </label><select name="text">';
for (let k = 0; k < times.length; k++) {
let time = `${times[k]}:00`;
selectTimes += '\n<option value="' + time + '">' + time + '</option>';
}
selectTimes += "</select><\p>";
$('<form id="userInfo">' +
'<p> ' +
'<label for="email">Email:</label>' +
'<input type="email" placeholder="user#gmail.com" name="email"/></p>' +
'<p>' +
'<label for="phone">Телефон: </label>' +
'<input type="tel" placeholder="(XXX)-XXX-XXXX" name="phone"/>' +
'</p>' +
'<p>' +
selectTimes +
'</p>' +
'<p>' +
'<button type="submit">Send</button>' +
'</p>' + '</form>'
).appendTo('.mainbody');
}
}
function GetOrders(date) {
var result = "";
$.ajax({
url: "/api/records/" + date,
type: "GET",
async: false,
contentType: "application/json",
success: function (record) {
result = record;
}
});
return result;
}
function CreateOrder(userName, userMail, userPhone, userDate, userTime) {
$.ajax({
url: "api/users",
contentType: "application/json",
method: "POST",
data: JSON.stringify({
name: userName,
email: userAge,
phone: userPhone,
date: userDate,
time: userTime
}),
success: function (user) {
$(".mainbody").append('<p>Заказ был сделан!</p>');
}
})
}
The logic that was unnecessary for understanding the issue is removed. First question: is it normal practice to dynamically change the page in this way through jQuery? Since I am doing that purely for practical purposes: to make a task, I’m not entirely guided by how it is customary to do, how it is not customary. The second and main question: how can I now receive and correctly send data from the form? Is there an example syntax in this case (without php). There is an onsubmit attribute in the form, you can specify the function handler there, but is there an example of how this is done? And is it necessary in this case to put an additional handler function onclick on the submit button? I need to get data from the form, validate it, and call the CreateOrder method with this data. On the server, all this will be processed correctly, I configured it, but did not find normal examples of how to write correctly onsubmit or onclick, into which I need to pass 1 parameter: the date received earlier.

How to use form data in codepen

I'm working on the wikipedia viewer for free code camp and I'm trying to make the search bar work.
Ideally I would just like to have the user type in some text, then have that become a string in my code when the user hits submit. This is the html for the search bar so far
<form method="get">
<input type="text" placeholder="Search articles" class="srchbox" name="Search" id="searchbar">
<button type="submit" class="btn">Search</button>
</form>
and the api setup I have to make the search
var apiURL = "https://en.wikipedia.org/w/api.php?format=json&action=opensearch&generator=search&search=" + textInput;
$(document).ready(function() {
$.ajax({
url: apiURL,
dataType: "jsonp",
success: function(data) {
var wikiAPI = JSON.stringify(data, null, 3);
console.log(wikiAPI);
var wikiHTML = "";
for (i=0; i < data[1].length; i++)
{
wikiHTML += ("<a href =\"" + data[3][i] + "\" target=\"_blank\">")
wikiHTML += "<div class = \"wikicontent container-fluid\" style = \"color:black;\">";
wikiHTML += ("<h2>" + data[1][i] + "</h2>");
wikiHTML += ("<h3>" + data[2][i] + "</h3>");
wikiHTML += "</div></a>"
}
$("#articles").html(wikiHTML);
I'm a bit lost on how to pull this off so any help would be great. Thank you!

You can use submit event, set query to #searchbar .value
$("form").on("submit", function(e) {
e.preventDefault();
if (this.searchbar.value.length) {
var url = "https://en.wikipedia.org/w/api.php?format=json"
+ "&action=opensearch&generator=search&search="
+ this.searchbar.value;
$.ajax({url:url, /* settings */});
}
});

Ajax call jsonp from PHP

Hi guys so i made a code that parses a CSV file into a JSON ARRAY with PHP. So when you go to this URL you get the PHP output:
http://www.jonar.com/portal/mynewpage.php
Now i used this code to append my JSON ARRAY to HTML but now things have changed since i am using PHP i am not sure how to use it and what to do differently.
Also my ajax call is always empty which is weird..
$.ajax({
type: 'GET',
url: 'http://www.jonar.com/portal/mynewpage.php',
dataType: 'jsonp',
success: function(response) {
alert(response);
}
});
I used this to append my JSON ARRAY but now if i can get the response do i use the same code or will it have to be altered?
$.each(results.data.slice(1), // skip first row of CSV headings
function(find, data) {
var title = data.title;
var link = data.link;
var date = data.date;
var type = data.type;
var where = data.where;
var priority = data.priority;
if (priority == '1') {
$('ul.nflist').prepend($('<li>', {
html: '' + title + ' ' + ' ' + '<span class="category">' + type + '</span>'
}));
} else if (where == 'pp', 'both') {
$('ul.nflist').append($('<li>', {
html: '' + title + ' ' + ' ' + '<span class="category">' + type + '</span>'
}));
}
});
the reason i used PHP is to avoid cross domain issue
Thanks for the help guys!

Reference error on javascript using json data from dbpedia server

Hi all and thanks in advance for the help:
i got this error:
Uncaught SyntaxError: Unexpected identifier
for line 65 (the line with the "Var query"... here the third line)
and when i click on the Execute button this is the other error:
Uncaught ReferenceError: retrieveData is not defined
(retrieveData is the function i call with the click)
i have used an existing code modifyng it for my purpose.
the very strange things are:
1: the original code run without errors (and it seems to me quite the same)
2: if i paste the url and the query and &output=json on the browser, it works fine... so i think it's not an error about mispelling...
this is the code I wrote:
<script type="text/javascript">
function retrieveData() {
var query = "SELECT ?museum WHERE {?museum a <http://dbpedia.org/ontology/Museum>.?museum <http://dbpedia.org/ontology/address> ?address. FILTER contains(?address, "Firenze")}";
var url = 'http://it.dbpedia.org/sparql?default-graph-uri=&query=' + encodeURIComponent(query) + '&output=json';
$.ajax({
url: url,
dataType: "json",
success: function (data) {
$('#results').show();
$('#raw_output').text(JSON.stringify(data, null, 3));
handle_json(data);
},
error: function(e) {}
});
}
function handle_json(json) {
$('#output_div').text("");
$.each(
json['results']['bindings'], function(index, value) {
var html = "";
name = value['museum']['value'].replace("http://it.dbpedia.org/resource/", "");
name = decodeURIComponent(name.replace(/_/g, " "));
html += "<div><h3><b>" + name + ":</b> () </h3></div>";
$('#output_div').append(html);
}
);
}
</script>
and this is the original code:
<script type="text/javascript">
function retrieveData() {
var query = "PREFIX : <http://dbpedia.org/resource/> PREFIX dbp: <http://dbpedia.org/ontology/> PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> PREFIX dbpprop: <http://dbpedia.org/property/> SELECT ?person ?b_date ?d_date ?abstract ?thumbnail WHERE { ?person rdf:type dbp:Person ; dbp:birthDate ?b_date ; dbp:deathDate ?d_date ; dbp:abstract ?abstract . OPTIONAL { ?person dbp:thumbnail ?thumbnail } FILTER ( ?b_date >= '1488-01-01'^^xsd:date && ?b_date < '1600-01-01'^^xsd:date && ?d_date < '1650-01-01'^^xsd:date ) FILTER ( langMatches(lang(?abstract), 'EN')) } ORDER BY ?person ?b_date";
var url = 'http://dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fdbpedia.org&query=' + encodeURIComponent(query) + '&output=json';
$.ajax({
url: url,
dataType: "json",
success: function (data) {
$('#results').show();
$('#raw_output').text(JSON.stringify(data, null, 3));
handle_json(data);
},
error: function(e) {}
});
}
function handle_json(json) {
$('#output_div').text("");
$.each(
json['results']['bindings'], function(index, value) {
var html = "";
name = value['person']['value'].replace("http://dbpedia.org/resource/", "");
name = decodeURIComponent(name.replace(/_/g, " "));
html += "<div><h3><b>" + name + ":</b> (" + value['b_date']['value'] + " - " + value['d_date']['value'] + ")</h3></div>";
if (value['thumbnail'] != null)
html += "<div class='inline thumb'><img style='width: 200px' src='" + value['thumbnail']['value'].replace("200px", "150px") + "'/></div>";
else
html += "<div class='inline thumb'><img src=''/></div>";
html += "<div class='inline abstract'>" + value['abstract']['value'] + "</div><div class='clear'></div><br>";
$('#output_div').append(html);
}
);
}
</script>
Thanks again
--UPDATE--
Obviously i 'm made a mess with quotation mark. Thanks dodl. Now it works.
A LITTLE NOTE if anyone tries to run this script:
It will come "XMLHttpRequest same domain policy error"...
Just add the '&callback=?' in the url, using the built-in support for JSONP in JQUERY.

You're not escaping your quotation marks properly, ie:
var query = "SELECT ?museum WHERE {?museum a <http://dbpedia.org/ontology/Museum>.?museum <http://dbpedia.org/ontology/address> ?address. FILTER contains(?address, "Firenze")}";
should be
var query = "SELECT ?museum WHERE {?museum a <http://dbpedia.org/ontology/Museum>.?museum <http://dbpedia.org/ontology/address> ?address. FILTER contains(?address, \"Firenze\")}";
(Or alternatively, in javascript you can use single and double quotes to differentiate quotes within strings from string definition quotes.)

Array and while loop: make unique clickable

I have an array (via ajax) that looks like this:
data[i].id: gives the id of user i
data[i].name: gives the name of user i
I want to output the array like this:
X Leonardo Da Vinci
X Albert Einstein
X William Shakespeare
...
The X is an image (x.gif) that must be clickable. On click, it must go to functiontwo(), passing the parameter data[i].id. Functiontwo will open a jquery dialog with the question "Delete id data[i].id"?
I know this can't be too hard to do, but I can't seem to figure it out...
This is what I have so far:
function functionone() {
$.ajax({
type : 'POST',
url : 'post.php',
dataType : 'json',
success : function(data){
var message = "";
var i = 0;
while (i < (data.length - 1))
{
var myvar = data[i].id;
message = message + "<div class=" + data[i].id + "><img src=x.gif></div>" + data[i].name + "<br />";
$('#somediv').html(message).fadeIn('fast');
$("." + data[i].id + "").click(function () {
functiontwo(myvar);
});
i++;
}
}
});
}
function functiontwo(id) {
...}
I know why this isn't working. Var i gets populated again and again in the while loop. When the while loop stops, i is just a number (in this case the array length), and the jquery becomes (for example):
$("." + data[4].id + "").click(function () {
functiontwo(myvar);
});
, making only the last X clickable.
How can I fix this?
Thanks a lot!!!
EDIT:
This is my 2nd function:
function functiontwo(id) {
$("#dialogdelete").dialog("open");
$('#submitbutton').click(function () {
$('#submitbutton').hide();
$('.loading').show();
$.ajax({
type : 'POST',
url : 'delete.php',
dataType : 'json',
data: {
id : id
},
success : function(data){
var mess = data;
$('.loading').hide();
$('#message').html(mess).fadeIn('fast');
}
});
//cancel the submit button default behaviours
return false;
});
}
In delete.php there's nothing special, I used $_POST['id'].

As I pointed out in my comment. The problem is the .click part. Either use bind, or use a class for all the elements, and a click-event like this $('.classnamehere').live('click',function () { // stuff });

function functionone() {
$.ajax({
type : 'POST',
url : 'post.php',
dataType : 'json',
success : function(data){
var message = "";
var i = 0;
while (i < (data.length - 1))
{
var myvar = data[i].id;
message = message + "<div class=\"clickable\" id=" + data[i].id + "><img src=x.gif></div>" + data[i].name + "<br />";
$('#somediv').html(message).fadeIn('fast');
i++;
}
}
});
}
$('.clickable').live('click',function () {
alert($(this).attr('id') + ' this is your ID');
});

The usual trick is create a separate function to create the event handler. The separate function will receive i as a parameter and the generated event will be able to keep this variable for itself
make_event_handler(name){
return function(){
functiontwo(name);
};
}
...
$("." + data[i].id + "").click( make_event_handler(myvar) );