How do it have a radio button pass data hidden from url? - javascript

Here is the thing, I have to show a proof of concept, in which I:
Pass data from page to page using the url section and displaying the data passed in another page.
Pass data from page to page NOT using the url section and displaying the data passed in another page.
Meaning I want one of the radio button to behave as: input type="hidden",
But I do not know how to do that, to clarify there is a code snipped below. Any help is appreciated. To clarify, it should not show the value of the radio button in the query string.
<form method="POST" action="Confirm.jsp">
<p>
Choose:
<input type="radio" checked name="QuizType" value="Private">Private
<input type="radio" name="QuizType" value="Public">Public
<br>
<input type="submit" name="submit" value="submit">
</p>
</form>

Your form:
<form id="frm1">
<p>
Choose:
<input type="radio" checked name="QuizType" value="Private" id="radio">Private
<input type="radio" name="QuizType" value="Public">Public
<button onclick="myFunction()">Click</button>
</p>
</form>
Then you can get the selected value with JavaScript:
function myFunction() {
var radios = document.getElementsByName('QuizType');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
// Store the value for the selected radio
// You can maybe redirected on another page and pass this variable
$selectedRadio = radios[i].value
alert($selectedRadio);
break;
}
}
}
Check this Example.
If you want to pass variables to the url then you should try:
window.location.href+'/'+$selectedRadio;
Resources:
Get Radio Button Value with Javascript, Is there a way to pass javascript variables in url?, How to redirect to another webpage in JavaScript/jQuery?

Related

Get values submitted to php from form

Consider the following form:
<form method="get" enctype="multipart/form-data">
<input type="hidden" value="0" name="foo">
<input type="checkbox" value="1" name="foo">
</form>
When submitting the form, the URL ...?foo=0 will be requested if the checkbox is not checked. If the checkbox is checked, the URL ...?foo=0&foo=1 will be requested. In PHP, query string arguments override any previous arguments with the same name, so foo will have the value 1 in the PHP script handling the latter request.
What is the best way to obtain the value foo would have in the PHP script using JavaScript, when not knowing anything about the form? In theory, there could be an arbitrary number of inputs named foo of different types, and I would like to know the value that foo would have in the PHP script handling the request if the form was submitted.
As I understand it, the answer is the value of the last enabled input element named foo. By enabled, I mean that the input element is not disabled and that it is not a button (the button's name and value are not added to the query string unless the button is used to submit the form) or an unchecked checkbox or radio button.
Maybe there is an easy way to get this value using jQuery?
Edit
Loads of people suggest that I rename the input elements to foo[] or similar. I guess I was not clear enough that I actually want all the input elements named foo, and to only receive one of the values in the php script.
My questions is how to determine which value the php script will receive using JavaScript.
use this:
<form method="get" enctype="multipart/form-data">
<input type="hidden" value="0" name="foo[]">
<input type="checkbox" value="1" name="foo[]">
</form>
and in PHP, use:
$params = $_GET['foo']; //params would hold array
it would be good to use.
You can do a loop on the global variable $_GET
foreach($_GET as $key=>$val) {
echo "key = $key , val = $val";
}
if you have multiple inputs with the same name you will need to append []to the name so you can get all the values as a array
<form method="get" enctype="multipart/form-data">
<input type="hidden" value="0" name="foo[]">
<input type="checkbox" value="1" name="foo[]">
</form>
to get the values in jquery you do the following:
$('input[name="foo[]"]').each(function(){
console.log($(this).val());
});
if you only want one value of foo but you have multiple elements with that name you will need to change your logic to using radio buttons
This is really bad design. You should check checkbox state in your php (backend) code. Get rid of the hidden input:
<form method="get" enctype="multipart/form-data">
<input type="checkbox" value="1" name="foo">
</form>
and put this in your php code:
if (isset($_GET['foo'])) {
$foo = 1;
} else {
$foo = 0;
}
If you want to use javascript, you can try this on form submit:
var checkboxValue = $("input[name='foo']").prop("checked");
checkboxValue would be true or false depending on checkbox status.

Get checked elements outside of submitted form with HTML

I have a web page, at the top is a set of radio buttons and a submit button. Here is the code for that:
<form action="/batch" method="POST">
With checked selection you may:
<input type="radio" name="bulk" value="broadcast">Broadcast</input>
<input type="radio" name="bulk" value="unbroadcast">Unbroadcast</input>
<input type="radio" name="bulk" value="delete">Delete</input>
<input type="submit" value="Run batch on checked items" />
</form>
Below that i have a table consisting of a bunch of rows with checkboxes at the beginning. Code for that is:
<td><input type="checkbox" name="{{ md5_name }}" class="box"/></td>
Is there a way to have the form submit a list of what the checkboxes are and whether they're checked regardless of the fact that the checkboxes are not within the form? Perhaps naming it the same or shared class?
While searching around before posting i found the following snippet from this page which looked promising, but i don't know how running it alongside my POST method would work, or how i would include the result in my POST method.
function getRadioValue (theRadioGroup)
{
for (var i = 0; i < document.getElementsByName(theRadioGroup).length; i++)
{
if (document.getElementsByName(theRadioGroup)[i].checked)
{
return document.getElementsByName(theRadioGroup)[i].value;
}
}
}
You could, in the HTML 5 doctype, simply associate those form-elements with a specific form, using the form attribute:
<td><input form="formElementID" type="checkbox" name="{{ md5_name }}" class="box"/></td>
This attribute:
Indicates the form that is the owner of the element1
References:
MDN: HTML Attribute reference.
Bibliography:
HTML forms reference.
You could bind a function to the submit method of the form to retrieve the values of the checkboxes, and add them into hidden fields in the form.
Alternately add the default values of the checkboxes to hidden fields, and bind a change method to the checkboxes to update the hidden field.

Passing values of checkboxes to Perl Script

I have a simple list of checkboxes, which are NOT in a form. On clicking a button, I want to send the values of all selected checkboxes to a perl script. I do not want to make it a form. Am working with ExtJS and thus don't need any jQuery solutions or hints. Any tips to how I do this?
Illustration :
<input type="button" class="check" value="Send" onclick="foo()"/>
<input type="checkbox" name="chk" value="1"/> Checkbox 1
<input type="checkbox" name="chk" value="2"/> Checkbox 2
<input type="checkbox" name="chk" value="3"/> Checkbox 3
On clicking "Send", I want to write the function foo() so that it can pass the selected values to my perl script hw.pl.
EDIT : I understand that I have to send the parameters using the GET method. But after I wrote the JS function, and have the checked values in a JS array, how do I send that array as a GET parameter?
I wrote the following foo() function, but it doesn't work :
function foo(){
var tclist = "";
for(var i = 0; i < chk.length; i++)
if(chk[i].checked)
{ tclist += chk[i].value + ","; }
self.location='/cgi-bin/hw.pl?tcs=tclist';
}
Any help would be greatly appreciated. I am new to CGI scripting.
Change
self.location='/cgi-bin/hw.pl?tcs=tclist';
to
self.location='/cgi-bin/hw.pl?tcs=' + tclist;
But please take a look at the other comments. First off, you should be using a form. Second, why use JavaScript at all? If you stuff your checkboxes in a form, their values will be submitted without any client side scripting.

How to determine which Radio Button is selected in Form with multiple button groups?

I have a form with two groups of radio buttons. They all have the same name, but in the case where a certain type of radio button is selected, I want to change the content before the next submission.
<form>
<input type="radio" value="ahBkM" id="ahBkM" name="key" class="spam">
<input type="radio" value="ahBkA" id="ahBkA" name="key" class="eggs">
<input type="radio" value="ahBkB" id="ahBkB" name="key" class="eggs">
<input type="radio" value="ahBkC" id="ahBkC" name="key" class="eggs">
</form>
If the form is sumitted with the first radio button is selected (class spam), I don't need to do anything special. But if any class eggs button is selected when the form is submitted, then I need to update the DOM with data coming back from the AJAX POST.
I'm looking for a truth conditional on whether eggs was selected for the POST (I can put the conditional in the AJAX success function), and if so then I have some code to run.
if ($('input[name=key].eggs:checked').length > 0){
// an egg group is selected.
}
Something like that?
Search for checked eggs:
$(".eggs:checked").length > 0
Use :checked selector.
e.g:
var checkedRadio = $("[name='key']:checked");
var checkedVal = checkedRadio.val();
if(checkedVal == "eggs"){
//Do Something
} else{
}

Pass Checkboxes values to JavaScript

I am declaring 5 checkbox values in myform with the name as "yourname". On clicking submit button javascript function will be called.
In the JS function, I need to pass this value into parent window.
MyHTML Code is:
<input type="checkbox" name="yourname" value="ankit">Ankit<br/>
<input type="checkbox" name="yourname" value="rahul">Rahul<br/>
.. and more
<input type=button value='Submit' onclick="post_value();">
For Example, Using Below JS Code will print all values to the parent window.
function post_value(){
var yourname = ["ankit","rahul","vipin","abhishek"];
alert(yourname);
opener.document.f1.p_name.value = yourname;
self.close();
}
Kindly Help,
Give id to all your checkboxes and Check which one is checked using
document.getElementById('checkBoxId').checked
This will return you true/false.

Categories