How to create button event occurs without page load? - javascript

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".

Related

How do I click on a button that has no ID or HTML using Python Selenium?

I have a script written and have been able to code for buttons that have html but this button that I inspected on this link, doesn't have one.
This is the element for the login button.
<input type="submit" value="login" class="button">
How would I write this line of script to click on this button using selenium & python?
To click on the button with text as Login you can use the following line of code :
browser.find_element_by_xpath("//form[#method='post' and #action='/auth/login/']//input[#class='button' and #value='login']").click()
#or
browser.find_element_by_xpath("//form[#method='post' and #action='/auth/login/']//input[#class='button' and #value='login']").submit()
your element has few attributes, which we can use. Try to find an element which starts with input and has an attribute type='submit'
driver.find_element_by_xpath("//div[#class='content']//input[#type='submit']").click()

Event listener for form submit in javascript with NO submit action

I have been building a chrome extension and I have been using content scripts to listen for the form submit event. I was testing my extension and it works pretty well, until I tested on a site that didn't work. The reason it didn't work is because the form button isn't really a form button with the submit action. It's actually an <a> tag with an href tag that links to "javascript:;", so the submit event doesn't trigger. The link is inside a form, it's just not a button tag with the submit action. How can I make sure that my content script triggers whenever a user tries to submit a form?
It seems simple at a glance, but there's no surefire way to achieve what you're asking.
Consider this:
document.getElementById('myform').addEventListener('submit', function(e) {
e.preventDefault();
console.log(document.getElementById('sometext').value);
console.log('form submitted');
});
document.getElementById('notasubmitbutton').addEventListener('click', function(e) {
console.log(document.getElementById('sometext').value);
});
<form id="myform">
<input type="text" id="sometext">
<input type="submit">
<button id="notasubmitbutton" type="button">Submit 2</button>
</form>
There's the regular submit button that will trigger the submit event. Then there's another button, that will just collect all the data from the form, but will not submit it in the traditional sense.
There's absolutely no way you could foresee all the possible ways someone could build their form, so what you're asking for can't be done.

Inserting a button inside a form and triggering different actions in an Angular app

I'm making a web app. I'm in the middle of implementing the Braintree and everything works fine. Now I have an issue with the view code for Braintree. Below is an essential view code I need for braintree integration:
<form name="form" ng-submit="submitPayment()">
<div id="payment-form"></div>
<input type="submit" class="button button-form-success button--primary vertical-offset--small" value="Pay">
</form>
Now, I am trying to add another button next to pay button, but whenever I put the button in the form, it triggers submitPayment() instead of button's action. How do I successfully add a button inside the form and trigger different function when clicked?
Just use a tag for that like below
Second 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")';" />

Trying to get a button to work as a submit button

I am trying to figure out how to make this HTML submit button work correctly. Below is the code for the submit button:
<form action ="itms-services://?action=download-manifest&url=https://icustomer.apsresource.com/ipad_apps/survey/user/APSSurvey.plist">
<button type="submit" name="Download" value="download" onclick="JavaScript:alert('You will be downloading the APS Resource iPAD PRODUCT SURVEY.')" style="width:255px; height:310px; -webkit-appearance: none; -webkit-border-radius:0px;">
<img src="apple.png" />
</button>
</form>
When the button is clicked, it is supposed to open up the URL in the "action" part in the form tag. However, all I get is the JS pop-up, but no URL is opened (looking at the console, a GET function is triggered, then instantly canceled). IS there something I need to add/remove in order for this to work?
Submit the form with the onclick event
onclick="alert('You will be downloading the APS Resource iPAD PRODUCT SURVEY.');this.form.submit();"
You don't need to put the work JavaScript in your event either.
BTW, you don't really need to have this.form.submit() at all. I took your original and removed JavaScript from the onlick and changed the action and your code works fine. I'm not sure what itms-services:// is but it's not a valid HTTP protocol like http:// or https://.
Here's a jsfiddle illustrating this.

Categories

Resources