I have this jquery script that refreshes a div tag on my page:
$(function() {
$(".loadlink").click(function(event) {
event.preventDefault();
$("#result").load($(this).attr("href"));
});
});
A link click activates it, but I want to change it to a button. Currently I have:
<a class="loadlink" href="crimes_result.php?id=<? echo $id ?>">do job<a>
Instead I want a submit button, like: (this doesnt work-doesn't send the id)
<input type="submit" class="loadlink" value=" do job " onClick="location.href='crimes2.php?id=<? echo $id ?>';this.disabled=true;">
What am I doing wrong?
Leverage the data attribute and jQuery's data method. I think this is what you are trying to do.
html
<input type="submit" class="loadlink" data-url="crimes2.php?id=<?php echo $id ?>" />
javasript
$(function() {
$(".loadlink").click(function(event) {
event.preventDefault();
$("#result").load($(this).data('url'));
});
});
You may try
<input type="submit" class="loadlink" value=" do job " onClick="loadlink('crimes2.php?id=<? echo $id ?>'); this.disabled=true;">
And JavaScript
function loadlink(href)
{
$("#result").load(href);
}
Set the URL as a data-attribute in your button markup and read it like this in your JS:
$(function() {
$(".loadlink").click(function(event) {
event.preventDefault();
$("#result").load($(this).attr("data-href"));
this.disabled = true;
});
});
This requires your button to look more like this:
<input type="submit" class="loadlink" value=" do job " data-href="crimes2.php?id=<? echo $id ?>';">
The reason it's not working, is that the submit button does not have a href attribute.
You need to add the value you want to go to (the url) to the button and change your javascript accordingly or just change the link to make it look like a button.
use a hidden field which will store the url to load:
<input type="hidden" name="myUrl" value="crimes_result.php?id=<? echo $id ?>" />
and use the javascript:
$(function() {
$(".loadlink").click(function(event) {
event.preventDefault();
$("#result").load($('input[name=myUrl]').val());
});
});
Related
I understand how easy it is to hide/remove/disable a button after clicking client-sided. However, I would like to hide/disable a button permanently after it's been clicked once.
<form action="" method="post" class="delivery-confirm-frm">
<input type="hidden" name="order_id" value="<?php echo $_order->getIncrementId(); ?>" />
<input type="button" value="CONFIRM" class="delivery-confirm" id="confirmbutton"/>
</form>
<script type="text/javascript">
var $jj = jQuery.noConflict();
$jj(document).ready(function () {
$jj('.delivery-confirm').on('click', function () {
var _this = $jj(this);
$jj.confirm({
title: 'Confirm!',
content: 'Are you sure? Once confirmed, you cannot dispute this transaction.',
buttons: {
confirm: function () {
_this.closest('form').submit();
},
cancel: function () {
}
}
});
});
});
</script>
Basically, I have a button a person will click to confirm that an order has been delivered to them. An alert confirmation pops up after clicking. I would like to remove the button after the person has confirmed via the alert pop up.
Is there a simple way to do this via PHP? Or is it a little more complicated?
First of all you need to implement both client side and server side. Client side is for once the user clicks on submit for the first time so using javascript you can call the following after the form submit:
$("#confirmbutton").prop("disabled",true);
after that you need to handle the case that a user reloads the page. So the button should be disabled when the page loads. So assuming that there is a function is_confirmed() that returns true or false, you can add the following in your button
<input type="button" value="CONFIRM" class="delivery-confirm" id="confirmbutton" <?php echo $_order->is_confirmed() ? 'disabled' : ''; ?>/>
I am trying to create a button that is unclickable at first. But when the user types in anything in a textfield, the button should be clickable. How do I do that? I know this will involve AJAX and I really don't know how to use AJAX. Any ideas how? Thank you in advance!
EDIT: I forgot to add that my textfield and button are inside separate fields in a CGridView. I'm sorry.
$('#some_text_box').on('input', function() {
$("button").prop('disabled', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="some_text_box" type="text"/>
<button id="button" type="button" disabled>Click Me!</button>
with jquery
jQuery('#some_text_box').on('input', function() {
$("#button").prop('disabled', true);
});
Use jquery keyup function DEMO
<input type='text' id='t1'/><button disabled id='button'>submit</button>
jquery:
$('#t1').on('keyup', function(){
if($(this).val() != "") {
$('#button').prop('disabled',false);
}
else {
$('#button').prop('disabled',true);
}
});
<form method="POST">
<div id="showme">Show me <?php echo $_POST['name']?></div>
Send the value<input type="radio" name="name" value="ja"/>
<input type="submit" id="submit" name="submit" value="BEREKENEN! ">
</form>
<script>
$(document).ready(function () {
$('#showme').hide();
$('#submit').click(function(e) {
e.preventDefault();
$('#showme').fadeIn(5000);
});
});
</script>
This code won't send the value of the radiobutton to the showme div.
I can't receive the $_POST['name'] when I use hide() and fadeIn() between the <script> tags.
Whenever I don't use jQuery it sends the data - when using it , it won't let me send the value.
How do I fix this problem, this is just an example of 1 radio button. I have a list of 6 radiobuttons that need to be sent to PHP section in the same file, I don't want to make another file for this.
This code will FadeIn the requested div, it shows me Show me but it won't show the value where I ask for with the line <?php echo $_POST['name']?>
PHP is parsed on the server. <?php echo $_POST['name']?> has already been evaluated and echod to the page long before any of the submission stuff happens. What you need is to use AJAX.
You can replace the submit button with just a regular button, remove the <form> element entirely even.
jQuery:
$('#submit').on('click', function(evt) {
var e = evt || window.event;
e.preventDefault();
$.post('page.php', { name: $('input[name="name"]').val() }, function ( data ) {
$('#showme').append(data).fadeIn(5000);
});
return false;
});
(if you do what I did below turning submit into button, you dont need the e.preventDefault())
PHP:
if(isset($_POST['name'])) {
echo $_POST['name'];
return;
}
HTML:
<div id="showme">Show me </div>
<label for="name">Send the value</label><input type="radio" name="name" value="ja"/>
<input type="button" id="submit" name="submit" value="BEREKENEN!">
I'm not so sure you can get a non-BOOLEAN value from a radio button with PHP though. You're probably better off using <input type="hidden" value="ja" /> or maybe type="text".
I want to update marks of a particular student in particular subject out of eight subjects.
My question is how to identify that a particular text box value has been changed after clicking submit button, then the updation task is forwarded to the update.php. Please give me your valuable answer. Thanks in advance.
Since your button click event is occured on client side, you can identify it by client side scripting.
<script lang='javascript'>
$(document).ready(function(){
$('#button_id').click(function(){
/* Do whatever you want to do right here*/
});
});
</script>
For identifying the change on text box after clicking submit button, first change the input type from submit to button as as soon as you click submit, it redirects the page.
<input type='button' onClick='your_function()' id='btn_submit' name='btn_submit' />
<input type='text' id='text_box' name='text_box' onchange='$('#flag_value_changes').val('1')' />
<input type='hidden' id='flag_value_changes' name='flag_value_changes' />
<script lang='javascript'>
function your_function()
{
flag_value_changes = $('#flag_value_changes').val();
if(flag_value_changes == 1)
alert('Value has been changed');
else
alert('Value has not been changed');
}
</script>
the scripting language can help you in this situation.use javascript for the event of the submit button click.
do whatever you needed in that event..happy coding :)
As stated by hsuk. You can do it on the client side using javascript.
I've provided an example using textarea and no inline javascript.
HTML
<div>
<textarea id= "math">Math</textarea>
<textarea id= "english">English</textarea>
<textarea id= "french">French</textarea>
<textarea id= "spanish">Spanish</textarea>
<input type="submit" value="submit"/>
</div>
And the following javascript(Using Jquery)
$(document).ready(function(){
var initialValues = [];
var i = 0;
//Gets values on load
$("div textarea").each(function(){
initialValues[i] = this.id+" had "+$(this).val();
i++;
});
//Checks values on click
$("input").click(function(){
i = 0;
$("div textarea").each(function(){
value = initialValues[i].split(" ");
if($(this).val() != value[2]){
alert(value[0] + " was Changed.");
}
i++;
});
});
});
DEMO
I have a form with number of input type images. I need to replace the webpage location to url of the image when a user clicks any image.
form is like,
<form action='free.php' id='freeForm' method='post' autocomplete="off">
<?
for($j=1;$j<=5;$j++)
{
?>
<input type="image" src="<?=$img;?>" />
<?
}
?>
</form>
$img and $url values from database.
My jquery is like,
$("#freeForm").submit(function()
{
var Form = { };
Form['inputFree'] = $("#inputFree").val();
Form['freeTOS'] = '1';
$('.anchor-url').click(function(e){
e.preventDefault();
alert($(this).attr('href'));
});
$.post('processFree.php', Form, function(data)
{
if(data == "Success")
{
$("#FreeErrors").html('').hide();
swapToPane('paneSuccess');
return;
}
swapToPane('paneFree');
$("#FreeErrors").html(data).show();
});
return false;
});
Now I am getting 'http://au.yahoo.com' when i click each image. But I want to replace 'http://au.yahoo.com' with URL of each image. How can I pass the PHP variable $url to this form?
Any idea?
Thanks!
This should work, if I understood what you were asking for correctly and though I haven't tried it. Basically you bind the click event to each image, and on click it replaces the window location with the value in the src attribute of the input element being clicked on.
$('input[type=image]').click(function(e){
e.preventDefault();
window.location.replace($(this).attr('src'));
});
EDIT
First you should add a class name to your anchor elements:
<form action='free.php' id='freeForm' method='post' autocomplete="off">
<?
for($j=1;$j<=5;$j++)
{
?>
<input type="image" src="<?=$img;?>" />
<?
}
?>
</form>
Your JS:
$('.anchor-url').click(function(e){
e.preventDefault();
window.location.replace($(this).attr('href'));
});
Notice how I added a class to the anchor links. This can be named almost anything. This gives you the ability to select for those elements with that classname only with jQuery using the $('.any-classname') selector.