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>
Related
I have been having problems passing Javascript variable to php using ajax on the same page.I have a try.php page and once a button is clicked, I want a value sent to try.php variable without reloading the page..
This is my form code,I am actually looping trough a database record
<?php
foreach($vars as $var){
?>
<form method="POST">
<button class="btn btn-warning btn-sm btn_edit" name="btn_edit" value="<?php echo $var['mem_id'];?>">
<span class="glyphicon glyphicon-pencil"></span></button>
<?php
}
?>
Here is my ajax code
$('.btn_edit').click(function(e){
var uid = $(this).val()
$.post("try.php",{ btn_edit : uid},
function(){
});
console.log(uid);//I could see the id logged on console
$('#edit_details').modal('show');
e.preventDefault();//prevent the form from submitting
});
On my try.php page, I have this code to check if it passed succesfully
<?php if(isset($_POST['btn_edit'])){
$user_id = $_POST['btn_edit'];
}?>
There are two modifications need to be done:
Change 1: Only input elements can have value attribute. And as you have <button>, it should be assigned with some other attribute which can be captured using jQuery, so here I am going to use data-bind attribute with it.
<button class="btn btn-warning btn-sm btn_edit" name="btn_edit" data-bind="<?php echo $var['mem_id'];?>">
And then,Change 2:
Get data-bind value with jQuery like this:
$('.btn_edit').click(function(e){
var uid = $(this).attr('data-bind'); // Using attr, not val()...
$.post("try.php",{ btn_edit : uid},
function(){
});
console.log(uid);//I could see the id logged on console
$('#edit_details').modal('show');
e.preventDefault();//prevent the form from submitting
});
I made a JQuery function the one deletes the row I selected. I know that the option exist in the DataTables option, but I want to do by myself, because I prefer to not use AJAX, just JQuery and JSON.
The problem appears when I search some specify row in the datatable with the search option, then I click the button to delete, and nothing happens. The other mistake is when I click to the next page, then, all the rows from that page will not work either.
Do you guys know what this could be?
Here I let my JQuery function:
$(document).ready(function() {
$( ".botFactura" ).click(function(e) {
alert("jkn");
idFact = this.id;
var confirmacio = confirm("Segur que vol esborrar la factura "+idFact);
/*if(confirmacio){
$.post("operacions/borraFact.php", {idFact: idFact}, null, "json").done(function(data){
alert(data.missatge);
})
}*/
});});
Then, I have the JSON file there:
<?php
include("../connexio.php");
$idFact= $_POST['idFact'];
$arrayDatos = array();
if($idFact!=""){
$borrar = 'DELETE FROM factures WHERE id="'.$idFact.'"';
//$connBorr = mysqli_query($conn,$borrar);
$arrayDatos['missatge'] = "Factura ".$idFact." esborrada!";
}else{
$arrayDatos['missatge'] = "No s'ha trobat";
}
echo json_encode($arrayDatos);
?>
I call the $(".botFactura") there:
<button type="button" name="<?php echo $line2['id']?>" id="<?php echo line2['id']?>" class="btn btn-danger botFactura">
<span class="glyphicon glyphicon-trash"></span>
</button>
<button type="button" name="<?php echo $line2['id']?>" id="<?php echo $line2['id']?>" class="btn btn-success botFactura">
<span class="glyphicon glyphicon-pencil"></span>
</button>
Finally, I'll upload some graphical example about what's my problem:
:The first one, is when the page works correctly
Then,the first issue appears when: I change the page of the table. As we can see, I click and nothing happens
The same issue appears when I try to search some specific row into the search box.
Well, I would really appreciate if someone could help to explain why this is not working! Thank you!
I don't know which version of jQuery you are using but if you are jQuery 1.9 or upper version try this
$( document ).on('click', '.botFactura', function(e)
or if you are using lower version try this
$( ".botFactura" ).live('click', function(e)
I'm new to php and codeigniter. I have this task that i'm working on right now which is a hostel management system. the student has the ability to choose the meal they want to eat by selecting on it, all im trying to do is to disable the select button after they click on it, in other words the student can choose a specific meal once.
here's my code:
<td><div><?php echo $row['type'];?></div></td <td><div><?php echo $row['content'];?></div></td>
<td><div><?php echo $row['date'];?></div></td>
<td align="center">
<?php $is_selected=$this->db->get_where('selected_meal', array( 'meal_id' => $row['meal_id'],'student_id'=>$this->session->userdata('student_id')))->row()->delivered;
<a data-toggle="modal" href="#modal-form" onclick="modal('order_meal',<?php echo $row['meal_id'];?>)" class="btn btn-gray btn-small">
<i class="icon-wrench"></i> <?php echo get_phrase('select');?>
</a>
<?php ?>
</td>
Here is sample form, button and javascript. You need to modify it to fit your needs.
<form name="myForm" id="myFormId" class="form-horizontal" method="post" action="<?=base_url('invoice/create_invoice');?>">
<input type="submit" id = "formSubmit" class="btn btn-primary" value="Submit">
</form>
<script type="text/javascript">
document.getElementById('myFormId').onsubmit = function() {
document.getElementById("formSubmit").disabled = true;
}
</script>
Give a class to element, which you want to select. Ex 'select-meal'.
$('.select-meal').click(function(){
$(this).attr('disabled', 'true');
})
It seems you are using bootstrap, you can add class "disabled" on click submit
Or, try this, add class dis-btn and write script on event click
$('.dis-btn').prop('disabled', true);
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>
i have a got a form, on clicking the submit button:
I want to do some task in the same file (db task) AND
I want the form data to be sent to test.php with the redirection
here is my code
<?php
if(isset($_POST['btn'])){
//do some task
?>
<script type="text/javascript">
var e = document.getElementById('testForm'); e.action='test.php'; e.submit();</script>
<?php
}
?>
<form name="testForm" id="testForm" method="POST" >
<input type="submit" name="btn" value="submit" autofocus onclick="return true;"/>
</form>
but not able to submit the form, if i call the javascript code on onClick, it works.what is the problem in this code, Is there any work around for this
Just echo the javascript out inside the if function
<form name="testForm" id="testForm" method="POST" >
<input type="submit" name="btn" value="submit" autofocus onclick="return true;"/>
</form>
<?php
if(isset($_POST['btn'])){
echo "
<script type=\"text/javascript\">
var e = document.getElementById('testForm'); e.action='test.php'; e.submit();
</script>
";
}
?>
Lately I've come across yet another way of putting JS code inside PHP code. It involves Heredoc PHP syntax. I hope it'll be helpful for someone.
<?php
$script = <<< JS
$(function() {
// js code goes here
});
JS;
?>
After closing the heredoc construction the $script variable contains your JS code that can be used like this:
<script><?= $script ?></script>
The profit of using this way is that modern IDEs recognize JS code inside Heredoc and highlight it correctly unlike using strings. And you're still able to use PHP variables inside of JS code.
You can put up all your JS like this, so it doesn't execute before your HTML is ready
$(document).ready(function() {
// some code here
});
Remember this is jQuery so include it in the head section. Also see Why you should use jQuery and not onload
At the time the script is executed, the button does not exist because the DOM is not fully loaded. The easiest solution would be to put the script block after the form.
Another solution would be to capture the window.onload event or use the jQuery library (overkill if you only have this one JavaScript).
You can use PHP echo and then put your JavaScript code:
<?php
echo "
<script>
alert('Hellow World');
</script>
";
?>