Change form submission URL based on button clicked - html

i want to use a button as a link to another page. i have looked around and read some solutions but none worked. i dont want to use action in my form tag because i might want to have couple of buttons as links in that form tag.
here is what i have tried last:(didnt work)
<button onclick="location.href='../ClientSide/Registration/registration.aspx'">register</button>
what am i doing wrong? or is there a better/other way?
i really would like to use only html if possible, if not then to use: javascript or asp.net( i dont know jquery or php)

You cannot do this directly using only HTML.
You have two options:
Option 1 Post the data to a single script on the server that decides what to do based on which button is clicked.
<form action="/some-url.aspx" method="post">
<button name="button_action" value="register">register</button>
<button name="button_action" value="another">another</button>
</form>
Then your script at /some-url.aspx would decide what to do next based on the value of button_action.
Option 2 Use JavaScript to change the form's action attribute based on which button is clicked.
<form id="form-with-buttons" action="/some-url" method="post">
<button id="register-button" data-url="/some-url.aspx">register</button>
<button id="another-button" data-url="/another-url.aspx">another</button>
</form>
<script>
$("#register-button, #another-button").click(function(e) {
e.preventDefault();
var form = $("#form-with-buttons");
form.prop("action", $(this).data("url"));
form.submit();
});
</script>
Option 1 is more accessible but requires some messiness on the server side. Option 2 is fairly clean but requires JavaScript and a little messiness to work. It really depends on where you want the extra logic and how you feel about the accessibility of your form.

use jQuery on you page and this code
$(function(){
$("button").on("click",function(e){
e.preventDefault();
location.href='../ClientSide/Registration/registration.aspx';
})
});
e.preventDefault() makes form NOT SUBMITING

Use the formaction="url" tag on the <input> or <button>, as per: https://css-tricks.com/separate-form-submit-buttons-go-different-urls/

A simple answer would be wrapping the button inside anchor
<a href='../ClientSide/Registration/registration.aspx'>
<button>Click Here</button>
</a>

Related

button will not onclick correctly and I cannot figure out why

So the idea is just to have this switch pages to "explore.html" when it clicked but I've been trying to get it to work for hours and it won't. I've tried changing it to a "href=()" and it didn't work either. Do I just write it as an instead of a ?click here to see the code I'm having trouble with...
You are doing it wrong, As on click function you are giving a link directly which is not the correct syntax for on click, you need to apply the window location for it where you want to redirect, here is the code for the button to redirect, and if you want to use href then you need to use anchor tag and need to apply a css to same to make it like button
<button onclick="window.location.href='/linktoredirect'">Continue</button>
href using anchor tag
Continue
Or you can use like following
<form method="get" action="/linktoredirect">
<button type="submit">click</button>
</form>
Hope this will work for you
Just replace your onclick as follow
From :
onclick="explore.html"
to
onclick="window.location = 'explore.html'"
onclick is an event. If you want to redirect other page then use "href".
example:
link text

HTML button which can display webpage cookies

I am trying to make an HTML button, which when pressed can display the current webpage's cookies.
I know how to read/directly show the cookie via
<script>javascript:alert(document.cookie)</script>
I am trying to find a way to do this through a button.
<button onclick="showCookie()">Show cookies</button>
<script>
function showCookie()
{
alert(document.cookie);
}
</script>
Hope this helps
You can use 'onClick' property of the button to attach an event and get cookies.
<button onClick="alert(document.cookie)">Test</button>
Write a javascript function:
<script> function showCookie() {alert(document.cookie);}</script>
and use the onClick event on HTML button element:
<button onClick="showCookie()">Click me</button>

Is there a way in HTML (or ColdFusion) to have a radio button trigger a hyperlink without having to submit a form?

I want to have a pair of radio buttons sitting over an HTML table so that whenever the rb is clicked it will cause the table to rebuild (rebuild the page) by submitting a different URL variable. Is there a way to do this without having to build a form and click a submit button? I'm pretty new to this stuff so please keep any answers basic and/or show samples of code. Thanks!
Html is a Markup Language it will not do the logic for you. that way javascript is there .
<input id="gotogoogle" type="radio" name="name" value="google" checked>
<script>
var radiob = document.getElementById("gotogoogle");
radiob.addEventListener("change", function() {
if(radiob.value == "google")
{
document.location = "http:\\www.gooogle.com"
}
});
</script>
Yes there is, you can use Javascript event binding to help you achieve this. This will get you started. This adds an event binding so when you "change" or click the radio buttons, it can fire an event off.
From here you'd need to research how to rebuild the table data in JS if you don't already know.
$("input[#name='nameofinput']").change(function(){
// Do something interesting here
});

How to disable a button after onclick event?

I want to disable this button after the onclick function, so either change the z-index, or disable the button, any ideas?
<button id ="a" type="button"
onclick="window.open('https://www.google.ca')"
>
Thanks.
You need to add this.disabled=true after opening the window.
<button id ="a" type="button"
onclick="window.open('https://www.google.ca'); this.disabled=true;"
>
Code above needs 'disabled' instead of 'disable.' Try this:
<button id ="a" type="button"
onclick="window.open('https://www.google.ca'); this.disabled=true;"
>
The approach is that you should create a script contain function that does two jobs:
make that button disable using selectById() and adding attribute disabled
then window.open()
i would take a look at jquery
https://api.jquery.com/click/
$( "#a" ).click(function() {
// do your stuff opening a page etc
$( "#a" ).prop("disabled",true);
});
edit:// take Rohit Saxena's approach
this is my first time posting, so forgive a noob if I don't get the format correct. I needed to be able to easily turn a button on and off to 'guide' the user to perform actions in the correct order, and this post helped me in that journey, although I only used part of the answer. I made two functions 'enableClick()' and 'disableClick()', where the parameter is the id of the button, eg: 'enableClick("betButton")' Here is the code:
function disableClick (elementId) {
const x = document.getElementById(elementId);
x.disabled = true;
}
I'm learning js, so everything I'm doing is vanilla at this point on purpose, but it's still fairly simple - obviously, with the enableClick function, the value of x.disabled would be 'false'. These functions can be added inside a function called by a click, after the initial click functionality is complete, so that the button can't be clicked again until the opposite function is called.. love this stuff!

How can I change a button from going to the next page to doing some code?

I am new to perl/html. This is from a perl file. This button is in there right now:
<button id = "button1" name = "submitButton" type="submit">
<span class="right">Submit</span>
</button>
I don't see any piece of code where submitButton or button1 is given any logic so I don't understand why this jumps to the next page. Can someone explain?
EDIT: This seems to be the only javascript in the whole file...
<script type="text/javascript">
% $m->comp('../js/share.js');
</script>
I looked at the file, and it doesn't seem to do any redirecting or anything.
Often event handlers are hooked up at run-time using JavaScript. If there is an included script, look in the code for "button1" and see which function is hooking it up.
Also since this is a SUBMIT button, if it is wrapped in a form, no code needs to hook this up. It will post to whatever is defined in the form's ACTION property.
Maybe there is some JS/Jquery or another js-framework included to the page?
Since this is a submit button, it does the logic defined by the Form that surrounds it.