We Keep Coding

pass js variable to external php page

i have a file main.js where every step pass selected variable to php page, i need pass some variable to another one php page.
this is piece of code of main.js, i tryed to get 'optionsContent' variable and put in a index.php page in a 'div id="rip" with 'document.getElementById("rip").innerHTML = optionsContent;' but tryed to pass this variable with 'href' in new.php page and not work
if( selectedOptions.length == 0 ) {
optionsContent = '<li><p style="color:#FF0000">Nessuna Riparazione Selezionata</p></li>';
} else {
selectedOptions.each(function(){
optionsContent +='<li><p>RIPARAZIONE '+$(this).find('.searchText1').text()+'</p>'+' - '+'<p style="color:#0012ff">' +$(this).find('.price').text()+'</p></li>';
//optionsContent +='<li><p>'+$(this).find('p').text()+'</p></li>';
//document.getElementById("new").innerHTML = optionsContent;
document.getElementById("rip").innerHTML = optionsContent;
});
}
self.summary.find('.summary-accessories').children('li').remove().end().append($(optionsContent));
}
});
index.php page
<div id="rip">** HERE GET 'optionsContent' VAR CORRECTLY **</div>
<li class="next nav-item">
<ul>
<li class="visible">Modello</li>
<li>Colore</li>
<li>Riparazione</li>
<li>Sommario</li>
<li class="buy">Prenota</li>
</ul>
</li>
in new.php page
<?php
$riparation = $_GET['riparation'];
?>
<input name="riparation"><?php echo $riparation; ?></input>
but doesnt work
any help?

You can use cookies or data storage API for saving data between pages.
index.html:
<?php
// set the cookies:
setcookie("riparation", "myDataFromApp");
// Render the page:
echo "<h1>This works!</h1>"
?>
Another page (jQuery cookie plugin required):
var riparation = $.cookie("riparation"); // riparation = "myDataFromApp"

Create a clickable list in HTML using JSON data with Javascript

I'm using Jquery mobile, and I want to create a clickable view list in my panel. to look something like this...
<li><a href='#' onclick='getmoviepic_mobile(this) ;' > MovieTitle"</a>
</li>
MovieTitle is obtained from my MYSQL database array using json_encode($x) so when the user clicks on the title the function getmoviepic_mobile(this) is triggered.
My question is how to set up my javascript with json data to populate my html
page.
My HTML
<div data-role="panel" id="Panelcategory" >
<ul data-role="listview" data-inset="true" id="MovieTitle">
<li></li>
</ul>
</div >
PHP getcatagories2_mobile.php
<?php
include("includes/connection.php");
$q=$_POST['input'];
$resultActor = mysqli_query($con,"SELECT id,title,
plot,catagory,release_date,rated FROM ".TBL_DATA." WHERE catagory LIKE
'%".$q."%' ORDER BY title ");
while($rowMovie = mysqli_fetch_array($resultActor)) {
$x[]=$rowMovie['title'];
}
$jsonarray=json_encode($x);
echo $jsonarray;
?>
Javascript
function getcatagories(catagory){
var catagoryValue = $(catagory).text();
$.getJSON( "getcatagories2_mobile.php", {input:catagoryValue},
function(json) { this is the part I am stuck on
}
not sure even if my HTML is set up correctly maybe don't need the "li".
thanks guys

I would iterate through the JSON and add attributes by key. For example, you could query the list and add each value.
$("#MovieTitle").append("<li>" + json["category"] + "</li>")
And do so for each key-value pair you want to include.

Ajax call inside class attribute

I'm moving a php / js / ajax script to wordpress
I encountered something that i've never seen before, I understand what it does, but i'm trying to figure out how to make this work for wordpress.
the code:
<a id="a" class="tab block sel {content:'cont_1', ajaxContent:'php/templates.php',ajaxData:'type=pistols'}">Pistols</a>
<a id="b" class="tab block {content:'cont_2', ajaxContent:'php/templates.php',ajaxData:'type=rifles'}">Rifles</a>
<a id="c" class="tab block {content:'cont_3', ajaxContent:'php/templates.php',ajaxData:'type=shotguns'}">Shotguns</a>
<a id="d" class="tab block {content:'cont_4', ajaxContent:'php/templates.php',ajaxData:'type=cameras'}" >Cameras</a>
<a id="e" class="tab block {content:'cont_4', ajaxContent:'php/templates.php',ajaxData:'type=audios'}" >Audio</a>
Templates PHP:
if(isset($_POST['type'])) {
//The div for the manufacturer tabs, uniquely identified by the $_POST['type']
echo "<ul id=\"".$_POST['type']."\" class=\"shadetabs\" style=\"position:relative; top:-12px; width:905px;\">";
if ($_POST['type'] === 'pistols') {
$manufacturers = .. and so on
From what i can understand, we are calling Templates.php and passing $_POST['type']. When this is compoleted, the script replaces the content of a <div id="cont_1"
in wordpress, i can't call random php files, since ajax will not work. I need to turn this into a function and hook it to wordpress.
Does anyone know how this type of code works?
As alternative, I'm planning to do the following, but I would prefer to keep it similar to the original code and this will need lots of extra lines of code.
var tab = jQuery("#a").type;
jQuery.ajax({
url: custom_designer.ajax_url,
type: 'post',
data: {
action: 'php_template_function'
type: tab
},
success: function (response) {
document.getElementById('caseclub_response').innerHTML = response;
document.getElementById("buy_case_foam_added").submit();
}
});

Does anyone know how this type of code works?
It looks like there is some JavaScript that extracts the object string from the class attribute, then fetches the HTML from template.php and writes it somewhere.
For example:
function fetchList(element) {
var settings = element.className.match(/\{.+\}/);
settings = eval('(' + settings[0] + ')') // eww
fetch(settings.ajaxContent, {
method: 'post',
body: settings.ajaxData
}).then((response) => {
// Error handling...
response.text().then(() => {
// Now writes the HTML somewhere...
});
});
}
If you want to copy what they did, see if you can find the original code using the Inspector.

Get value of li clicked as a link

I got couple of li elements and using them as a links to welcome.php. In welcome.php I need to know which one was clicked.
<ul>
<li><a href='welcome.php'>sport</a></li>
<li><a href='welcome.php'>relax</a></li>
<li><a href='welcome.php'>gym</a></li>
</ul>
I can't use jquery. Is there any other way to do this?

The simplest way to do this might be to append a query parameter to your links:
<ul>
<li>sport</li>
<li>relax</li>
<li>gym</li>
</ul>

you can incorporate the value in the links and get them with PHP like this
<a href="welcome.php?x=sport">
Where x is the variable you're going to get by using this in your php:
$x = $_GET["x"];
You'd need to do the same with all other links. but you only need to get the value once ofcourse
I was a little bit too late with posting this, but I think mine might have a better explaination so I'm keeping it

You can use $_GET for post value of li
I prepare an example for you
index.php
<form action="welcome.php" method="post">
<ul>
<li>sport</li>
<li>relax</li>
<li>gym</li>
</ul>
</form>
welcome.php
$var = $_GET["var"];
echo $var;

I have prepare one solution for you using simple html and Javascript :
<html>
<body>
<ul>
<li>sport</li>
<li>relax</li>
<li>gym</li>
</ul>
</body>
<script>
var el = document.getElementById('sport');
el.onclick = showMsg1;
var el = document.getElementById('relax');
el.onclick = showMsg2;
var el = document.getElementById('gym');
el.onclick = showMsg3;
function showMsg1() {
//alert('Sport Clicked!');
//Do what ever you want after click of "sport"
window.location = "welcome.php?type=sport";
return false;
}
function showMsg2() {
//alert('relax Clicked!');
//Do what ever you want after click of "relax"
window.location = "welcome.php?type=relax";
return false;
}
function showMsg3() {
//alert('Gym Clicked!');
//Do what ever you want after click of "Gym"
window.location = "welcome.php?type=gym";
return false;
}
</script>
I am sure this will helpful to you. Thank you :)

Simple quiz - how to get clicked values and send it to php

I have to write a simple quiz app. As I picked it after someone this is what I have.
There are 10 questions with 3 answers each. All question are loaded at once and only one visible. After clicking the answer next question shows up etc.
However as javascript is kinda magic to me I have no clue how to get all answers and send it to php to check if user chose correct.
The code looks something like this:
<form action="result.php">
<div class=“quiz>
<div class=“question”> Some question ?
<ul>
<li><a href=“#”>Answer A</a></li>
<li><a href=“#”>Answer B</a></li>
<li><a href=“#”>Answer C</a></li>
</ul>
</div>
[… more question here …]
<div class="question">Last question ?
<ul>
<li>Answer A</li>
<li>Answer B</li>
<li>Answer C</li>
</ul>
</div>
</div>
<input type=“hidden” name=“answers” value=“answers[]>
</form>
So basically user click on answer, next question pop up and at the end I need to populate all answer and send it to result.php where somehow I would get results within array with chosen answers like {1,3,2,1,2,3,1,2,3,1} or something like that.

There are many ways to accomplish this. Here's an easy one:
add a
<input type="hidden" name="questions[]" value="" />
inside each .question DIV
update the value of this input when one of the links are clicked:
$('.question a').on('click', function(){
var answer = $(this).text();
$(this).parents('.question').find('input').val(answer);
});
put a request method on your form, let's say POST
Then in your PHP script you'll get a numerically indexed array with the selected answer for each question, $_POST['questions'].
I do not know how your design looks like, but it may be possible to achieve this without any javascript, using hidden radio inputs and labels (I'm assuming here you're using links because of styling limitations on input fields).

Normally, you would create an HTTP request to your verification back-end. jQuery, for one, makes this quite easy. Also, I would try to generate the questions HTML, so that you're ready to generate quizzes with other sets of questions without having to re-type your html.
I'm trying to create a quizz-like app myself, currently, and would be glad to hear your feedback. A brief snipped of what I mean is on this fiddle: http://jsfiddle.net/xtofl/2SMPd/
Basically something like:
function verify(answers) {
jQuery.ajax("http://yoursite/verify.php?answers="+answers,
{ async: true,
complete: function(response, status){
// e.g.
alert(response.text);
}
};
};
This request would be sent when all answers are completed. I would try to create the questions on-the-fly using javascript and the DOM, something like:
function retrieveQuestions() {
//TODO: get them from a json-request like http://yourquizz/quizz1/questions
return [{ text: "what if Zoo went to Blohom in a Flurk?",
options: { a: "he frunts and vloghses",
b: "the Blohom doesn't snorf anymore" }
},
{ text: "how many this and that",
options: { a: "1", b: "2", c: "14" }
}
];
};
// retrieve and create the questions elements
var questions = retrieveQuestions();
questions.forEach(function(question, index){
jQuery("#questions").append(createQuestionElement(question));
});
// what does a question element look like:
function createQuestionElement(question){
var li=document.createElement("li");
var options = [];
Object.keys(question.options).forEach(function(key){
var o = document.createElement("div");
jQuery(o).on('click', function(){question.answer=jQuery(o).val();});
li.appendChild(o);
});
return li;
}
Your php backend verify.php script will check the arguments and return the result in json format, e.g.:
$correct = ($answers[ $_GET["question"] ] == $_GET["answer"]);
print("{ 'correct': '$correct' }");
(provided your answers are stored in an array $answers.

Yet another solution to the problem:
jsFiddle
We use event handlers, to check if an answer was clicked, then add the index of the answer to an array. When the last answer was submitted, we send the data to a php page, where you can process it using the $_POST array.
$('.question a').on('click', function (e) {
e.preventDefault();
var self = $(this);
var ans = self.parent().index() + 1;
answers.push(ans);
var hasNext = nextQuestion();
if (!hasNext) {
$.ajax({
type: "POST",
url: "/echo/json/",
data: {
"answers": answers
}
}).done(function (response) {
response = 'Stuff you output with PHP';
$('body').append('<p> Result: ' + response + '</p>');
});
}
});