I have four buttons and three of them have a class called "multiple". the reason for this is they would be worked on by a jquery function.
<input type="submit" id="add" value="Add" <?php set_button_status(1,'is_add') ?>><br/>
<input type="submit" class="multiple" id="publish" name="publish" value="publish"><br/>
<input type="submit" class="multiple" id="unpublish" name="unpublish" value="unpublish"><br/>
<input type="submit" id="trash" class="multiple" name="trash" value="trash" <?php set_button_status(1,'is_delete') ?>><br/>
The set_button_status(1,'is_add') and set_button_status(1,'is_delete') function will return the string "disabled" to disable the add and thrash buttons respectively if the condition is true. However, only the add button is etting disabled.
When I remove the class "multiple" to the other buttons "publish" and "unpublish", the "trash" can now be disabled.
Why can't I disable a button if it has other buttons with the same class? How can I fix this?
I created a fiddle with your code, assuming both .php calls return 'disabled'. It renders both 'Add' and 'trash' buttons as disabled:
<input type="submit" id="add" value="Add" disabled><br/>
<input type="submit" class="multiple" id="publish" name="publish" value="publish"><br/>
<input type="submit" class="multiple" id="unpublish" name="unpublish" value="unpublish"><br/>
<input type="submit" id="trash" class="multiple" name="trash" value="trash" disabled><br/>
I have used the above code in my PC and everything is fine.(Without PHP)
First You put ;(semicolon) at the end of every PHP statement.
And /> instead of just > at the end of every input tag.
Let me know the results after that.
Related
I would like to ask if anyone knows how do you change the color of an input that serves as a submit button, after the form submission. I use twitter bootstrap 3 and any approach would be welcomed. The simplest the better though. In my code I have a form filled with:
<input class="btn btn-default" onclick="document.getElementById('priceform').submit()" name="filter" type="submit" value="Action" style="width:45%;font-size: 12px">
<input class="btn btn-default" onclick="document.getElementById('priceform').submit()" name="filter" type="submit" value="Adventure" style="width:45%;font-size: 12px">
<input class="btn btn-default" onclick="document.getElementById('priceform').submit()" name="filter" type="submit" value="Family" style="width:45%;font-size: 12px">
and many more of the same kind for every game genre there is and they serve as a filter for the results on my product page. Everything works good and I tried to put some color on the button the user applied to filter their results but of course after the form submission the color remains the default. I tried JavaScript, I tried JQuery and still nothing. Thanks in advance.
try adding a id tag to the input. Then you can change the color of the background on the selected input.This is how..
function change(id){
document.getElementById(id).style.background = '#999';
}
To your input add
<input id="action" class="btn btn-default" onclick="document.getElementById('priceform').submit()" onmousedown="change(this.id)" name="filter" type="button" value="Action" style="width:45%;font-size: 12px">
<input id="adventure" class="btn btn-default" onclick="document.getElementById('priceform').submit()"onmousedown="change(this.id)" name="filter" type="button" value="Adventure" style="width:45%;font-size: 12px">
<input id="family" class="btn btn-default" onclick="document.getElementById('priceform').submit()"onmousedown="change(this.id)" name="filter" type="button" value="Family" style="width:45%;font-size: 12px">
Add an ID to the input, then add a function that changes the CSS.Access the function with onmousedown="change(this.id);
I used php super global $_SESSION[ ] to solve this problem. I stored into session the value of the input that was pressed every time and then I applied a style through echoing it.
if (isset($_SESSION['filter'])) {
$_GET['filter'] = $_SESSION['filter'];
$f = $_GET['filter'];
$filter = "AND type = '$f'"; //ignore this part
$bool = true; //and this
echo '<style>input[value="'.$f.'"] {
background-color: #428BCA;
color: white;
font-weight: bold;
}</style>';
}
I have one form on a page with no submit button:
<form id='voteForm' action='xyz' method='post'>
<fieldset>
<input type="hidden" id="task_id" value="{$feature_details['task_id']}" />
<input type="hidden" id="vote_id" value="{$vote['vote_id']}" />
<input type="hidden" id="vote_type" value="{$vote['vote_type']}" />
<input type="hidden" id="vote_rating" value="{$vote['vote_rating']}" />
<input id="btn-update-vote" class="btn btn-sm btn-primary" type='button' disabled="disabled" value="{L('SubmitVote')}">
</fieldset>
</form>
I cannot get jQuery to trap a click event on the 'SubmitVote' button
neither of these appear to work:
$('#btn_update_vote').click(function() {
console.log('Click: #btn_update_vote');
})
$('form#voteForm').on('click', '#btn_update_vote', function() {
console.log('Click: #btn_add_comment');
})
I do not understand what can cause this!
Any help appreciated!
BTW: I CAN set the disabled attribute on the button using jQuery and on 'documentReady' I log the button to the console:
[Log] [ (tracker, line 446)
<input id="btn-update-vote" class="btn btn-sm btn-primary" type="button" disabled="disabled" value="Cast Your Vote">
]
Your button attr disabled="disabled" make it unclickable, even inline onclick listen.
<input id="btn-update-vote"
$('#btn_update_vote').click( //...
You declared your id with dashes (-), not underscores (_), so you need
$('#btn-update-vote').click(
Also #Richer is correct
I am using a form and was wondering if anyone knows some JavaScript that can edit what fields the clear button actually clears?
i.e i only want a select number of fields to be cleared once the user hits the clear button on the form.
input id='FrmReset' type='reset' value='Clear' name='resetButton' onclick='formReset(document.getElementById("Form")); return false;'
I just have the following which clears everything
<input id='FrmReset' type='reset' value='Clear' name='resetButton' onclick='formReset(document.getElementById("Form")); return false;' />
Let's say you have 4 fields like this:
<input type="text" value="don't clear this" id="i1" />
<input type="text" value="don't clear this" id="i2" />
<br/>
<input type="text" value="clear this" id="i3" />
<input type="text" value="clear this" id="i4" />
And you need to clear only bottom 2. Add a normal button with onclick event:
<button onclick="clearNeeded()">Clear only bottom fields</button>
function clearNeeded() {
document.getElementById('i3').value='';
document.getElementById('i4').value='';
}
As you can see - the function selectively picks only specific fields and resets their values.
Demo: http://jsfiddle.net/rdnT3/
I have the following piece of code which deletes a document when the delete image is clicked
<tr> To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="image" name="submit" src="images/delete.gif" alt="DELETE">
</form>
</tr>
Now I want to modify this and change the image to a button and put some basic JS validation so that it asks a confirmation message before deleting.
I have this as my code so far
<tr> To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="button" onClick ="return confirm('Are you sure you want to delete the current project activities document')" name="submit" Value="Delete">
</form>
</tr>
But there is no change/effect in the page when I click this button, Can anyone point out whats happening here? Thanks
Add id="form" to <form>, then
<input type="button" onClick ="if(confirm('Are you sure you want to delete the current project activities document')==1){document.getElementById('form').submit();}" name="submit" Value="Delete">
That's where the rest of the JavaScript comes in... or an AJAX call to a PHP file to perform that task for you. May I give you a couple of pointers? First, give that button element and ID, say id="deleter". Then, to clean up your inline markup, add this eventListener in your <head> section:
<script>
var d = document.getElementById('deleter');
var f = document.getElementByName('delete_attachment_form');
d.onClick = function() {
var yn = confirm('Are you sure you want to delete the current project activities document?');
// Note that the 'confirm' dialog is an obsolete construct
if (yn) {
f.submit();
}
};
</script>
HTML Markup
<tr>To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="button" id="deleter" name="deleter" Value="Delete">
</form>
</tr>
I've the following situation:
I have a "next" step button:
<a href="/NL/checkout/selectshippingaddress?addressId=" class="customNextStep">
<input type="button" class="button-1 shipping-adress-next-step-button" value="Next" name="nextstep">
</a>
This buttons should be inactive in first place. It should only be clickable when a user clicks on a other button:
<input type="button" onclick="" class="button-1 select-shipping-address-button" data-itemid="197" value="Send to this address">
I hope someone can help me out with this issue.
You can use attr() and removeAttr() of jQuery
$("input[name='nextstep']").attr('disabled','disabled');
$('.button-1').on('click',function(e){
e.preventDefault();
$("input[name='nextstep']").removeAttr('disabled');
});
Fiddle example
use the following in your code:
<input type="button" id="bt1" value="button 1" />
<input type="button" id="bt2" value="button 2" disabled="disabled" />
now apply any logic you want, like
$(function(){
$("#bt1").click(function(){
$(this).attr("disabled", "disabled");
$("#bt2").removeAttr("disabled");
});
Make use of disabled attribute of button. Like,
<input type="button" onclick="document.getElementById('next_button').disabled=false;" class="button-1 select-shipping-address-button" data-itemid="197" value="Send to this address">
<input type="button" class="button-1 shipping-adress-next-step-button" value="Next" name="nextstep" disabled='true' id='next_button'>
working fiddle here
Use following :
jQuery('input[name=nextstep]').attr('disabled','disabled')
$('.select-shipping-address-button').on('click',function(e){
jQuery('input[name=nextstep]').removeAttr('disabled')
})
Here is the working demo
You can use disabled attribute to switch on and off a button.
//on document.ready, disable your second button
$(selector).prop("disabled", true);
// on the click on first button enable it again
$(selector_first_button).click(function() {
$(selector).prop("disabled", false);
});