PHP access name of javascript function that fired in AJAX onclick event - php

I have several buttons that the user may press to see results from a MySQL database. The onclick event on the button fires an AJAX call that goes out and retrieves the data that coincides with which button was pressed.
One of the following functions is called, depending on which button is pressed.
<script language="JavaScript">
function ChangeText1() {
$("#ajax_content").load("zone_code.php #zone_code1");}
function ChangeText2() {
$("#ajax_content").load("zone_code.php #zone_code2");}
function ChangeText3() {
$("#ajax_content").load("zone_code.php #zone_code3");}
</script>
Following are the buttons on zones.php:
<button type="button" class="active zone" name="z1" onclick="ChangeText1()">Zone 1</button>
<button type="button" class="active_zone" name="z2" onclick="ChangeText2()">Zone 2</button>
<button type="button" class="active_zone" name="z3" onclick="ChangeText3()">Zone 3</button>
Here is the php code that is retrieved from zone_code.php when a button is pressed:
<div id="zone_code1">
<?php echo '<p>' . $all_results[0]['zone_desc'] . '</p>'; ?>
</div>
<div id="zone_code2">
<?php echo '<p>' . $all_results[1]['zone_desc'] . '</p>'; ?>
</div>
<div id="zone_code3">
<?php echo '<p>' . $all_results[2]['zone_desc'] . '</p>'; ?>
</div>
And here is the div on zones.php that is populated by the ajax call:
<div id="ajax_content">
<p>Choose a zone</p>
</div>
Right now, the code works beautifully to call in the zone description for whichever button was pressed, either zone 1, zone 2, or zone 3. But I would also like to know which of the buttons was pressed, whether it was number 1, 2, or 3. There are more operations I would like to do with PHP, based on which of the buttons they pressed.
For various reasons, I cannot make the button into a submit button, or put it between form tags. Nor can I embed a link in the button. The reasons are too complicated to go into here. So I would like to be able to access either the name of the function that fired, or the name of the button that was clicked.
It may seem like a simple thing, but I am a javascript newbie, and am much more comfortable with php. I have tried various if statements in PHP, which of course didn't work, because javascript is client side and PHP is server side. I have been Googling this for a couple of hours, but haven't been able to find anything close enough to my situation to solve this. I'm not including those failed attempts here, for the sake of keeping this as short as I can. Suffice it to say I tried... I really tried.
I would very much appreciate help with this. Thank you, in advance, for your kindness and consideration.

<script language="JavaScript">
function ChangeText1() {
$("#ajax_content").load("zone_code.php?zone=1 #zone_code1");}
function ChangeText2() {
$("#ajax_content").load("zone_code.php?zone=2 #zone_code2");}
function ChangeText3() {
$("#ajax_content").load("zone_code.php?zone=3 #zone_code3");}
</script>
then it should be in zone_code.php's $_GET['zone'] , "1" or "2" or "3" ^^

You can simplify your code like this -
<script language="JavaScript">
function ChangeText(code) {
$("#ajax_content").load("zone_code.php?zoneCode="+code+" #zone_code"+code);
}
</script>
In the HTML now -
<button type="button" class="active zone" name="z1" onclick="ChangeText(1)">Zone 1</button>
<button type="button" class="active_zone" name="z2" onclick="ChangeText(2)">Zone 2</button>
<button type="button" class="active_zone" name="z3" onclick="ChangeText(3)">Zone 3</button>
In your PHP code, you can get the zoneCode as follows -
$zoneCode = $_GET["zoneCode"]

as we said before (see comment) i will do something like that, buttonName is then with post process:
<script language="JavaScript">
function ChangeText(value) {
$("#ajax_content").load("zone_code.php #zone_code"+value, {buttonName:"z"+value});
}
</script>
or like that, buttonName is then send with get process
<script language="JavaScript">
function ChangeText(value) {
$("#ajax_content").load("zone_code.php #zone_code"+value, "buttonName=z"+value);
}
</script>
in both of the upper code you can use $("#zone_code"+value).load("zone_code.php") instead of $("#ajax_content").load("zone_code.php #zone_code"+value)
there is another post about this here
and in your html
<button type="button" class="active zone" name="z1" onclick="ChangeText(1)">Zone 1</button>
<button type="button" class="active_zone" name="z2" onclick="ChangeText(2)">Zone 2</button>
<button type="button" class="active_zone" name="z3" onclick="ChangeText(3)">Zone 3</button>

Related

How to register button click

html:
<button type="button" class="btn btn-outline-danger btn-icon-text" id = "LOAD">
<i class="mdi mdi-upload btn-icon-prepend"></i>LOAD
</button>
php:
<?php
if (isset($_SESSION['LOAD']))
{
exit();
}
?>
when i click the button, nothing happens. sorry i am really new to html and php. i have tried multiple other methods but none work :(
<button type="button" class="btn btn-outline-danger btn-icon-text" id = "LOAD">
<i class="mdi mdi-upload btn-icon-prepend"></i>LOAD
</button>
That's just a HTML code, so it will not trigger anything. You need little bit javascript.
Also remember, php loads before javascript. So you can't trigger php with javascript if you don't use AJAX or redirect etc.
<script>
document.getElementById("LOAD").onclick = function(){
window.location.href = window.location.href+"?LOAD=1";
}
</script>
If you add that javascript code, button will refresh the page and redirect the same page with GET parameter.
You can control the GET parameter on the PHP side.
<?php
if (isset($_GET['LOAD']))
{
exit();
}
?>
It's not efficient path but if you understand the mechanics, you can figure it out.
Research AJAX.
You are not assigning the button name (which is different from the id)
try name="LOAD" as in:
<button type="button" class="btn btn-outline-danger btn-icon-text" id="LOAD" name="LOAD">
<i class="mdi mdi-upload btn-icon-prepend"></i>LOAD
</button>
</div>

Can't put a delegate method to work

I;m using Ajax in a bootstrap PHP page, so i can't use functions inside onsubmit event, since the button didn't exist before, and so, i have to use delegate methods, i understand this.
But, as i don't know what i am doing wrong, im here to ask your help.
I have a <input><button> inside a table, which i feed via Ajax, and i want to validate it's data before submiting, i thought of using a delegate method to do that, the validation is very simple, just don't be empty.
my code is...
<label for="idmat" class="label label-default">mat:</label>
<input placeholder="mat" type="text" class="mat" id="idmat" name="sendmat" size="20" maxlenght="20" /><br />
<button class="btn btn-large btn-success" type="submit" class="btmat" id="btmat">Mat</button>
and my JS is:
$(function(){
$("#btmat").delegate("click",function(){
var matric = $("#idmat").val();
if(matric === ""){
alert("wrong!");
}
});
...etc
I tried changing this .delegate to .on, but it didn't do anything different than before.
You have to bind to the DOM element, and listen for the creation:
jQuery(document).on('click', '#btmat', function() {
var matric = $("#idmat").val();
if(matric === ""){
alert("wrong!");
}
});
Also, your button can't set class twice. You need to change it to this:
<button class="btn btn-large btn-success btmat" type="submit" id="btmat">Mat</button>

Jquery Bootstrap modal PHP

I have a form with many fields and when I click the submit button, before saving the data in my database, I would like to show a bootstrap modal popup that displays a question to the user. The user can answer "yes" or "no" to the question. In these two cases, the data will be saved in the database. The difference between the "yes" and "no" button is the action.
I get some trouble to manage with this.
I know that Ajax and PHP are required but I do not really know how to do the trick.
A hand would be appreciate.
Sorry for my poor english.
You just need to call the modal when the submit is clicked. Then, do the ajax call based on what the user clicked.
SOme like this:
HTML
//Submit Button
<div class="form-group">
<button id="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
//Modal to ask for confirmation
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Are you sure?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="yes">Yes</button>
<button type="button" data-dismiss="modal" class="btn" id="no">No</button>
</div>
</div>
Then, you just need to add listeners to each button and do the corresponding action.
Javascript
<script type="text/javascript">
//If user submits, show modal.
$("#submit").click(function() {
showModal();
});
//If user selects Yes, do action A.
$("#yes").click(function() {
doAjax_A();
});
//If user selects No, do action B.
$("#no").click(function() {
doAjax_B();
});
</script>
All thats left is to do your Ajax Call.
More on: http://api.jquery.com/jquery.ajax/

Change a form in order to use jQuery and avoid the page refresh

I'm trying to change the form tag below in order to use jQuery. Already, clicking the buttons changes the display from rows to columns and vice-versa but I want to avoid the page refresh. I'm really new at jQuery and can't honestly say what my mistakes are when trying to change it myself.
<form id="rowsToColumns" action="index.php?main_page=specials&disp_order=1" method="POST">
<input type="hidden" name="style_changer" value="columns"/>
<button type="submit" class="btn btn-large btn-primary" type="button">Change to Column</button>
</form>
<form id="columnsToRows" action="index.php?main_page=specials&disp_order=1" method="POST">
<input type="hidden" name="style_changer" value="rows"/>
<button type="submit" class="btn btn-large btn-primary" type="button">Change to Rows</button>
</form>
I'm also trying for the buttons to call a different stylesheet upon click. This stylesheet is not needed for the display to change from/to rows/columns as I mentioned above. The actual page is written using php as shown below:
<?php $this_page = zen_href_link($_GET['main_page'], zen_get_all_get_params()); ?>
<div id="style_changer">
<?php if($current_listing_style == 'rows') {?>
<form id="rowsToColumns" action="<?php echo $this_page;?>" method="POST">
<input type="hidden" name="style_changer" value="columns"/>
<button type="submit" class="btn btn-large btn-primary" type="button">Change to Column</button>
</form>
<?php } else { ?>
<form id="columnsToRows" action="<?php echo $this_page;?>" method="POST">
<input type="hidden" name="style_changer" value="rows"/>
<button type="submit" class="btn btn-large btn-primary" type="button">Change to Rows</button>
</form>
<?php } ?>
</div>
If the question is "how to change a form in order to use jQuery and avoid the page refresh", then the jquery form plugin is your friend, as it turns any html form into an ajax-powered one.
Simply follow their instructions and you'll get it working in no time (provided your form already works as is).
You can prevent the Default form Submission by preventing the default action on the submit button..
$('button[type=submit]').submit( function(e){
e.preventDefault(); // Stops the form from submitting
});
Well, for a very vague method you can use $.ajax and take advantage of reading the <form>'s pre-existing attributes to decide on submission method and read the elements' values as submissiong data:
$('form').on('submit',function(e){
var $form = $(this);
// submit the form, but use the AJAX equiv. instead of a full page refresh
$.ajax({
'url' : $form.attr('action'),
'method' : $form.attr('type'),
'data' : $form.serialize(),
'success' : function(response){
// process response (make CSS changes or whatever it is
// a form submission would normally do)
}
});
// prevent the normal submit and reload behavior as AJAX is now
// handling the submission
e.preventDefault();
});
However, for this to work you'll need some variation of a stripped-down PHP response just for the purpose of the AJAX request (avoid resending headers, script tags, etc. and just return the raw data that jQuery can use to make a UI decision).

How do incoporate some javascript within php to pass data?

I am trying incorporate some javascript within the php below to pass a variable to the next page (checkout.php). It worked initially, but now I am having trouble executing this properly. Any tips?
echo '<div class = "row"><div class = "span 4 offset6"><select style="width: 130px;" name="shipping" class="span2">
<option value="0">7-9 days: FREE</option>
<option value="7">3-5 days: $7</option>
<option value="17">2 days: $17</option>
<option value="22">1 day: $22</option>
</select></div></div>';
}
echo '<script language="javascript">
function test()
{
var val=document.getElementById("select").value;
var hrf="checkout.php?options="+val;
document.getElementById("a_link").href=hrf;
}
</script>
<i class="icon-shopping-cart icon-white"></i> Add to Cart';
EDIT: The problem I having is that when I click on the button, it stays on the same page instead of going to checkout.php with the option parameter.
Even when I change the first line of the javascipt to:
var val=document.getElementByName("shipping").value;
The page still stays the same. I'm assuming this is where the issue is but I odn't know how to fix it.
Just do not incorporate JS within PHP. There is absolutely no point in this!
Just leave PHP mode and write JS as is:
<?php
//some PHP
?>
<script language="javascript">
function test()
{
var val=document.getElementById("select").value;
var hrf="checkout.php?options="+val;
document.getElementById("a_link").href=hrf;
}
</script>
<a href ="#" id="a_link" onclick="test();" class="btn btn-success" type="submit">
<i class="icon-shopping-cart icon-white"></i> Add to Cart</a>

Categories