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);
}
});
Related
Is their any possible when on click the button it change to only text and not as a button.
Ex:
I have Invite button for all individual user. What I need is when on click the Invite button, button text need not to change instead button is change to text.
"Invite" button format is change to "pending request" text format along with "cancel" button when on click the button.
Hope it helps, this FIDDLE
if you want to learn more. read more about jquery.
html
<input id="invite" type="button" value="Invite" />
<span id="pending">Pending</span>
<input id="cancel" type="button" value="Cancel" />
script
$('#pending').hide();
$('#cancel').hide();
$('#invite').on('click', function () {
$(this).hide('fast');
$('#pending').show('fast');
$('#cancel').show('fast');
});
$('#cancel').on('click', function () {
$(this).hide('fast');
$('#pending').hide('fast');
$('#invite').show('fast');
});
Try this code :
$('button').click(function() {
$(this).replaceWith("pending request<button>cancel</button>")
})
$("#btnAddProfile").click(function(){
$("#btnAddProfile").attr('value', 'pending request...');
//add cancel button
});
If you have a button like this:
<button>Click me</button>
You can disable it on click with jQuery like this:
$(function() {
$('button').on('click', function(e) {
e.preventDefault();
$(this).prop('disabled', 'disabled');
});
});
See fiddle here:
http://jsfiddle.net/jpmFS/
Or replace it with only text like this:
$(function() {
$('button').on('click', function(e) {
e.preventDefault();
$(this).replaceWith('<p>'+$(this).text()+'</p>');
});
});
I have the following code working with a simple datepicker;
when I click on the button the picker displayed.
I need this to be work with a multidatespicker:
Simple datepicker JS script.
<script type="text/javascript">
$(document).ready(function(){
$('#date').datepicker();
$('#btnRepercute').click(function() {
$('#date').datepicker('show');
});
});
</script>
HTML input fields.
<input type="button" value="Répercuter" class="button" id="btnRepercute"/>
<input type="text" id="date" class="hidden" />
Attempts so far with multidatespicker
$('#date').multiDatesPicker();
$('#btnRepercute').click(function() {
$('#date').multiDatesPicker();
});
Nothing happens, no errors in the console.
Thanks in advance for your help!
First you need to unregister the datepicker event and then attach the multiDatesPicker event , after that focus the element
$('#btnRepercute').click(function() {
$("#date").datepicker( "destroy" );
$('#date').multiDatesPicker();
$('#date').focus();
});
Hope it works fine
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 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());
});
});
I have 2 buttons in HTML form. And both of them should submit the form. I would need to capture which button has been clicked so i can use it to perform different actions based on which button was clicked.
I am able to submit the form with both the buttons but how would i capture which button was clicked in the php file .
<INPUT type="button" name="submit" class="button" class="element_2" value="firstbutton">
<INPUT type="button" name="submit1" class="button" class="element_2" value="second button.. ">
i am using post method in Jquery to submit the form. How can i check which HTML button was clicked in server side php script
You could use a hidden element here, something like this:
<input type="hidden" id="submittedBy" name="submittedBy">
Your current .submit() handler using .serialize() and $.post() should work, just update the hidden field when clicking either button, for example:
$("form :submit").click(function() {
$("#submittedBy").val(this.name);
});
Then in PHP just check that $_POST["submittedBy"] == "submit" or "submit1" to see which caused it.
The alternative is to have the click handler POST and add in the value between .serializeArray() and when $.param() is called, like this:
$("form :submit").click(function() {
var data = $(this.form).serializeArray();
data.push({ name: 'submittedBy', value: this.name });
$.post("myPage.php", data, function(result) {
//do something
});
return false; //prevent normal form submission, even with the .submit() handler
});
Just do this,
HTML
<button type="submit" name="action[update]" value="1">Update</button>
<button type="submit" name="action[delete]" value="1">Delete</button>
PHP
$action = isset($_POST['action']['update']) ? 'update' : 'delete';
You CAN'T depend on JavaScript to tell you wich button was clicked, if user has JavaScript disabled, your form is broken.
You could try using the isset function
if(isset($_POST['submit'])){
echo "first button was clicked";
}
Or to detect the second one was clicked:
if(isset($_POST['submit1'])){
echo "second button.. was clicked";
}
I would capture all the events on the page using:
$(document).click(function (obj) {
if ('equipmentSetup' === obj.target.id) {
$('#form').submit();
}
....
Then add an if statement looking for the "id" of the button you want. Don't use the name or id "submit". I forgot why but I remember it caused problem for me.
You could try changing the buttons to type="button" and give them ids. With that, you can use the jquery line (not able to check my syntax below, but think i've got it right)
$('form button').click(function(){
if($(this).attr('id') = "button1"){ ...button 1 clicked}
..process form here..
});
would that do it?