I am using the drop down in webpage and also the submit button to submit the selected value of the drop down.but i don't want to use the submit button. when i select the value from drop down it should re direct the page without using the submit button. can anyone post the code... i was using select and option tag.
See Navigational pulldown menus in HTML for a comprehensive guide, but in a nutshell:
Bind an onchange JavaScript event handler to the select element that calls the forms submit() method
Don't do this, it is a horrible UI.
You need to use JavaScript to perform this operation.
For example, in jQuery, you could do something similar to:
$(function() {
$('#myDropDownId').change(function() {
$('#formId').submit();
});
});
JQuery:
$('#selectId').change(function(){
if ($(this).val())
$(this).closest('form').submit();
});
If you don't want to use jQuery, you can do this with Javascript. Change your select box to look like this.
<select name="NAME" onchange="this.form.submit();">
Related
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
});
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!
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>
I have two forms in my html file. They both submitted by one button. Can I connect both forms with this button? Something like
<button form="firstFormId secondFormId"> Save </button>.
Will it make any sense?
You have multiple solutions to do that, I'd go with javascript, or even better, jQuery, if you're using it.
If you are not using jquery, with javascript you could do something like this:
Place somewhere in the page a "submit" link:
Submit
Assign to each form an unique name, let's say "myform1" and "myform2".
Then include in your page the following:
<script type="text/javascript">
function submitform(){
document.myform1.submit(); // submit form 1
document.myform2.submit(); // submit form 2
}
</script>
Instead of calling an external function, to keep things as simple as possible, after assigning the names to the forms, you could even simply place the following link:
Submit
If you are using jQuery, and I suggest this way, you could simply assign a given class to both forms, let's say "submit-me" and then add to your code:
$('.submit-me').submit()
Of all the above I would definitely suggest the last one, that relies on jQuery. It's easy to maintain, reusable (meaning that it can be applied to any form having the class submit-me, and all the job is done by jQuery.
Note that in all the examples you don't need anymore the "classic" submit button of forms.
Not tested, but I hope it'll do what required! :-)
I have a radiobuttongroup where one button is checked upon pageload, is it possible to get some kind of onClick event to fire from that radiobutton upon pageload if it's checked?
I dont whant to use some kind onLoad JavaScript to check it.
$('.radioButton:checked').live('click', function(){
// do something
});
If I understood what you need, you could try something like this (jQuery):
if($('.radioButton').is(':checked')) { $('.whatever_must_be_clicked).click(); }
for the first selector, you can also use the :radio selector $(':radio') or $('input:radio')