I'm designing an attendance register system which will display all 'gymnasts' from the value set in a 'select class' dropdown with their own checkbox (Displaying this using AJAX and JSON). Which is all 'hunky dory'.
Pseudo Form:
<form>
<classes dropdown populated from classes table onchange="ajaxFunction()">
<save button>
</form>
Pseudo AJAX response: form elements of gymnasts with checkboxes next to them.
GymnastName [Checkbox]
GymnastName [Checkbox]
GymnastName [Checkbox]
GymnastName [Checkbox]
GymnastName [Checkbox]
GymnastName [Checkbox]
The user would then check the boxes of all the gymnasts that are present, and leave the boxes for the gymnasts that are absent.
Upon hitting the save button; I'm not sure how to go about saving each gymnast's presence as a single record in the class-attendance table:
class-attendance(id, classid, gymnastid, present[y/n],datetime)
I understand that this may not be the best way to approach the problem, however is there some way to create an array for the data contained in the form so that it can be inserted into the class-attendance table with each gymnast's presence being saved as a record?
Thanks for your help in advance!
what i understand according to that i have made script using HTML,Jquery and PHP. See the code is work for you or not.
HTML and Jquery Code
<form action="process.php" method="post">
<div>
GymnastName <input type="checkbox" class="atd" ><br>
<!-- put gymnastid in value what you getting from JSON -->
<input type="hidden" name="Gymnast_id[]" value='1' class="atdid">
<input type="hidden" name="Gymnast_attend[]" value='n' class="atdval">
</div><br>
<div>
GymnastName <input type="checkbox" class="atd"> <br>
<input type="hidden" name="Gymnast_id[]" value='2' class="atdid">
<input type="hidden" name="Gymnast_attend[]" value='n' class="atdval">
</div><br>
<div>
GymnastName <input type="checkbox" class="atd"> <br>
<input type="hidden" name="Gymnast_id[]" value='3' class="atdid">
<input type="hidden" name="Gymnast_attend[]" value='n'class="atdval">
</div><br>
<div>
GymnastName <input type="checkbox" class="atd"> <br>
<input type="hidden" name="Gymnast_id[]" value='4' class="atdid">
<input type="hidden" name="Gymnast_attend[]" value='n'class="atdval">
</div><br>
<div>
GymnastName <input type="checkbox" class="atd"><br>
<input type="hidden" name="Gymnast_id[]" value='5' class="atdid">
<input type="hidden" name="Gymnast_attend[]" value='n' class="atdval">
</div><br>
<input type="submit" name="Save">
</form>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.atd').change(function() {
if($(this).is(":checked")) {
$(this).closest('div').find('.atdval').val('y');
}
else{
$(this).closest('div').find('.atdval').val('n');
}
});
});
<script>
PHP CODE (process.php)
<?php
$Gymnast_id=$_POST['Gymnast_id'];
$Gymnast_attend=$_POST['Gymnast_attend'];
foreach ($Gymnast_id as $key => $id) {
echo "Id: ".$id."<br>";
echo "Attend: ".$Gymnast_attend[$key]."<br><hr>";
// here you get id of Gymnast and present status, default it is "n"
// you can add your sql query here
//class-attendance(id, classid, gymnastid, present[y/n],datetime)
}
?>
Related
I've created a page that helps with printing packing slips. It will divide up the packing slips by country. So for example we will end up with two different forms, one for US, one for CA.
<form id="US" class="packingSlipForm" action="magical_url" method="post" target="_blank">
<input id="id_US" name="country" value="US" type="hidden" class="accountLocalID">
<input name="orders[0]" value="552269" type="hidden" class="orderFormItem">
<input name="orders[1]" value="552273" type="hidden" class="orderFormItem">
<input name="orders[2]" value="552276" type="hidden" class="orderFormItem">
<input name="orders[3]" value="537048" type="hidden" class="orderFormItem">
<input name="orders[4]" value="541181" type="hidden" class="orderFormItem">
</form>
<form id="CA" class="packingSlipForm" action="magical_url" method="post" target="_blank">
<input id="id_CA" name="country" value="CA" type="hidden" class="accountLocalID">
<input name="orders[0]" value="553351" type="hidden" class="orderFormItem">
</form>
and this is my script to submit the forms.
<script type="text/javascript">
function printPackingSlips() {
$(".packingSlipForm").each(function () {
this.submit();
});
}
</script>
I'd like it to open two different tabs with the data from each form submit. But instead it opens one tab and only shows data from whatever form was submitted last.
Any ideas on how to make each form open it's own tab?
I generate table from database, assign each cell as checkbox value, group each row as form and display them all as table refer to [this].1 How I can get particular cell value when i click on the button since each form (row) have a same id. I want to pass the value as query parameter to update the database table. I have searched for similar technique and still not find the solution.
This code is within a cursor fetching loop:
<form class="tr" id="barisn" method="post" action="">
<span class="td"><input type="checkbox" name="id" value="<?php $data[0]?>"/><label for="id"><?php echo $data[0]?></label></span>
<span class="td"><input type="checkbox" name="name" value="<?php $data[1]?>" /><label for="name"><?php echo $data[1]?></label></span>
<span class="td"><input type="checkbox" name="gender" value="<?php $gender?>" /><label for="gender"><?php echo $gender?></label></span>
<span class="td"><input type="checkbox" name="sender" value="<?php $data[8]?>" /><label for="sender"><?php echo $data[8]?></label></span>
<span class="td"><input type="checkbox" name="date" value="<?php $data[5]?>" /><label for="date"><?php echo $data[5]?></label></span>
<span class="td"><input type="checkbox" name="time" value="<?php $data[6]?>" /><label for="time"><?php echo $data[6]?></label></span>
<span class="td"><input type="checkbox" name="state" value="<?php $state?>" /><label for="state"><?php echo $state?></label></span>
<div class="td">
<button class="btn-rawuh" type="submit" form="barisn" value="Rawuh">Rawuh</button>
<button class="btn-tundha" type="submit" form="barisn" value="Tundha">Tundha</button>
<button class="btn-mlebet" type="submit" form="barisn" value="Mlebet">Mlebet</button>
</div>
</form>
You have to put anchor tag instead of button like this
Edit
when you click on edit button then page will redirect to edit.php(you have to create new php file) then get the id from url :
echo $_GET method
then u will get the details of that particular row using id (using query).
I am having problems trying to pass values to two different forms on the same page. The page is populated with 16 radio buttons (which I’ve turned into boxes for display reasons) and they all hold a value (e.g. 001). Both of the forms jobs are to somehow grab the active/selected radio button value and post it to a PHP file so database changes can be made. Instead of a submit button, I am using an anchor to pass a JavaScript submit function. I have tried having
both forms cover the whole page but still didn't have any luck.
I’ll post some code below to help you understand.
PS. If you need more code to understand, I can post it to pastebin.
<li>
<form id="form_ready" method="post" action="../backend/screen.php">
<input type="hidden" name="screenid" value="" />
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_ready').submit();">READY</a>
</form>
</li>
<li>
<form id="form_c" method="post" action="../backend/screen.php">
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_c').submit();">COLLECTED</a>
</form>
</li>
</ul>
<div id="content">
<div id="container">
<div id="table">
<div id="tr1">
<div id="td1">
<input type="radio" name="pickup" id="1" value="001" />
<label for="1"> <span>001</span> </label>
</div>
<div id="td2">
<input type="radio" name="pickup" id="2" value="002" />
<label for="2"> <span>002</span> </label>
</div>
<div id="td3">
<input type="radio" name="pickup" id="3" value="003" />
<label for="3"> <span>003</span> </label>
</div>
<div id="td4">
<input type="radio" name="pickup" id="4" value="004" />
<label for="4"> <span>004</span> </label>
</div>
To answer the suggestion in the comments and use only one form, here's how to grab the value from the selected radio button:
var inputs = document.getElementsByTagName('input');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
valueSelected will contain the value of the selected radio.
If you ever need to reduce the type to "radio" only for some reason, you can check an input type with inputs[i]['type'] === 'radio' in the for loop.
The best would probably still be to set a class for your "radio" inputs, it will allow the loop to be more specific, hence a more efficient code, for example:
<input type="radio" class="myRadio">
and in JS: var inputs = document.getElementsByClassName('myRadio');
I have this simple form
<form action="" method="post" class="smart-green">
<h1>Contract Form
<span>Please fill all the texts in the fields.</span>
</h1>
<label>
<span>Client:</span>
<input type="text" name="client" placeholder="Your Client Name" />
</label>
<label>
<span>Your Name (Salesman):</span>
<input type="text" name="salesman" placeholder="Name" />
</label>
<label>
<span>Construction Name:</span>
<input type="text" name="construction" placeholder="Construction Name" />
</label>
<label>
<span>City:</span>
<input type="text" name="city" placeholder="City" />
</label>
<label>
<span>Items:</span>
<input type="text" name="id_item" placeholder="Item" />
</label>
<label>
<span> </span>
<input type="button" class="button" value="Send" />
</label>
</form>
It is a form for orders. I need to be able to enter a value of items I am going to enter (5 for example) and then I need the "Items" input to appear 5 times. I also need to be able to remove it, so user can correct himself. I don't know how to code in Javascript, so is this even possible? How? I need to access it later as an array in my controller. Thats why I have the name of the field as an array. Thank you in advance for your help.
EDIT: I have just found something similiar to what I need here: http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery
I just dont want it to be a button, but a field with a input for a number and for it to not have a limit. I wish I knew Javascript :<
EDIT2: Maybe I wrote it unclear, but I CAN use Javascript, I just dont know how to properly programm in it, so if anyone knows how to achieve that in Javascript, I would be glad.
It sounds like you need to ask the user how many items to order, then when the user submits the page to you, save the form data into an array using $_SESSION. The next page that is shown would provide the item text elements for the user to complete.
You'll basically want to:
Start session
If $_POST['id_item'] is set
Save all variables into $_SESSION
Generate item inputs based on id_item using a for loop
If items are provided
Retrieve previous form data from $_SESSION, marry with new item information
Otherwise
Display initial form
(Personal note: Javascript would make this much nicer and easier)
Without a scripting language, I don't believe this is possible. I suppose you could use simpler 'inline' scripts to do display subsequent elements, like:
<div id="item1div">
Item 1:<input name="item1" value="" onFocus="getElementById('item2div').style.display='block';">
</div>
<div id="item2div" style="display:none;">
Item 2:<input name="item2" value="" onFocus="getElementById('item3div').style.display='block';">
</div>
...
<div id="item10div" style="display:none;">
Item 10: <input name="item10" value="">
</div>
This would display each item as the previous item was selected. It comes with its own problems, and it's a real simplification of what you're asking, but it would accomplish your basic goal without having to write a function in JS.
Here is what I was referring to when I said use sessions + PHP. You can do this all in PHP, though javascript would be optimal. I have not included a way to remove the session inputs, however using other form elements will suffice. Also, I have not done any echoing values on reload. This is only an option if you really do not want to use javascript:
<?php
// Put at top of page
session_start();
// Also somewhere at top of page
// Check post empty and assign post to a session for continual use
if(!empty($_POST)) {
$_SESSION['form'] = $_POST;
} ?>
<form action="" method="post" class="smart-green">
<h1>Contract Form
<span>Please fill all the texts in the fields.</span>
</h1>
<label>
<span>Client:</span>
<input type="text" name="client" placeholder="Your Client Name" />
</label>
<label>
<span>Your Name (Salesman):</span>
<input type="text" name="salesman" placeholder="Name" />
</label>
<label>
<span>Construction Name:</span>
<input type="text" name="construction" placeholder="Construction Name" />
</label>
<label>
<span>City:</span>
<input type="text" name="city" placeholder="City" />
</label>
<label>
<span>Items:</span>
<input type="text" name="id_item" placeholder="Item" />
</label>
<label for="new">Add Fields</label>
<select name="new" id="new">
<option value="">Select</option>
<option value="1">Add 1</option>
<option value="2">Add 2</option>
<option value="3">Add 3</option>
<option value="4">Add 4</option>
</select>
<?php
// This checks if new has been posted
if(isset($_POST['new']) && $_POST['new'] >= 1) {
// Check if there are inputs in the queue
$count = (isset($_SESSION['form']['new_input']) && !empty($_SESSION['form']['new_input']))? count($_SESSION['form']['new_input']):1;
// Loop
for($i = $count; $i <= $_POST['new']+$count; $i++) { ?>
<input type="text" name="new_input[<?php echo $i; ?>]" id="new-<?php echo $i; ?>" />
<?php }
}
// Loop through sessioned inputs
if(isset($_SESSION['form']['new_input'])) {
$i = 0;
foreach($_SESSION['form']['new_input'] as $key => $value) { ?>
<input type="text" name="new_input[<?php echo $key; ?>]" id="new-<?php echo $key; ?>" value="<?php echo strip_tags($value); ?>" />
<?php }
} ?>
<button name="add_new" value="new">Add New</button>
<label>
<span> </span>
<input type="button" class="button" value="Send" />
</label>
</form>
When my user has completed a booking form I want the form to ask them whether they are sure about booking. I think the best way to do this is with a confirm function? But if its not please do tell.
If it is with a confirm function, how do I get the confirm function to reference the values they have set in the form?
Below is the form:
<form class="submit_date" method="post" action="insert.php" id="submit_date">
<p>Date: <input type="text" name="datepicker" id="datepicker" required></p>
<input type="radio" name="bookperiod" id="bookperiod" value="1" required/>1<br>
<input type="radio" name="bookperiod" id="bookperiod" value="2" required/>2<br>
<input type="radio" name="bookperiod" id="bookperiod" value="3" required/>3<br>
<input type="radio" name="bookperiod" id="bookperiod" value="4" required/>4<br>
<input type="radio" name="bookperiod" id="bookperiod" value="5" required/>5<br>
<select class="dropdown" id="bookroom" name="bookroom" required>
<option selected disabled hidden value=''></option>
<?php
for ($x=0; $x<sizeof($rooms_array); $x++)
{
echo "<option value='$rooms_array[$x]'>".$rooms_array[$x]."</option>";
}
?>
</select>
<input class="submit_btn" value="Submit" type="submit" name="Submit";/>
</form>
I need the confirm function to say something like:
"Are you sure you want to book $rooms_array on bookperiod at submit_date"
I STRESS I KNOW HOW TO MAKE A CONFIRM FUNCTION , BUT HOW DO I MAKE THE CONFIRM FUNCTION ECHO MY PHP VARIABLES AS IT IS A JAVASCRIPT FUNCTION
do this
<input class="submit_btn" value="Submit" type="submit" onclick="checkconfirm()"> name="Submit";/>
<script type="text/javascript">
function check confirm() {
var result= confirm('are you sure?');
if (result==true) {
//Logic to delete the item
}else{
//user pressed cancel. Do nothing
}
}
</script>
<script type="text/javascript" language="JavaScript">
function AskAndSubmit(t)
{
var answer = confirm("Are you sure you want to do this?");
if (answer)
{
t.form.submit();
}
}
</script>
<form action="Tests/Test.html" method="GET" name="subscriberAddForm">
<input type="hidden" name="locationId" value="2721"/>
<input type="text" name="text" value="3.1415926535897732384"/>
<input type="button" name="Confirm" value="Submit this form" onclick="AskAndSubmit(this)"/>
</form>
Via: Display confirmation popup with JavaScript upon clicking on a link