In bootstrap, active class is used to get selected radio button value. When a radio button is clicked, active class is added to label of that button. After submitting the form value of radio button with active label is sent for further processing.
However when the active class is added from jquery and form is submitted, it doesn't post/get value of that button. To make this work I have to simulate the click on radio button with active class.
Am I doing something wrong ?
Is there any other way to achieve this ?
<?php
$value = 1;
?>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script>
function showOption() {
$(document).ready(function () {
$('#option_grp input[value=<?php echo "$value"?>]').parent('label').addClass('active').click();
});
}
</script>
</head>
<body onload="showOption()">
<div class="container">
<form method="post" action="getValue.php">
<div id="option_grp" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="pr_type" value="1">Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="pr_type" value="2">Option 2
</label>
</div>
<input type="submit" name="submit" value="Submit">
</form>
</div>
</body>
</html>
getValue.php
$pr_type=$_POST['pr_type'];
echo "pr_type : ".$pr_type;
In order for a radio button value to be sent to the server during a POST request, it must be marked as "checked". You can do this more than one way.
For example:
You can simulate a user clicking on the radio button which will cause the radio button to be selected.
You can mark the radio button checked by setting the "checked" attribute to "checked". See this answer for reference.
Either way should work, but the second method would be preferable. Once the radio button is checked, it can be styled however you like. Use can use the Bootstrap class 'active' or any other that you like, but the styling will have no bearing on what is sent back to the server.
Related
On below script, the form uses the required attribute for a checkbox, yet it is possible to send it without checking the box. According to w3cschool, all current browser support this attribute.
Why doesn't it work ?
<html>
<body>
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<script>
function onTosSubmit(token) {
document.getElementById("tos").submit();
}
</script>
<noscript><?php echo 'enable JS'; ?></noscript>
<form id='tos' action="" method="POST">
<input type="checkbox" name="toscheckbox" id="toscheckbox" required/>
<label for="toscheckbox">I agree with terms of use</label>
<button
class="g-recaptcha"
data-sitekey="My Google reCaptcha API key"
data-callback="onTosSubmit">
Button text
</button>
</form>
</body>
</html>
Removing the button attributes allows proper operation, but they are required for recaptcha.
This question already has answers here:
Reference - What does this error mean in PHP?
(38 answers)
Closed 5 years ago.
I am working on a Content Management System. This particular page will be a page that the content manager can use to rate the performance of content and should have 5 radio buttons that allow the CM to rate the content 1-5 and a comment box that allows the CM to insert comments into the table. The page is linked to an index page that will GET the ID of the particular content to be reviewed. The radio buttons are not showing up and many errors are showing up such as " undefined index" of three variables- blogpostID, comment, and opt radio. Can anyone help me with this code? I first need to fix the radio buttons because they are not showing up. Then I need to correctly connect the data to MySQL so the rating and comment can be posted into the DB and so it knows to GET the ID of the blog post because that is the PK.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Navbar Code -->
<?php
require_once('PHP_functions/CM_navbar.php');
?>
<!-- End of Navbar -->
<div class="center spacer">
<h3 id = "main-title"> Rate Blog </h3>
</div>
<form action ='' method = "POST">
<div class="container">
<div class="row">
<div class="form-group">
<label for="radio-inline-group">Rating:</label>
<label class="radio-inline"><input type="radio" name="optradio" value="1">1</label>
<label class="radio-inline"><input type="radio" name="optradio" value="2">2</label>
<label class="radio-inline"><input type="radio" name="optradio" value="3">3</label>
<label class="radio-inline"><input type="radio" name="optradio" value="4">4</label>
<label class="radio-inline"><input type="radio" name="optradio" value= "5">5</label>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id = "comment" name="comment"></textarea>
</div>
</div>
<div class="row">
<button type="button" class="btn btn-warning">Request Revision</button>
<button type="button" class="btn btn-success">Approve</button>
</div>
</div>
<?php
$name_of_table = "Blog";
$id = $_GET['blogID'];
$rating = $_POST['optradio'];
$managerComments = $_POST['comment'];
$query = "UPDATE" .$name_of_table. "SET rating = :optradio, managerComments = :comment WHERE blogID = :blogID";
$TableInfo = getRows($query);
foreach($TableInfo as $data)
{
echo '
<tr>
<th>'.$data['ID'].'</th>
<td>'.$data['title'].'</td>
<td>'.$data['client'].'</td>
<td>'.$data['freelancer'].'</td>
<td>'.$data['Draft Due'].'</td>
<td>'.$data['Draft Received'].'</td>
<td>'.$data['onTime'].'</td>
<td>Rate</td>
</tr>';
}
?>
</form>
</body>
</html>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Currently your SQL statement is executed each time the page is visited. However on your first visit it shouldn't be executed since the user hasn't set the values yet. This is also the reason why you get "undefined index" errors because the $_POST array is empty, no form has been sent. Also, it doesn't make sense to use getRows() (whatever it does, it's not a php build in function) on an UPDATE query.
To fix your problem you have to executed the UPDATE query only when there is actually an HTML form sent by the user. You can do this with isset() to see if the $_POST array is filled with the values you need.
if (isset($_POST['optradio'], $_POST['comment'])) {
// run UPDATE query here
}
// normal SELECT query hiere
Additionally, when you want to keep using $_GET['blogID'] in your code then your HTML form must send this information as well. To do so you specify the URI you want to call in the action="" attribute of the <form> tag. It should look something like this:
<form action="yourPage.php?blogID=<?php echo (int)$_GET['blogId']; ?>" method="post">
...
</form>
This way the blogID value is still in $_GET but the form values are in $_POST.
Ok. So I am using Sessions to store data because I am making a multi page form. The thing is, I need a back button with it. I have a submit button that will take the user to the next page and store the data into sessions but I need a back button next to the submit button in case they messed up for whatever reason. Is there anyway to make a back button with php that will take them back to the previous page while showing the data they entered? heres my code of one page.
Also, I have tried using the history.go but that only works for one page.
<?php
//let's start the session
session_start();
//now, let's register our session variables
$_SESSION['opinion1'] = 'opinion1';
$_SESSION['choice1'] = 'choice1';
//finally, let's store our posted values in the session variables
$_SESSION['opinion1'] = $_POST['opinion1'];
$_SESSION['choice1'] = $_POST['choice1'];
?>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<script src="jquery.cycle2.js"></script>
<title>Untitled Document</title>
</head>
<body>
<div class="nav">
<div class="container">
<h1 class="pull-left">Securing the Future of Village Walk</h1>
<div class="pull-right">
<ul class="nav nav-pills">
<li class="active">home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
<div class="ammendment">
<div class="container">
<form method="post" action="page4_form.php">
<textarea id="opinion2" name="opinion2" value=""></textarea>
<label for="Yes">Yes</label>
<input type="radio" name="choice2" value="Yes">
<label for="No">No</label>
<input type="radio" name="choice2" value="No">
<label for="Neither">Neither</label>
<input type="radio" name="choice2" value="Neither">
**I NEED BACK BUTTON HERE**
<input type="submit" value="Next">
</form>
</div>
</div>
</body>
</html>
I would first organize session data in a way that it's easy for you to correlate data entered with the page it was entered.
One possibility could be to organize session data in an array:
$_SESSION['formData'] = array(
array(... data for step 1 ),
array(... data for step 2 ),
array(... data for step 3 ),
);
So $formData[0] would hold data entered in step 1, etc.
As for the button, another submit would be enough:
<input type="submit" value="Back" />
Then, you would have to determine which page you are going back to; which you can achieve by sending a hidden field with the current page number.
<form method="post" action="page_form.php">
<input type="hidden" name="page" value="X" />
One thing to note here is that the server side process would not longer be one-per-page; instead there would be only one page_form.php where you'll have to determine the action and the page to move to (although you could use one per page and set the right action in the , there's always several solutions to any problem):
<?php
...
$page = $_POST['page'];
if ( isset($_POST['Back']) ) // Going back
{
$page -= 1; // Previous page requested
// Retrieve data from session
$data = $_SESSION['formData'][$page-1]; // $page-1 because of zero based array indexes.
...
// Dynamically load the proper page processor.
// each pageX_form.php will know how to deal with the variable $data.
include "page{$page}_form.php"
}
else
{
$page += 1; // Next page requested
$data = $_POST; // In this case, the data is whatever was entered
}
When building the form for each page, you'd have to remember to add the hidden field with the page number:
<form method="post" action="page_form.php">
<input type="hidden" name="page" value="<?php echo $page; ?>" />
If you wanted to use one server-side process per page, then you could do something like this instead:
<form method="post" action="page<?php echo $page; ?>_form.php">
The server-side process would look different, since you would not have to ask for the page number; it would be implicit.
You could just add an additional form like so:
<form action="pageX.php" method="post>
<input name="submitBackButton" type="submit" value="Back">
</form>
This can be detected as a normal GET / POST field within PHP:
<?php
if (isset($_POST['submitBackButton']))
{
// Do required actions here
}
I have this:
HTML
This is a button which opens the href in a modal window:
<a class="iframe button pink" href="http://www.test.php" > Pay Now <link rel="stylesheet" href="http://www.fethr.com/clients/res/buttonmodal.css">
The form:
<form method="post" />
<input type="text" name="xx" />
<input type="text" name="yy" />
<a class="iframe button pink" href="http://www.test.php" > Pay Now <link rel="stylesheet" href="http://www.fethr.com/clients/res/buttonmodal.css">
<script src="http://www.fethr.com/clients/res/buttonmodal.js"></script></a>
</form>
This anchor button. If I click on it, it opens the href in a modal window. I'm trying to use this as the submit button and post the values to the href as well as open it in the modal window. Is this possible?
Here is a simple example on how I would achieve this:
HTML
<form method="post" onsubmit="return openModal()">
<input type="hidden" name="price" class="price" value="100.00">
<input type="submit" class="submit" value="Pay Now">
</form>
<div id="modal" style="display:none"></div>
Javascript
function openModal(){
// when you click the submit button
$('.submit').click(function(){
// Add an iframe inside the modal window, throw in the form value into the src URL
$('#modal').html('<iframe src="http://www.domain.com/checkout.php?price=' + $('.price').val() + '"></iframe>');
// Display the modal window
$('#modal').show();
}
// Don't submit this form (we don't want the page to reload)
return false;
}
So inside the iframe's source file, you would just need to grab the URL parameters and calculate them.
This is a simple example, no where near as involved as the example link you provided (they are using Ajax calls to achieve this), but this should get you started.
I know there are some articles about something like this but I can't figure it out.
P.S. I'm new in programming so maybe my question is stupid.
All I wan't to do is to change 4 contents inside a tag with clickable buttons (button1, button2, button3, button4)
When page loads user see only content_1.php.
<div id="content_box">
<?
include 'content_1.php';
include 'content_2.php';
include 'content_3.php';
include 'content_4.php';
?>
</div>
Maybe somebody can show an example?
Thanks.
use ajax requests, for reference use below link:
http://www.w3schools.com/PHP/php_ajax_database.asp
You can either (A) send it all to the client and do do hide-and-show on the client side entirely, or you can (B) send the first block of content and load the rest on demand (via AJAX).
There are a few things to take into consideration when choosing between the two:
How often are users going to see other than the initial content (few times → B: Send only what's needed, a few will make another request)
How much data are we talking about (little → A: Send it all every time, fewer requests)
Does include-ing a PHP file have side-effects (it shouldn't!) (yes → B: Only include what's requested)
As for the first strategy, you could:
<script type="text/javascript">
function show(box) {
for (var i = 1; i <= 4; i++) {
document.getElementById('content_' + i).style = (i === box ? 'block' : 'none');
}
}
</script>
<div id="content_box">
<div id="content_1"><?php include 'content_1.php'; ?></div>
<div id="content_2" style="display: none;"><?php include 'content_2.php'; ?></div>
<div id="content_3" style="display: none;"><?php include 'content_3.php'; ?></div>
<div id="content_4" style="display: none;"><?php include 'content_4.php'; ?></div>
</div>
Show #1
Show #2
Show #3
Show #4
NOTICE
This assumes that the interaction has to be on the same page. If a full page load is desired, just go with GET parameters and a PHP switch.
there are more solutions, but the simplest would be, if you created four links like:
show content 1
then in the PHP side you create the logic by this user input:
<div id="content_box">
<?php
switch($_GET['content']){
case 1: include 'content_1.php'; break;
case 2: include 'content_2.php'; break;
case 3: include 'content_3.php'; break;
case 4: include 'content_4.php'; break;
default: include 'content_1.php';
?>
</div>
By the way, <? ?> short tags are not recommended to use because are not anywhere supported because of configuration.
To make this you need to use some javascripts, but instead of invent your own maybe is better use something that exists. Try this http://jqueryui.com/demos/tabs/ this should be what you need. After that you can use the ajax request to make the user loads only the part that he need
good luck!
I think instead of "pure" AJAX (which is also fine but its code is a little bit lengthy and not so easy to understand) you should use jQuery's AJAX API to reach the same functions in an easy way.
For example to load a file you should use jQuery's load() function.
To be more specific, in your code it would look like this:
$('#content_box').load('content_1.php');
But I would like to show a complete example which also works in browsers without JavaScript or with JS disabled, because it also understands $_GET parameters. There are three solutions: 1. select and option tags, 2. buttons, 3. radio buttons.
So the code is the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Load contents with jQuery</title>
<!-- jQuery CDN: http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery -->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<!-- The code with jQuery -->
<script type="text/javascript">
$(document).ready(function(){
$('#change_content_select').submit(function(){
var which_to_load = $('#sel_number').val(),
source_of_file = 'data/content_'+which_to_load+'.php';
$('#content_box').load( source_of_file );
return false;
});
$('#button_1, #button_2, #button_3, #button_4').click(function(){
var which_to_load = ( $(this).attr('id')+"" ).replace('button_', ''),
source_of_file = 'data/content_'+which_to_load+'.php';
$('#content_box').load( source_of_file );
return false;
});
$('#change_content_radio').submit(function(){
if( $('input[name=nrOfPage]:checked').val() === undefined ){
alert('Select which page to load first...');
return false;
}
var which_to_load = $('input[name=nrOfPage]:checked').val(),
source_of_file = 'data/content_'+which_to_load+'.php';
$('#content_box').load( source_of_file );
return false;
});
});
</script>
</head>
<body>
<!-- Let's do it with select tags -->
<div id="content_changing_select_tag">
<b>Page to load with select:</b><br />
Which page would you like to load?
<form method="get" id="change_content_select" action="">
<p>
<select id="sel_number" name="nrOfPage">
<option value="1">1st page</option>
<option value="2">2nd page</option>
<option value="3">3rd page</option>
<option value="4">4th page</option>
</select>
<!-- We put this submit button for compatibility with browsers with JavaScript disabled -->
<input type="submit" value="Change content" />
</p>
</form>
</div>
<hr />
<!-- Let's do it with buttons -->
<div id="content_changing_buttons">
<b>Page to load with buttons:</b><br />
Which page would you like to load?
<form method="get" id="change_content_buttons" action="">
<p>
<input value="1" type="submit" id="button_1" name="nrOfPage" />
<input value="2" type="submit" id="button_2" name="nrOfPage" />
<input value="3" type="submit" id="button_3" name="nrOfPage" />
<input value="4" type="submit" id="button_4" name="nrOfPage" />
</p>
</form>
</div>
<hr />
<!-- Let's do it with radio buttons -->
<div id="content_changing_radio">
<b>Page to load with radio:</b><br />
Which page would you like to load?
<form method="get" id="change_content_radio" action="">
<p>
<input type="radio" name="nrOfPage" value="1" />
<input type="radio" name="nrOfPage" value="2" />
<input type="radio" name="nrOfPage" value="3" />
<input type="radio" name="nrOfPage" value="4" />
<!-- We put this submit button for compatibility with browsers with JavaScript disabled -->
<input type="submit" value="Change content" />
</p>
</form>
</div>
<hr />
<div>OK, here comes the content...</div>
<div id="content_box">
<?php
// default number of page to load
$defaultPageNumber = '1';
// check if content number is set
$numberOfPageToInclude = isset($_GET['nrOfPage']) ? $_GET['nrOfPage'] : $defaultPageNumber;
$options = array(
'options' => array(
'min_range' => 1,
'max_range' => 4,
));
if (filter_var($numberOfPageToInclude, FILTER_VALIDATE_INT, $options) !== FALSE) {
include 'data/content_' . $numberOfPageToInclude . '.php';
} else {
echo '<span style="color:red;">Wrong page number, including default page!</span><br />';
include 'data/content_1.php';
}
?>
</div>
</body>
</html>
And an example for the files to include:
content_1.php :
<h1>This is content <span style="color:red;font-size: 125%;">1</span>!</h1>
content_2.php :
<h1>This is content <span style="color:red;font-size: 125%;">2</span>!</h1>
content_3.php :
<h1>This is content <span style="color:red;font-size: 125%;">3</span>!</h1>
content_4.php :
<h1>This is content <span style="color:red;font-size: 125%;">4</span>!</h1>
Ask if something isn't clear.
Hope that helps someone!
(Btw. it's TESTED and WORKING.)