I have an html file containing a form that is being loaded via php. In this form, all input fields show pre-selected values based on previously entered values. When I submit this loaded form, all the textboxes and text inputs are successfully submitted ; however, the radio buttons ( which also have pre-selected values) are not submitted unless, you click on the selected values again. Is there any way I can fix this?
Here's my simplified html that's being loaded:
<form action="report" method="POST" target="_blank">
<div class="btn-group-xs" data-toggle="buttons" id="rop1-1-cons">
<label class="btn btn-outline-primary active">
<input type="radio" name="rop1-1-cons" id="rop1-1-cons-5" value="5" autocomplete="off">I
</label>
</div>
<input type="text" value="Pre-selected User Input"/>
<input type="submit" value="submit"></input>
</form>
The label has "Active" class which means the user have chosen this before the form html was saved.
I think it's useful to mention that I am using bootstrap style radio buttons (I know, they have strange behaviors!)
Add the checked attribute to the input.
<div class="btn-group-xs" data-toggle="buttons" id="rop1-1-cons">
<label class="btn btn-outline-primary active">
<input type="radio" name="rop1-1-cons" id="rop1-1-cons-5" value="5" autocomplete="off" checked="checked">I
</label>
</div>
Related
I've used multiple Bootstrap Toggle Buttons for some options selection. On submitting form, I want to check which options are selected so that I can save the corresponding values in database using PHP.
Below is how my HTML looks like (inside form) -
<li>
<button type="checkbox" class="btn skillNameBtn" data-toggle="button" aria-pressed="false" autocomplete="off">
Option1 </button>
<button type="checkbox" class="btn skillNameBtn" data-toggle="button" aria-pressed="false" autocomplete="off">
Option2 </button>
<button type="checkbox" class="btn skillNameBtn" data-toggle="button" aria-pressed="false" autocomplete="off">
Option3 </button>
</li>
My question is how do I get value of which options are selected in PHP script? E.g if its simple input field, I use $_POST[]. But in this case what is the way to do the same.
Thank you in advance for help.
You can input a hidden field eg:
<input type="hidden" name="option" value="" id="option">
And use a jQuery:
$('.skillNameBtn').click(function(){
$('#option').val($(this).val());
});
You might add value="Option 1" etc into your buttons for easier work
I have 2 forms named form1 and form2 in a single php page.form1 contains one text box.form2 contains two text boxes with a submit button.I want to validate all the textboxes when ever submit button pressed.But I cannot access the textbox value in form 1.My code is given below.
<html><body>
<form name=form1 method=POST>
<input type=text name=f1_t1>
</form>
<form name=form2 method=POST>
<input type=text name=f2_t1>
<input type=submit name=sub1>
</form></body></html>
<?php
if(isset($_POST['sub1']))
{
$name=$_POST['f1_t1'];
echo $name;}
?>
this code error as undefined variable f1_t1.Can anyone help please?
I suggest putting everything in a single form, and displaying/hiding sections of it as necessary (for example, with jQuery and CSS).
As an example, you could do this:
<form>
<div id="part1">
<input name="t1" type="radio" value="v1" />
<input name="t1" type="radio" value="v2" />
</div>
<div id="part2" style="display: none;">
<input name="t2" type="text" />
<input type="submit" />
</div>
</form>
Only the fields in one form are submitted.
If for some reason you need to get the falues from a second form, you need to do that before posting, that is, on the client side. You could for example use javaScript to read the value of the field from the first form, write it to a hidden field in the second, and then post that to the server.
I want a list of buttons in a form and on postback I'd like to interrogate the list to see what status the buttons are at (by background colour if you are interested.)
The following codes says that Buttonx is undefined
However using the text boxes it works fine.
In javascript I can get at the array of buttons - at least in my real program.
If this is not possible, and an explanation would be useful, does anyone have a workaround at how I can get at the buttons in my postback. (In the real code the buttons are dynamically created depending on an sql query list)
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
var_dump($_POST['Buttonx']);
}
?>
<form name="RegisterStudents" action="" method="post">
<button type="submit" name="myButton">Submit</button>
<!--
<input type="text" name="Buttonx[]" id="B0" value="0" />
<input type="text" name="Buttonx[]" id="B1" value="1" />
<input type="text" name="Buttonx[]" id="B2" value="2" />
<input type="text" name="Buttonx[]" id="B3" value="3" />
-->
<button type="button" name="Buttonx[]" id="B0" >0</button>
<button type="button" name="Buttonx[]" id="B1" >1</button>
<button type="button" name="Buttonx[]" id="B2" >2</button>
<button type="button" name="Buttonx[]" id="B3" >3</button>
</form>
Thanks
Gordon
Using forms you cannot pass the form elements with type="button" to server their values are not passed to server instead you have to use any other type to send the information to server
on client side you can access their values this is the default nature of html
You cannot pass the type="button" to the server, instead use checkboxes?
You have the id="B0" or so but instead it should be value="B0" and not "id"
The <button> is not really mature in browsers yet. Look at this link: http://www.w3schools.com/tags/tag%5Fbutton.asp
If you use the <button> element in an HTML form, different browsers may
submit different values. Use <input> to create buttons in an HTML form.
I have never really used radio buttons before. So what I am trying to achieve is, using two radio buttons 'Public' and 'Private'. This is for the user's profile. My HTML code for the buttons is;
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary" id="privacy" name="privacy" value="0">Private</button>
<button type="button" class="btn btn-primary" id="privacy" name="privacy" value="1">Public</button>
</div>
As for the PHP, I'm not sure how to get the value and store it. Any help is appreciated!
Use a form.
<form method="get" action="yourscript.php">
<input type="radio" id="private" name="privacy" value="0">
<label for="private">Private</label>
<input type="radio" id="public" name="privacy" value="1">
<label for="public">Public</label>
<input type="submit" value="Save">
</form>
Change your buttons to input elements, which, together with the form, provide a HTML native way to send data to a script without the need for Javascript (although you can use Javascript to enhance the usability later on).
Using the label tag, you can assign a text to a radiobutton. This allows this text to be clicked as well, and it also provides better support for screen readers, because they can actually see which text belongs to the radiobutton.
An id needs to be unique, so I changed it to private and public. The ids are also used to link the label to.
The name determines by which name the value is sent to your script.
In PHP, you can use the superglobal $_GET. $_GET['privacy'] will contain '0' or '1' depending on the choice made. If the method of the form was post, you could use the superglobal $_POST instead, or you can use $_REQUEST, which contains values from either, so in that case your script doesn't care whether the values were send in the url (get) or in the chunk of invisible post data that is sent along with the request.
change type to radio and donot use the same id for morethan one element id is supposed to be unique
Also when you post the form type=button values will not be passed with the form
<div class="btn-group" data-toggle="buttons-radio">
<input type="radio" class="btn btn-primary" name="privacy" value="0"/>Private
<input type="radio" class="btn btn-primary" name="privacy" value="1"/>Public
</div>
assuming its posted on $_POST['privacy'] should contain either a 1 or a 0
also dont use an ID twice - they are supposed to be unique
You don't have form and submit button.
HTML page:
<div class="btn-group" data-toggle="buttons-radio ">
<form name="privacyForm" action="action.php" method="post">
<button type="radio" class="btn btn-primary" name="privacy" value="0">Private</button>
<button type="radio" class="btn btn-primary" name="privacy" value="1">Public</button>
<input type="submit" value="Submit">
</form>
</div>
action.php
<?php
echo $_POST['privacy']; // should be 0 or 1
?>
i have assumes that your form is something as follows.
<form name="sample" action="form_submit.php" method="POST">
<div class="btn-group" data-toggle="buttons-radio">
<input type="button" class="btn btn-primary" id="private" name="privacy" value="0">Private</input>
<label for="private">Private</label>
<input type="button" class="btn btn-primary" id="public" name="privacy" value="1">Public</input>
<label for="public">Public</label>
</div>
<input type="submit" name ="submit" value ="Submit"/>
</form>
you can use the following code inside the action (form_submit.php) to get the selected radio button value.
form_submit.php
<?php
$selected_radio = $_POST['privacy'];
print $selected_radio;
?>
make sure that you are not duplicating the IDs because they should be unique.
I have a 3 page registration page. After the user selects an option on the first page and clicks submit, the form transforms into the next form using jquery's animate method, meaning it stays on the same page. The question I have is how to get the data from the first form because the content of the 2nd forms is dependent on that information. Here's my html:
<div id="Registration" style="display:none;">
<div class="box">
<form id="frmtype1" action="#" name="frmtype1" method="post">
<header>Registration Options</header><br/>
<label for="Reg_type1"><input type="radio" name="Reg_type" id="Reg_type1" value="1"/> Option 1</label> <br/><br/>
<label for="Reg_type2"><input type="radio" name="Reg_type" id="Reg_type2" value="2"/> Option 2</label><br/><br/>
<label for="Reg_type3"><input type="radio" name="Reg_type" id="Reg_type3" value="3"/> Option 3</label><br/><br/>
<p id="error_message" style="display:none">Please choose an option</p><input type="submit" class="button" name="Submit" value="Submit"/>
</form>
<form name="everything" id="everything" action="#" method="post">
<header>Registration Information</header><br/>
<label>First Name<font color="red">*</font>: <input type="text" name="fname" id="fname" /> </label><br/>
Last Name*: <input type="text" name="lname" id="lname" /> <br/>
Address*: <input type="text" name="address" id="address" /> <br/>
</form>
</div>
</div>
So once an option is selected, the first form disappears and the next one appears. So how do I get the data of which option they selected? Thanks
Since they depend on information on one form, the "pages" should really be the same form. You use the jQuery/JavaScript to show/hide the "current page". This will allow you to submit all the data in one go.
Wrap all the input elements in one html form tag
For each form "segment" you will need to use your js to hide/show the wrapping HTML container. The default being "page 1" of the form and the rest hidden.
Change your submit button to just a button and have a on click event on it. When the user clicks the button the input is validated and then the jQuery unhides "page 2".
On your last "page" have a normal submit button and then all the form data is posted in one.
For example, the html might look like this:
<script type="text/javascript">
$(document).ready(function{
$(".next-page").click(function(){
$(".box-wrapper").hide();
$("#page-" + $(this).data("page")).show();
});
});
</script>
<div class="registration">
<form name="regform" action="" method="post">
<!-- Page 1 -->
<div class="box-wrapper" id="page-1">
<div class="box">
<!-- form inputs go here -->
<input type="button" name="next-page" class="next-page" value="Continue" data-page="2"/>
</div>
</div>
<!-- Page 2 -->
<div class="box-wrapper" id="page-2" style="display: none;">
<div class="box">
<!-- form inputs go here -->
<input type="button" name="next-page" class="next-page" value="Continue" data-page="3"/>
</div>
</div>
<!-- Page 3 -->
<div class="box-wrapper" id="page-3" style="display: none;">
<div class="box">
<!-- form inputs go here -->
<input type="submit" name="submit" class="submit" value="Complete Registration"/>
</div>
</div>
</form>
</div>
Using jquery --- $('input[name=Reg_type]:checked').val() this will give you the selected value.