Mozilla automatically adding disabled="" as button attribute - javascript

I have issue I'm making asp .net application any on my view page I got problem.
When I run application in Chrome everything works perfect, but when I run it in Mozilla it just somehow add's disabled="" on my button - when I see page source attribute is added.
Here's my button code:
<button class="btn btn-warning btnBid" value="Bid" type="button" id="#Html.Raw("btn" + item.IDAuc)">
Bid
</button >

I still don't know why this happened, but as one solution I've called initialize() function in JavaScript in which I've just set all buttons' class to be btn and simply just call:
$(".btn").prop("disabled", false);

Related

onclick="location.href='manaliPackages.html'" not working

I want to link my button with another page. I am using the code given below to do so.
<button type="button" value="button text" class="commonBtn"
onclick="location.href='manaliPackages.html'";> View Variations</button>
But it is not working... Why not?
Your code should work just fine
(I'm assuming manaliPackages.html is a file in the same directory as the html file holding your code.)
For example: link/to/your/html/file.html contains the following:
<button type="button" value="button text" class="commonBtn"
onclick="location.href='manaliPackages.html'";> View Variations</button>
Clicking this button would open: link/to/your/html/manaliPackages.html
Also, it is considered bad practice to use inline code, you should consider adding an event listener instead.
Please provide a snapshot of your browser console

Click button in webpage with Javascript

Currently, I'm doing an application and I need login to this one particular website. Basically, I need to make this button click using a javascript but I have no idea how to.
This is the button code I retrieved from the website:
<button type="submit" class="uk-width-1-1 uk-button uk-button-primary uk-button-large">Sign in</button>
Thank you for your help in advance
You can click on the button programmatically, in case of pure javascript :
(function(){document.querySelector('button[type="submit"]').click();})()
In case of Android JS Interface :
webView.loadUrl("javascript:(function(){"+
"l=document.querySelector('button[type=\"submit\"]');"+
"e=document.createEvent('HTMLEvents');"+
"e.initEvent('click',true,true);"+
"l.dispatchEvent(e);"+
"})()");
The general way to have button click events is to use something like jQuery. For example lets set the button to have an ID
<button id="my-button" type="submit" class="uk-width-1-1 uk-button uk-button primary uk-button-large">Sign in</button>
Then we would apply a click event to it with jQuery
$('#my-button').click(function(){alert('button has been clicked');})
Instead of the alert you could put whatever code you want in there :D
Example: Codepen example
EDIT: Example for a class:
Example for a class
(Note that we use a "." instead of "#" in the call)
-Kyle

How to create button event occurs without page load?

I am working on an asp.net application where I have button written like this:-
<button onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>
I have also a client-side javascript function for the above button:
<script type="text/javascript">
function imagech() {
alert('image clicked.');
}
</script>
What I want that is whenever I click that function then the button click event should not fire page-load. The above object is not server control but it's event occurs page-load. I can also use another html control like this:
<input type='button' onclick='javascript:cartclicked(this);' value='X' class='close_product color_dark tr_hover' />
and this does not occurs page-load but I want icon also used as :
<i class='fa fa-times'></i>
inside <button> tag. but the <i> tag is not used in <input> tag. How I can <button> tag event without any page-load? Please help me someone here.
it seems you are using <button> inside a <form> element. By default a button acts as a submit button and it tries to submit your form on click.
In order to continue using button and avoid this issue you need to specify type as button as shown below
<button type="button" onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>
If I understand you correctly the problem is that the button is inside a form (The main asp.net form) and the click event post the form to the server. That's why you the page load occurred.
The solution Just add to the button (it doesn't matter if you are using input or button) attribute type="button".

Button not executing window.location

Im actually having a problem with html5 button in visualforce pages. I have a requirement where when i click on a button, it should redirect to a certain page (user do not want link). For some reason which i don't know, the function i'm executing do not work with HTML5 button (in fact the page only refresh but do not redirect) but when i use input of type button, the function is executed as expected.
I want to use the html5 button as there are some specific css already defined for button in the plugin im using. Find below codes for my button and javascript function :
<button class="butt" onclick="newContact()" >Nouveau</button>
<script type="text/javascript">
function newContact(){
window.location = "/apex/VFP01_NewContact";
}
</script>
What did I do wrong here, and what is the limitation of html5 button ?
Got to know the answer. In visualforce page, the html5 button execute a submit of my form. A way to prevent this, was to specify the attribute type="button".
You really have two options.
You could consider wrapping a element with an anchor tag that points to the URL that you want to target as seen below :
<!-- Target the "YourAction" action in your "YourController" controller -->
<a href='#Url.Action("YourAction","YourController")'>
<input type="Button" id="mybutton" name="url button" value="Next" />
</a>
or you could handle this purely through Javascript and perform your navigation that way :
<!-- The onclick event will trigger a Javascript call to navigate -->
<input type="Button" id="mybutton" name="url button" value="Next" onclick="window.location.href='#Url.Action("YourAction","YourController")';" />

Javascript confirmation in play framework scala templates

I was wondering if there is a way to use a traditional javascript confirmation box with the scala html templates in the play framework.
#for(item <- listItems) {
<li>
<b>Item: </b>#item.name<br>
#form(routes.Application.deleteItem(item.id)) {
<input type="submit" value="Delete" class="btn btn-danger">
}
</li><br>
}
That is the view I am working with at the minute. As you can see from the code it brings up list of "item" objects and a delete button appears beside each of them. I just wanted to prompt some sort of confirmation dialog before the deleteItem method actually gets called.
I know how to do this with some standard HTML and javascript but thats only for modifying html elements, is there away to do this using the play form helpers?
Thanks
Why not? :)
Actually I think you don't need to use single field form for this task, you can just use common link (of course it should point to GET route, also consider adding some hash to params, to prevent accidental deleting):
<a href="#routes.Application.deleteItem(item.id)"
class="btn btn-danger" onclick="return confirm('Are you sure?');">Delete</a>

Categories

Resources