I want to make it so that new input boxes only appear if information in the previous box is correct, by checking it with a mysql_query can I adapt this code
function show(id){
if(document.getElementById(id+"-link").style.display=="none") {
document.getElementById(id+"-link").style.display="block";
document.getElementById(id+"-input").style.display="block";
}
}
<tr>
<td><input type="text" id="a1" name="em_1"></td>
<td>and</td>
</tr><tr>
<td><input type="text" id="b1-input" name="em_2" style="display:none"></td>
<td><a href="#null" style="display:none" id="b1-link"</a></td>
</tr><tr>
so somewhere in here I need to add :
$userCheck=mysql_query(SELECT email FROM users WHERE name = "em_1")
$row=mysql_num_rows($usercheck)
if($row!==0){"show('b1')";}
or something to that affect, without refreshing the page. Is this possible?
Ajax:
function XMLDoc()
{
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// xmlhttp.responseText -> return value from php file , so from here you can do your action
}
};
xmlhttp.open("POST","yourfile.php?email={value}",true); // from here send value to check in server side
xmlhttp.send();
}
Php:
if (isset($_POST['email'])){ // which is variable from `yourfile.php?email`
$userCheck=mysql_query("SELECT email FROM users WHERE name = 'em_1'");
$row=mysql_num_rows($usercheck);
if ($row==0){
echo "no";
} else {
echo "yes";
}
}
Pass in yourfile URL of your server side script which checks if email exists or not and return for example yes or no => Then with help of Ajax it will be return in current document
Note: Don't use mysql extension , use mysqli or PDO instead
Yes it is possible, but you need to know how to use ajax or jquery-ajax
which will help you get the data from php to javascript and then appended to html.
You need AJAX to make this work without a refresh. Check out this page on W3Schools:
http://www.w3schools.com/php/php_ajax_database.asp
It's almost exactly what you want, but instead of returning a block of text, just enliven the b1 pieces.
Related
I've inherited some code that takes a user's input, and adds it to a cell in a MySQL database hosted on the same instance. It's not working how it should, however.
Expected behavior: when a user clicks the link, their input is added to the table in MySQL.
What actually happens currently: This code appears in the cell instead of the actual data: <?php echo $user_email; ?>
The function call looks like this:
function dibs(item_id)
{
ajax_it("index.php?email=<?php echo $user_email; ?>&item=" + item_id, dibs_complete, dibs_fail);
}
And the function ajax_it is:
function ajax_it(request, ready_func, fail_func)
{
var xmlhttp;
if (window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
ready_func(xmlhttp);
}
else
{
fail_func(xmlhttp);
}
};
xmlhttp.open("GET", request, true);
xmlhttp.send();
}
The input is collected like this:
<form action="#" method="GET">
<input name="email"></input>
<input name="category" type="hidden" value="<?php echo $_GET["category"]; ?>" />
<input type="submit" value="Go" />
</form>
I've tried changing permissions of the javascript, the SQL server access and nothing seems to affect the behavior. What am I doing wrong?
I'm not sure how your Ajax is set up, but it seems strange to me to use PHP to put the value of a variable in DOM into your Ajax use. Normally you'd select that value using Javascript. But your problem is that you've got the PHP call inserting in the DB. That normally happens when you're calling PHP functions on a page that doesn't support it (like HTML files or external Javascript).
Fixed - syntax error. Apparently JS doesn't like \" much
I'm working on my first AJAX script with some PHP pages - it's my first time with AJAX and I've finally got the script to work. I'm also a bit of a Javascript newbie too.
I have a PHP website that allows users to search a library catalog and then select/add books to a shopping cart. We've now changed the "Select" link to load via AJAX so the search results page doesn't refresh.
To finish the AJAX changes I now need to pass a unique ID for each of the table cells that has the AJAX link to the script. I'm using PHP to generate a unique ID for each table cell by using the $bookID variable as follows:
<td class="hidden-narrow" id="<?php echo 'selectRecord'.$bookID; ?>">
<?php
if (in_array($bookID, $_SESSION['selectedBooks'])) {
echo "Selected";
} else {
echo 'Select';
}
?>
</td>
I now need to update my script to work with the unique ID's - to get it working I hardcoded it to an ID named "selectRecord" using an example script that I found. Here's my script:
function selectRecord(id) {
// Allocate an XMLHttpRequest object
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp=new XMLHttpRequest();
} else {
// IE6, IE5
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// Set up the readyState change event handler
xmlhttp.onreadystatechange = function() {
if ((this.readyState == 4) && (this.status == 200)) {
document.getElementById("selectRecord").innerHTML="Selected";
}
}
// Open an asynchronous POST connection and send request
xmlhttp.open("POST", "selectRecord.php", true);
xmlhttp.send("id="+id);
return false; // Do not follow hyperlink
I gather I need to change this line:
document.getElementById("selectRecord").innerHTML="Selected";
but not sure of the syntax to handle unique ID's for each table row cell.
You can pass the id to the getElementById function:
document.getElementById("selectRecord" + id).innerHTML="Selected";
Have you tried
document.getElementById(id).innerHTML="Selected";
? id should get enclosed by the readystate function and keep its value.
I have a very simple form.I want to insert the form data in mysql database.using ajax.
I need to pick data from form and send them as xml to the server.
the form is as :
<form>
Name:<input type="text" id=name/>
Contact<input type="text" id=contact/>
</form>
And i am picking the data from my form using js as :
function GetData(form)
{
var name=document.getelementbyid('name');
vat contact=document.getelementbyid('contact');
}
function Ajax
{
" Here i want to send the form datas as an xml to the server"
}
Can any one help me how to do this .And also how to receive the the request from server as xml and insert to database.
Just give me the proper way.Not Query string or json or jquery.I want to use xml using ajax
Thanks,
function GetData(form)
{
var name=document.getelementbyid('name');
var contact=document.getelementbyid('contact');
Ajax(name,contact);
}
function Ajax(name,contact)
{
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var response=xmlhttp.responseText;
}
}
//var datas='?name='+name+'&contact='+contact;
var xmlval='<name>'+name+'</name><contact>'+contact+'</contact>';
var datas='?xmlvalue='+xmlval;
xmlhttp.open("GET",'phpfile.php'+datas,true);
xmlhttp.send();
}
Important question: Why do you need XML to submit?
Also, to use XML, look up SimpleXML, and to save to database, there are a lot tutorials.
Update: if you meant the response as XML? That's just like the same as in JS. And to use it in JS, look at this. However, in that case, uncomment the commented line and comment the next 2.
I have a main page, call it Main.php. On this page, is a button that when clicked, sets a div's innerHTML (already on Main.php, called divResults) with the results from Results.php.
When Results.php is called, the returned HTML "These Are The Results" is properly received and set as the contents to divResults on Main.php. However, any javascript from Results.php is not executed. As an example, I attempt to do a simple window.alert. Here is example code:
Main.php link button to begin the action:
<img src="$MyImageSource" onclick=\"ExpandDropdownDiv()\" />
Main.php javascript function ExpandDropdownDiv():
function ExpandDropdownDiv(){
if (window.XMLHttpRequest)/* code for IE7+, Firefox, Chrome, Opera, Safari */
{
xmlhttp=new XMLHttpRequest();
}
else
{/* code for IE6, IE5 */
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
{
document.getElementById("divResults").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","Results.php",true);
xmlhttp.send();
}
Results.php code example:
<script type="text/javascript">
alert("Success");
</script>
These Are The Results
------------------ Edit - Update ------------------
The simple alert, from Results.php is just an example. If I were able to get this to work, I believe I could solve the rest of my problem on my own. However, I noticed a few comments suggesting to just place the alert in Main.php's javascript after i set the div's innerHTML. So, let me explain what I truly want to do with the javascript, after the div is set.
Image 1, shows some normal "Select" html elements, that have been transformed using jquery and the dropdown-check-list extension (.js). When the user clicks the colorful down arrow at the bottom, the div expands, (image 2) and two more "Select" elements are generated within this other .php file... the html is returned, and placed in the div. Thus, i do not need to reload the entire page, and can place the new select dropdowns just beneath the existing ones.
The problem is, to "transform" these normal select elements, there is some javascript that needs to be executed against that HTML:
$(document).ready(function() {
$(".MultiSelect").dropdownchecklist( {firstItemChecksAll: true, maxDropHeight: 300 , searchTextbox: true, width: 100, textFormatFunction: function(options) {
var selectedOptions = options.filter(":selected");
var countOfSelected = selectedOptions.size();
var size = options.size();
switch(countOfSelected) {
case 0: return "All";
case 1: return selectedOptions.text();
/* case size: return "All"; */
default: return countOfSelected + " selected";
}
}
}
);
}
So, somehow I need to be able to execute javascript against the HTML that is generated from this other .php file. And simply calling the above code, after my divs innerHTML is filled, only re-generates the already existing dropdowns, not the two new ones.
Example Images
Here is a good read on understanding what you are doing: Eval embed JavaScript Ajax: YUI style
Making your code work with using eval(); but its not recommend for various reasons:
Let's take your php and modify it like this:
<script type="text/javascript">
function result() {
alert("Success");
}
</script>
These Are The Results
and This is the callback function from AJAX. result(); is not executed because it doesn't get evaluated, and thus does not exist. which is in your case
if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
{
document.getElementById("divResults").innerHTML=xmlhttp.responseText;
result(); // this function is embedded in the responseText
// and doesn't get evaluated. I.e. it doesn't exist
}
in order for the browser to recognize the result(); you must do an eval(); on all the JavaScript statements with in the script tags that you injected into the div with id divResults:
if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
{
document.getElementById("divResults").innerHTML=xmlhttp.responseText;
var myDiv = document.getElementById("divResults");
var myscripz = myDiv.getElementsByTagName('script');
for(var i=myscripz.length; i--;){
eval(myscripz[i].innerHTML);
}
result(); //alerts success
}
Easy Way:
The easiest way i would do it is basically remove the JavaScript from the php and display the content, and after callback just do the rest of the JavaScript within the callback function
php:
echo 'These Are The Results';
JavaScript:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
{
document.getElementById("divResults").innerHTML=xmlhttp.responseText;
alert('success'); // or whatever else JavaScript you need to do
}
}
try to wrap the javascript code from Result.php in a function and call it after inserting it like :
<script type="text/javascript">
function result() {
alert("Success");
}
</script>
These Are The Results
and
if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */
{
document.getElementById("divResults").innerHTML=xmlhttp.responseText;
if(result) result();
}
Your results.php needs to be something like...
echo 'eval("function results() { alert(\'success\'); }");';
And then call the results function.
I want to use javascript to compute values without pressing on the submit button. Using the javascript onkeyup event.
Is it possible to send 2 or more values from an html form to a javascript function?
This is the code for the loading of the necessary details on a table:
echo "<input type=\"hidden\" name=\"ids[]\" value=\"$id\">";
echo "<input type=\"hidden\" name=\"qoh[]\" value=\"$qtyhand\">";
echo "<td><input type=\"text\" name=\"qbuys[]\" id=\"qbuys\" value=\"$qtytbuy\" onKeyUp=\"proc(this.value)\"></td>";
I tried (which I only made up), but didn't work, what's the proper way of doing this,is it possible?:
onKeyUp=\"proc(this.value && document.cartform.qbuys[].value);\"
And this is the javascript that acts as a mediator between the form and the php file that computes the subtotal:
function proc(str,str2)
{
if (str=="")
{
document.getElementById("compz").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("compz").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","compz.php?qbuys="+str&prodid="+str2,true);
xmlhttp.send();
}
Although I'm not really sure if it works, since I'm only using 1 parameter for the function before.
First of all, I would recommend using jQuery instead of rolling your own AJAX interface. It's tried and tested and used by the giants of the Internet. Here's a simple example from the jQuery documentation adapted to your structure:
$('#compz').load('some_page.php');
That line would load any content returned by "some_page.php" into your "compz" DIV. So let's re-write your function:
proc = function(str1) {
var str2 = $('#FormVariableThatContainsProdID').value;
$('#compz').load('compz.php?qbuys=' + str1 + '&prodid=' + str2);
}
That way your PHP remains unchanged.
Comma seperates function parameters.
onKeyUp=\"proc(this.value, document.cartform.qbuys[].value);\"