Radio buttons to new page - javascript

Hey guys sorry to ask this, but I am stumped, I want the code to go to the pages with the action when the radio button is clicked, like stupid radio button to stupid.php here's the form
<form name = "quoted" method="get">
<input id = "poster" type="text" name="poster" required="required" placeholder = "Credited Individual.">
<br>
<textarea class = "actual_quote" name = "actual_quote" required="required" placeholder = "Write the question here!"></textarea>
<br><br><br>
<div class = "checkboxes" required="required">
<h3 style = "margin-top:-20px;">Please select one catagory that the quote falls into.</h3>
<label for="x"><input type="radio" name="x" value="stupid" id = "x" checked="checked" action = "stupid.php" /><span>stupid</span></label>
<br>
<label for="x"><input type="radio" name="x" value="stupider" id = "x" action = "stupider.php" /><span>stupider</span></label>
<br>
<label for="x"><input type="radio" name="x" value="stupidest" id = "x" action = "stupidest.php" /><span>stupidest</span></label>
</div>
<input id = "submit1" type="submit"><br>
</form>
and here's the php on each of the pages, stupid, stupider, and stupidest, the php error is saying that actual-quote and poster are not identified indexes, help?
<div class="wrapper">
<div class="submissions">
<div class="logo-logo"><h2>Question.</h2>
<div class="checkboxes"><?= !empty($_GET['x']) ? $_GET['x'] : '' ?>
</div>
</div>
<div class="top-submit"><?php echo '“' . (!empty($_GET['actual_quote']) ? $_GET['actual_quote'] : '') . '”'; $actual_quote = $_GET['actual_quote'];?>
</div>
<div class="poster"><?php echo "-" . (!empty($_GET['poster']) ? $_GET['poster'] :''); $poster = $_GET['poster'];?>
<div class = "like">
Like
<p id = "like" style = "color:green;">0</p>
</div>
<div class = "dislike">
Dislike
<p id = "dis" style = "color:red;">0</p>
</div>
</div>
<?php
"INSERT INTO submissions(top-submit, poster)
VALUES ($actual_quote, $poster)";
?>
</div>
</div>
I am sorry to ask, but I have been trying for an hour and I have run out of ideas. Any suggestions is GREATLY welcomed.
Just to clarify, I want each of the radio buttons, when selected, to a new page once they click the submit button, i want to have them check one radio option, and then click submit and be directed to the page.
v

DEMO
<label for="x"><input type="radio" name="x" value="stupid" id = "x" checked="checked" action = "stupid.php" /> <span>stupid</span></label><br>
Based on your radio buttons,
$("input[type=radio]").click(function() {
window.location.href = $(this).attr("action");
});
So when the user clicks on any one of the radio buttons, the click handler will take him to the respective page mentioned in the action attribute.
In case if you want to redirect only if the radio button is checked and not when its unchecked, use if($(this).is(":checked")) to check the condition

I fail to understand why are you not using anchors for redirecting instead of messing up with inputs. If you use anchors, then you don't need any custom attributes of action on inputs.
Moreover if you have a form then why not simply use it's action attribute for the purpose. And in the backend you can handle the redirect easily instead of relying on the javascript redirect.
Still, if you want to use inputs for navigation and redirecting and since you didn't mentioned anything about jQuery, I assume you need pure Javascript solution. You can use inline javascript in the inputs like:
<label><input type="radio" action="http://www.google.com" onclick="window.location.href=this.action;" />Google</label>
If you need a jQuery solution, refer to the solution provided above by mohamedrias.

Are you trying to post values to different php files based on the selection of radio button. If yes, I think you can achieve the same using jquery.
$("input[type='radio']").click(function(){
$("form").attr('action',$(this).attr('action'));
});
The above code will add click event handlers to all the radio buttons. When the user clicks the radio button, the action property from the radio button will be set to the form. When the form is submitted, it will be calling the php file set in the action property of the currently selected radio button

Related

Edit data from database in form when using radio button

I have a database with some information which i then show using php and javascript
If i click on edit a javascript form opens up and i can edit the shown information. This all works great but instead of an input field (in which i show the data currently inside of the database) i would like to use a radio button.
So i need to make a radio button with the values Yes and No and if the information inside the database = 0 i want to show no and 1 to show yes
When using an input field i see yes or no (depending on what is stored inside the database) how can i use a radio button in this scenario.
my input field looks like this
<input type='text' class='input' name='test_" +id+ "' value='"+test+"' />
Considering you have html like this:
<form name="yesnoform">
<label for="no">No</label><input value="no" type="radio" name="yesno" id="no"/>
<label for="yes">Yes</label><input value="yes" type="radio" name="yesno" id="yes"/>
</form>
you can use this code to select correct radio button:
var fromDB = 0;
document.yesnoform.yesno[fromDB].checked=true;
If you want yes radio button first:
<form name="yesnoform">
<label for="yes">Yes</label><input value="yes" type="radio" name="yesno" id="yes"/>
<label for="no">No</label><input value="no" type="radio" name="yesno" id="no"/>
</form>
then use this:
var fromDB = 0;
var value = fromDB === 0 ? 1 : 0;
document.yesnoform.yesno[value].checked=true;
Here is JSBin: https://jsbin.com/fijiteruba/edit?html,js,output
Hope this helps.

Changing yes/no value in database, on click of hyperlink

sorry about my limited coding skills and so on, but hopefully you can see what I am attempting. I want to scrap the form checkboxes and have 2 simple 'yes' 'no' hyperlinks, dependant on if image is hidden or shown. Will javascript do this? This is what I have so far, which was working but like I say, I just want 2 links instead of checkboxes.
if ($_POST['option']) {
if ($_POST['option'] == 'yes') {$hidden = 0;}
if ($_POST['option'] == 'no') {$hidden = 1;}
#mysql_query('UPDATE Image SET Hidden = ‘.$hidden.’ WHERE ID = '.$image->ID.'');
header ('Location: ' . $_SERVER['REQUEST_URI']);
exit;
}
<p>Show image?
<form method="post" action="?">
<input type="checkbox" name="option" value="yes">Yes
<input type="checkbox" name="option" value="no" >No
<input type="submit" name="submit" value="Go!" />
</form>
So then I can have HTML such as -
Show Image? Yes / No
(This image is shown) or (this image is not shown)
Any points in the right direction would be greatly appreciated, Many thanks!
Hi Guys, Sorry, I don’t think I explained myself properly.
All images have a default value of ‘Hidden = 0’ in the image database table, so they are all currently shown on the page. Here is the code -
// there is some SQL here that fetches all images
// here is the actual code that shows images:
foreach($ids as $id)
{
$tmp = new Image($id,true);
if (!$tmp->ID) continue;
<p>
<img src=”/myurl/’.$tmp->ID.’.jpg”>
</p>
}
What I want is, in that loop, underneath each image tag, is to have some HTML :
<p>Show Image? Yes / No </p>
I want the ‘yes’ and ‘no’ to be hyperlinks, which state will depend on the images ‘Hidden’ value.
So if the image is shown (all currently are), the word ‘Yes’ won’t be a clickable hyperlink, only ‘No’ will be.
If I then click ‘No’ I need it to post a query on click, to set Hidden = 1, to hide the image.
If the image is already hidden, then ‘Yes’ would be the only clickable link, which if clicked would post value Hidden = 0, so the image is shown.
I hope that makes sense. The other problem I have is the fact that there are multiple images, so the form or whatever system I use, needs to distinguish which image it is changing the Hidden value for.
In the code, the image’s unique id field is accessed like this: $tmp->ID
If you want hyperlinks just use something like
Yes
No
Also you will probably want to use single quotes ''s and not ‘'s for your query. Also I'd recommend using mysqli or PDO so you can use prepared statements instead of mysql_ functions which are prone to mysql injections.
Easiest way would be to use a hidden input field that will be submitted with the rest of your form and using javascript to change the value of that hidden field.
HTML:
<p>Show image?
<form method="post" action="?">
<input type="hidden" name="option" value="default" />
Yes
No
<input type="submit" name="submit" value="Go!" />
</form>
JS (requires JQuery):
$(".option").click(function (e) {
$("input[name=option]").val($(this).attr("data-value"));
});
Then when you submit the form $_POST should have the "option" value.
Try this
if(isset($_GET['cmd']))
{
if($_GET['cmd']=='yes')
{$hidden = 0;}
if($_GET['cmd']=='no')
{$hidden = 1;}
#mysql_query('UPDATE Image SET Hidden = '.$hidden.' WHERE ID = '.$image->ID.'');
header ('Location: ' . $_SERVER['REQUEST_URI']);
exit;
}
?>
<p>Show image? <br />
Yes <br /> <!--Replace page url according to yours -->
No
Just to reaffirm, the following form is my latest revision and works perfectly, updating the database and radio buttons on the page. However, it is still not the solution I want. I want hyperlinks only, as in the above examples posted by Boshi and Class, but for some reason my site won't accept those urls, the system churns me out to a different page and nothing works.
Here is the latest revision which works. Is there another solution? -
if ($_POST[''.$tmp->ID.'']) {
if ($_POST[''.$tmp->ID.''] == 'yes') {$hidden = 1;}
if ($_POST[''.$tmp->ID.''] == 'no') {$hidden = 0;}
#mysql_query('UPDATE Image SET Hidden = '.$hidden.' WHERE ID = '.$tmp->ID.' LIMIT 1');
header ('Location: ' . $_SERVER['REQUEST_URI']);
exit;
}
<p>Hide image?
<form method="post" action="?">
<input type="radio" name="'.$tmp->ID.'" value="yes" '.($tmp->Hidden ? 'checked' : '').'>Yes
<input type="radio" name="'.$tmp->ID.'" value="no" '.(!$tmp->Hidden ? 'checked' : '').'>No
<input type="submit" name="submit" value="Go!" />
</form>

Unchecking a radio box without use of id's

I'm setting up a table, where each row will contain several radio boxes. There are certain conditions for the radio boxes, for example:
If "Home" is checked, the "Text" radio box will be unchecked and "Voice" will be checked instead (ie. You can't text a home phone number). Similarly, when "Home" and "Voice" are checked, clicking "Text" will force "Home" to be unchecked and "Cell" will become checked.
I can get this working fine for one instance, with the use of .getElementById and the click function, but where I run into trouble is when things are scaled up. This table might have 20 or 30 rows, each of which containing a cell with these radio boxes.
I'm not great with jQuery, so I'm not sure how to make a more general version, so that each set of radio boxes are their own contained units, so to speak. I made a jsfiddle where you can see that only the first instance is working, likely because I am targeting the boxes using their id and you can't have two elements with the same id... help? Thanks!
http://jsfiddle.net/3uHqS/
Script
$( document ).ready(function() {
document.getElementById('contact-home').onclick = function () {
document.getElementById('format-voice').checked = true;
};
document.getElementById('format-text').onclick = function () {
document.getElementById('contact-cell').checked = true;
};
});
HTML
<form>
<input type="radio" name="contact" value="" id="contact-cell" />
<label for="contact-cell">Cell</label>
<input type="radio" name="contact" value="" id="contact-home" />
<label for="contact-home">Home</label>
<input type="radio" name="format" value="" id="format-voice" />
<label for="format-voice">Voice</label>
<input type="radio" name="format" value="" id="format-text" />
<label for="format-text">Text</label>
</form>
You are going to want to assign every radio box a descriptive class like 'text-radio' or 'home-radio'. Then when you need to change all of the Text radio boxes you do something like the following in jQuery:
$(".text-radio").attr('checked', 'checked');

Getting checked value with ajax submit

First of, I'm new to ajax and Java Script.. I have spend days solving this problem, but I still haven't figured it out. I have read through threads with similar problems but I still can't get it right. So here goes;
Quite simple I want post the checked value from from one of three radio buttons. All I get though is only the value of the first radio button..
I have tried several things, but I stripped down the code so it might be easier see where the problem is :-)
The ajax
<script type"text="" javascript"="">
$(document).ready(function(){
$("form#submit").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var svar = $('#svar').attr('value');
var date = $('#date').attr('value');
var email = $('#email').attr('value');
$.ajax({
type: "POST",
url: "ajax.php",
data: "svar="+ svar + "&email=" + email + "&date=" + date,
success: function(){
$('form#submit').hide();
//$('form#submit :input').val("");
$('div.success').fadeIn();
}
});
return false;
});
});
</script>
The form
<form id="submit" method="post" name="submit" action="">
<fieldset>
<legend>Dagens spørgsmål: <? echo $row['question'];?></legend>
<br>
<input type="radio" name="svar" id="svar" value="1"><? echo $row['opt1'];?>
<br>
<input type="radio" name="svar" id="svar" value="2"><? echo $row['opt2'];?>
<br>
<input type="radio" name="svar" id="svar" value="3"><? echo $row['opt3'];?>
<br>
<input name="email" id="email" type="hidden" value="<? echo $email ?>" />
<input name="date" id="date" type="hidden" value="<? echo $date ?>" />
<br><br>
<button type="submit" class="button positive"> <img src="img/tick.png" alt=""> Svar på dagens spørgsmål </button>
</fieldset>
</form>
Ajax.php
<?php
include ("dbc.php");
// CLIENT INFORMATION
$email = htmlspecialchars(trim($_POST['email']));
$date = htmlspecialchars(trim($_POST['date']));
$svar = htmlspecialchars(trim($_POST['svar']));
//stuff from answers
mysql_query("INSERT INTO answers
(`email`,`day`,`answer`)
VALUES
('$email','$date','$svar')") or die(mysql_error());
?>
Hope one you of you smart guys have a solution.. because this thing i driving me crazy
You have several problems.
First, your HTML is invalid. An ID must be unique, so each radio button must have its own ID. You associate a group of radio buttons by giving them the same NAME. (Having a unique ID then lets you associate a LABEL with each one using the FOR attribute which increases accessibility by making it easier for screen readers and providing bigger click targets).
Second, the value of a radio button is fixed. The question is "Is it successful or not?" and that is determined by seeing if it is checked or not. If you were doing this manually, you would have to loop over each radio button in the group until you found one that was checked (or use a selector that matched only the checked ratio button (:checked)).
Third, you are building your form data by mashing together strings without making sure the data is URL safe (with encodeURIComponent).
The solution is to forget about doing all this manually and just use the jQuery serialize method on the form.
First: you use the same id for several elements. ID-s should be unique, and you should address your elements with class name or other means. So instead of
$('#svar')
yous should use
$('input[name=svar]')
to reference the group of checkboxes.
Second: There is a slight mistake here:
$('#svar').attr('value');
is the value of the first radio button's value attribute, while
$('input[name=svar]:checked').val();
would give you the value of the checked radio button in the group you are selecting with input[name=svar].
Edit: thx #Quentin for pointing out my error.
First thing to know is id should be unique in a html document.
What makes attributes of type ID special is that no two such
attributes can have the same value;
[Quoted from css2 selector docs]
You have assigend same id to three radio buttons.
Now when you use var svar = $('#svar').attr('value');, only the first radio button will get selected. So, irrespective of radio button selected, only the first radio buttons value you will get.
Now, if you want to get the radio button selected you have to use jQuerys :checked selector.

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{
}

Categories