Auto select radio button and then submit button on page load - Javascript - javascript

I'm trying to select a radio button with an id (lets say the ID is "radio") and then automatically click a button with a type of submit inside of a form with an id of "multifee". I want these two things to automatically happen upon page load. Any suggestions on how to do this with javascript?
<form method="post" action="#" id="multifees" onsubmit="feeForm.submit(this); return false;">
<input type="radio" name="fee[1][options][]" id="radio" value="1" class="validate-one-required-by-name">
<button type="submit" class="button">Add</button>
</form>
So far I have no javascript started because I'm not even sure where to begin.

When declaring your radio button, you can add the attribute checked so that it is autoselected even when the page loads.
<input type="radio" name="fee[1][options][]" id="radio" value="1" class="validate-one-required-by-name" checked>
If you want to auto-submit, you can just make Javascript click for you.
<script type="text/javascript">
document.getElementById('sumbit').click();
</script>
If you want the script to work, you have to place the script after <body> so that the element can been loaded onto the page or else it won't know what button to look for since it may not have been loaded yet. Make sure to give your submit button an id as well.

$('#radio').check();
$('#submit').click();
EDITS: with javascript
document.getElementById('radio').checked=true;
document.getElementById("multifees").submit();

In pure Javascript try this in a window.onload handler:
document.getElementById('radio').check();
document.getElementById('submit').click();

Based on what you're asking for, there are really only a couple things you need.
A radio list which one is preselected:
<form name="thisForm" id="thisForm" method="post" action="[your destination]">
<input type="radio" name="choice1" value="choice1" checked /> choice<br />
<input type="radio" name="choice1" value="choice2"/> choice2<br />
<input type="radio" name="choice1" value="choice3"/> choice3<br />
</form>
And a Javascript function to submit the form:
<script type="text/JavaScript" language="JavaScript">
function submitForm() {
document.getElementById("thisForm").submit();
}
// submitForm();
</script>
I have the call to the function commented out on purpose, or you would throw you page into an infinite loop.

You can check the radio button (#radio) like so:
document.getElementByID("radio").checked = true;
Or actually within the html using the checked property:
<input type="radio" checked>
To auto-submit:
document.getElementsByClassName("button").click();
Or:
document.getElementByID("multifees").submit();

Related

Redirect a user on form submit based on a value in a radio button in the form

I need to make a simple form that is submitted using javascript to redirect a user to the correct page.
It has a list of radio buttons, and on submit I need to redirect the user to a page URL specified for each radio button.
Looking something like this:
I found a javascript using jquery to do this, but that is triggered on a radio button click. I need to have a submit button.
I thought is would be easy to do, and probably is, but somehow I can not find the solution.
This is the code I play with (I found the code elsewhere on SO, and this works. But there is no "Submit" button.):
I value the most:
<form>
<input type="radio" name="redirect" value="http://example.com/food"><span>eating food</span><br>
<input type="radio" name="redirect" value="http://example.com/kids"><span>play with my kids</span><br>
<input type="radio" name="redirect" value="http://example.com/fishing"><span>go fishing</span><br>
<input type="radio" name="redirect" value="http://example.com/stackoverflow"><span>answer StackOverflow questions</span><br>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$('input[type="radio"]').on('click', function() {
window.location = $(this).val();
});
</script>
I should probably be able to use this: https://api.jquery.com/submit/ BUT I haven't understood how to both trigger the submit and get the correct radio value at the same time, and then redirect.
Can I use the above code somehow, or do I need to make this with a totally different approach?
I tried with this:
I value the most:
<form id="mychoice">
<input type="radio" name="redirect" value="http://example.com/food"><span>eating food</span><br>
<input type="radio" name="redirect" value="http://example.com/kids"><span>play with my kids</span><br>
<input type="radio" name="redirect" value="http://example.com/fishing"><span>go fishing</span><br>
<input type="radio" name="redirect" value="http://example.com/stackoverflow"><span>answer StackOverflow questions</span><br>
<input type="submit" value="Go">
</form>
<script>
$( "#mychoice" ).submit(function( event ) {
window.location = $('input[type="radio"]:checked').val();
});
</script>
The idea was to open the window location with the value I get from the checked radio button. This might be totally wrong way to do it. Didn't work... :-)
Your selector is a bit off. Try the following:
$('input[name="redirect"]:checked').val();
This JSFiddle might help:
https://jsfiddle.net/yufnuwc6/2/
You can give this a try
$( "#mychoice" ).submit(function( event ) {
event.preventDefault();
window.location = $('input[type="radio"]:checked').val();
});
use button instead of submit
<input type="button" id="submit" value="Go">
</form>
<script>
$( "#submit" ).click(function( event ) {
window.location = $('input[type="radio"]:checked').val();
});
</script>

Making radio buttons that are named differently, act as if they were in a group

I have a dynamically generated form - within it are multiple fieldsets with their own elements. Among those is a radio button. Here's a simplified snippet:
<form name="ePIC" method="post" action="test.php">
<fieldset>
<input type="radio" name="pic[1]" />
</fieldset>
<fieldset>
<input type="radio" name="pic[2]" />
</fieldset>
<input type="submit" name="submit" value="test" />
</form>
Basically, in the fieldsets are pictures and the radio buttons are to select the cover picture for the album.
Everything is working great except the fact that, because the radio buttons are named differently, they won't act as a group - meaning, multiple radio buttons can be selected at once.
Can anyone tell me how to make the radio buttons act as a group, probably with javascript/jQuery?
I started trying to manage the buttons by class - but got lost along the way as to how to affect all the other radio buttons, at the click of one.
This jQuery code will remove the [n] part of all the radio button names, so all the buttons with the same name prefix will be grouped together.
$(":radio").attr('name', function(i, name) {
$(this).data('orig-name', name);
return name.replace(/\[.*\]/, '');
});
Use this submit handler to put back the original names with the indexes when the form is submitted.
$("form").submit(function() {
$(this).find(':radio').attr('name', function() {
return $(this).data('orig-name');
});
});
You better use same name, but if you can't:
$('input[type="radio"]').change(function(){
// Deselect all
$('input[type="radio"]').attr('checked', false);
// Select current
$(this).attr('checked', true);
});
If you use the same name for both radio button, only one will be allowed to be selected. Take a look at the code below.
<form name="ePIC" method="post" action="test.php">
<fieldset>
<input type="radio" name="pic" value="1" />
</fieldset>
<fieldset>
<input type="radio" name="pic" value="2" />
</fieldset>
<input type="submit" name="submit" value="test" />
</form>
You need to create them with the same name but you can assign them different values with the value attribute.

Submit button values not being passed with Ajax

I have the following ajax code which submits name/email/message parameters to "messageaction.cfm" template and displays those same 3 parameters on original submission page (works fine):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
function submitForm() {
$.ajax({type:'POST', url:'messageaction.cfm', data:$('#ContactForm').serialize(), success: function(response) {
$('#ContactForm').find('.form_result').html(response);
}});
return false;
}
</script>
<form id="ContactForm" onsubmit="return submitForm();">
Name: <input type="text" name="name" value=""><br>
Email: <input type="text" name="email" value=""><br>
Message:<br> <textarea style="width: 200px; height: 100px;" name="message"></textarea>
<br>
<input type="submit" name="Choice" id="Choice" value="One">
<input type="submit" name="Choice" id="Choice" value="Two">
<div class="form_result"></div>
</form>
However, I have 2 submit buttons (corresponding values of "One" and "Two") and would like to be able to detect which one was pressed. In a normal submit form (without ajax), the variable "Choice" is diplayed correctly with the corresponding "One" or "Two" depending on which button I clicked. But in the ajax form, the "Choice" variable only displays the same "0" (default value) regardless of which button I press.
I have tried 2 other ajax form variations but cannot seem to pass the value of the input submit button value. There must be something really basic I'm doing wrong but have tried just about everything I can think of. Any suggestions would be highly appreciated!
Since id is unique and name attribute should be unique in the same form as well, you should change:
<input type="submit" name="Choice" id="Choice" value="One">
<input type="submit" name="Choice" id="Choice" value="Two">
to:
<input type="submit" name="ChoiceOne" id="ChoiceOne" value="One">
<input type="submit" name="ChoiceTwo" id="ChoiceTwo" value="Two">
and try again with your AJAX code. Make sure you target it properly this time :)
At the time of the submit event, jQuery.serialize() does not know which button was clicked, so it is likely skipping those buttons when generating the form data.
You'll have to process the click events for each button as well and manually pass the button value.
An alternative would be to set a hidden form field value when the user clicks a button since a button click event will get processed before the form submit.

validate field in javascript and jquery

I have four radio buttons. If I select the last radio button then one textbox is appearing. I handled this scenario by jquery. Now I want to validate in such a way that if user gets this textbox means if user checked the last radio button, then he should provide some text.But in my case, if I check any one of the radio button, its telling to provide some text. The code is like:
<input type="radio" name="bus_plan" id="smallBtn" value="1" />1
<input type="radio" name="bus_plan" id="smallBtn" value="2" />2
<input type="radio" name="bus_plan" id="smallBtn" value="3" />3
<input type="radio" name="bus_plan" id="smallBtn" value="Promotional" />
<span class="plantxt"><a style="cursor:pointer;" onclick="popup('popUpDiv')">Promotional Plan</a> (Please enter a promotional code)</span>
<div class="reg-line" id="pr_code_id" style="display:none">
<div class="reg-linea" align="left">Promotional Code: <sup>*</sup></div>
<input type="text" name="bus_prcode" id="bus_prcode" class="reg-line-input" value="Promotional Code" onblur="if(this.value=='') this.value='Promotional Code'" onClick="if(this.value==this.defaultValue) this.value='';" />
<br />
<div>
<div id="promotionalbox" style="display:none;font-size:13px;clear:both"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:radio[name=bus_plan]").click(function(){
var values = $(this).val();
if(values == 'Promotional'){
$('#pr_code_id').show();
}else{
$('#pr_code_id').hide();
}
});
});
</script>
and in js if I alert the value of document.getElementById('bus_prcode').value then always it is showing Promotional code, which is only for last radio button value.
Your code is a bit of a mess which is the root of this problem. Remember, one element per ID.
You may also find it helpful to look at jQuery .is(), for example:
$('input[value="Promotional"]').is(':checked')
n.b. I do not suggest the above, you should use identifiers in the appropriate way first.
Also worth noting that your code works fine for me using Chrome. See an example (which I have expanded for you) here: http://jsbin.com/ofujal/3/
You should not have an element with the same ID (your radio buttons). Also, you're getting the textbox by running document.getElementById('bus_prcode') and not the radio button. You should give a unique ID to your last radio button, e.g. btnPromotional, then bind click to it:
$("#btnPromotional").click(...)

How can Javascript mask whether radio button is checked?

Is it possible with Javascript to hide the checked-status of a radio button so that on a form submit the submit-request fails b/c of missing information?
For example: I have a group of radio buttons
<form action="?modul=daDaaaah&subModul=someCoolThingy" method="post">
<input type="radio" name="mygroup" id="nod_1" value="great" />
<input type="radio" name="mygroup" id="nod_2" value="greater" />
<input type="radio" name="mygroup" id="nod_3" value="awesome" />
<input type="radio" name="mygroup" id="nod_4" value="junk" />
<input type="radio" name="mygroup" id="nod_5" value="foo" />
<input type="submit" name="edit" value="Edit" />
</form>
Now I am checking the radio button with the id=1 and by submitting it (dunno whether I got the button correct, but I sorta guess it is correct) the server should get a request where it says mygroup=great (right?).
Now is there a way to have that radio button checked and hidden it at the same time?
I am asking b/c somehow a javascript I am using is supposedly hiding this status (everywhere but in IE) by somehow altering the DOM or what do I know and I can't seem to get the right request nor find the reason why or how it does it.
If I am being unclear, please say so.
EDIT: One javascript that has this effect can be found here http://www.frequency-decoder.com/demo/table-sort-revisited/js/paginate.js but others do so as well :(
EDIT: Changed ID-names. Still doesn't work.
One thing is you can not have ids that begin with a number. So your radio buttons should be something like rad1, rad2, etc.
If the radio has disabled="true" then the value will not be present in the request so you could check for that.

Categories

Resources