We Keep Coding

retreive html data into form input using submit button

i have created a form for payment and retrieved data from database to the input fields. my html is below:
<table>
<form name="postForm" action="form_process.php" method="POST" >
<tr><td><input type="hidden" name="txnid" value="<?php echo $txnid=time().rand(1000,99999); ?>" /></td></tr>
<tr><td>amount</td><td><input type="text" name="amount" value="<?php echo $_GET['id'];?>" /></td></tr>
<tr><td>Name</td><td><input type="text" name="firstname" value="<?php echo $user_name; ?>" /></td></tr>
<tr><td>email</td><td><input type="text" name="email" value="<?php echo $_SESSION['email']; ?>" /></td></tr>
<tr><td>phone</td><td><input type="text" name="mobile" value="<?php echo $user_mobile; ?>" /></td></tr>
<tr><td>productinfo</td><td><input type="text" name="productinfo" value="" /></td></tr>
<tr><td><input type="hidden" name="surl" value="success.php" size="64" /></td></tr>
<tr><td><input type="hidden" name="furl" value="fail.php" size="64" /></td></tr>
<tr><td><input type="submit" /></td><td><input type="reset" /></td></tr>
</form>
</table>
i have the following design for my website for customers to choose plans. when the user clicks the paynow button, they are redirected to this form.
when the use clicks the button,the corresponding amount should be added to the input field automatically. if its 400 the input should be 400 or 300 if 300. how can i do this inside submit button?

So you need to perform an click function on button. Your 3 buttons may have a data attribute price mentioning the value like
<input type="button" data-price="300">
By acessing the data attribute you fill the input field.
$('.button').click(function(){
$('input[name="amount"]').val($(this).data(price));
});

Instead of Submit You can give input type as Button like plan1,plan2,plan3 and create onClick function for each button for example
<button onclick="plan1()">Plan1</button>
<p id="plan1">Plan1 contents</p>
<script>
function plan1() {
document.getElementById("plan1").innerHTML = "Document Data";
}
like wise

Add the following class to your 3 sections:
class="month"
Give that input field an ID where you want the result to be outputed: e.g: <input type="text" name="productinfo" id="productinfo">
Add following script in your JavaScript file:
const month = document.querySelectorAll('.month');
const productInfo = document.getElementById('productinfo');
month.forEach((m) => m.addEventListener('click', (e) => productInfo.value = m.getAttribute('data-month')));
data-month contrains the value. In this case 100, 200, 300.
const month = document.querySelectorAll('.month');
const productInfo = document.getElementById('productinfo');
month.forEach((m) => m.addEventListener('click', (e) => productInfo.value = m.getAttribute('data-month')));
<input class="month" type="button" value="PLAY NOW" data-month="100">
<input class="month" type="button" value="PLAY NOW" data-month="200">
<input class="month" type="button" value="PLAY NOW" data-month="300">
<input type="text" id="productinfo">

saving attendance register records logic with mysql and php

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)
}
?>

HTML5 validation does not trigger

I will go directly to the problem
So here is my form
<form action="<?php echo base_url()?>" method="post" id="formfield">
<center>
<label>How much? <small>( Minimum of 100 )</small></label>
<div class="ui input">
<input type="number" name="amount" required>
</div>
<br>
<label>Payment type <small>( see all )</small></label>
<br>
<div class="ui input">
<input type="text" name="type" required>
</div>
<br>
<div class="">
<input type="submit" class="btn btn-primary" value="Order Now" id="btnsubmit" >
</div>
</center>
</form>
And here is my Javascript, newbie here.
<script>
$(function()
{
$('#btnsubmit').on('click',function()
{
$(this).val('Please wait ...')
.attr('disabled','disabled');
$('#formfield').submit();
});
});
</script>
So the problem is that the form submit without triggering the html5 validation
I also wanted to add alert if Ok proceed but should trigger the html5 validation
Can anyone help me? I will really appreciate it. Advance thank you.

The form is submitting without triggering the HTML5 validation because you're submitting the form in your JavaScript when you call: $('#formfield').submit();
To add a confirmation dialog, you could use something as simple as confirm, though confirm is not always the best idea. You could add something like this to your event listener:
if (confirm('Are you sure?')) {
// Yes
$(this).val('Please wait ...').attr('disabled','disabled');
} else {
// Prevent form from being submitted
return false;
}
Snippet (doesn't exactly work, because stacksnippets.net doesn't allow forms to be submitted, but check your console)
function go() {
if (confirm('are you sure?'))
// Form would be submitted, but stacksnippets prevents it.
document.querySelector('form').submit();
else
return false;
}
<form action="">
<input type="text" required>
<button onclick="go()">
Submit
</button>
</form>

May be this will help you;
$(document).ready(function() {
$('#formfield').on('submit', function(e) {
$("#btnsubmit").val('Please wait ...')
.attr('disabled', 'disabled');
});
});
<form action="<?php echo base_url()?>" method="post" id="formfield">
<center>
<label>How much? <small>( Minimum of 100 )</small>
</label>
<div class="ui input">
<input type="number" name="amount" required>
</div>
<br>
<label>Payment type <small>( see all )</small>
</label>
<br>
<div class="ui input">
<input type="text" name="type" required>
</div>
<br>
<div class="">
<input type="submit" class="btn btn-primary" value="Order Now" id="btnsubmit">
</div>
</center>
</form>

PHP submit an form only if checkbox checked

I have a form with a check box and an input text. Here is my form:
<form action="index.php?option=com_platiniumchristmas&view=success" method="post">
<label>
<input type="checkbox" name="termsConditions" id="chbx" value="Yes" onclick="foo()" />
<?php echo JText::_( 'COM_PLATINIUMCHRISTMAS_TERMSCONDITIONS_TEXT');?>
</label>
<input type="submit" value="Emitir Voucher" class="btn btn-success" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="friendName" style="width: 100%;" />
<input type="hidden" name="canal" value="<?php echo $_POST[" canal "]; ?>"/>
</div>
</form>
The idea is only to submit the form if the checked box value is checked. How can I go about this. I have tried using javascript but no success.
The javascript I tried to Use:
<script type=”text/javascript”>
var checkbox = document.getElementById("chbx");
function foo(){
if(checkbox.checked){
alert("meap");
};
};
</script>

You don't need JavaScript at all. Just use the required attribute for the constraint validation API.
<form action="index.php?option=com_platiniumchristmas&view=success" method="post">
<label>
<input type="checkbox" name="termsConditions" id="chbx" value="Yes" required />
<?php echo JText::_( 'COM_PLATINIUMCHRISTMAS_TERMSCONDITIONS_TEXT');?>
</label>
<input type="submit" value="Emitir Voucher" class="btn btn-success" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="friendName" style="width: 100%;" />
<input type="hidden" name="canal" value="<?php echo $_POST[" canal "]; ?>"/>
</div>
</form>
This will stop the form from submitting unless the checkbox is checked. Do remember, you still need backend validation as always to verify since requests can be forged if enough effort is put into it.

try complete example, it should work.
and then correct your code.
<!DOCTYPE html> <html> <head> <script> function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
} } </script> </head> <body>
<form name="myForm" action="index.php" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form>
</body> </html>
Thanks
Amit

$("#form").submit(function(e) {
if(!$('input[type=checkbox]:checked').length) {
alert("Please select the checkbox.");
//stop the form from submitting
return false;
}
return true;
});
<form id='form'>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="submit" value="Do thing" >
</div>
</form>
use this

You lose the context in your code. try:
<script type=”text/javascript”>
function foo(){
var checkbox = document.getElementById("chbx");
if(checkbox.checked){
alert("meap");
};
};
</script>

validating a form then displaying the other hidden form using jquery

i'm having a bit of a problem with my jquery code..i have two forms in my page..one displays when the user loads the page and the other is hidden(set to style="display:none;"). I want to fill out all the details in the first form and on clicking next, display the hidden form..problem is, the hidden form gets displayed on clicking the 'next' button even when the first form has no input..so i'm guessing i'm doing something wrong with the jquery validation code(i'm using the jQuery Validation plugin)..any help would be appreciated.thanks in advance
Here's how my code looks like:
The DETAILS
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<body>
<div class="item item1">
<form action="index.html" method="get" id = "form1">
<h1>The DETAILS</h1>
<p align="justify">Try our FREE landlord cost calculator and<br>
discover the real cost of letting your property. <br>
<input name="name" type="text" placeholder="your name"class="required" />
<br>
<input name="email" type="text" placeholder="your email" class="required" />
<br>
<input name="phone" id="phone" type="text" placeholder="your phone no" class="required" />
<br>
<input name="postcode" id="postcode" type="text" placeholder="postcode of property to let" class="required" />
<br>
<select name="bedrooms" id="bedrooms" placeholder="bedrooms" class="required" >
<option value="1">1</option>
<option value="2" >2</option>
<option value='' disabled selected="selected">Please Choose</option>
</select>
<br>
<input name="hearAbout" type="text" placeholder="where did your hear about us?" class="required" />
<br>
<button class="submit button1 " id = "next" name="submit" type="submit" value="next"><span class="next ">></span>next</button>
</p>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#form1").validate();
});
</script>
<script>
$("#form1").submit(function() {
/* AJAX calls and insertion into #form2 */
$("#form2").show();
return false;
});
</script>
<div class="item item2">
<form action="calculation.php" method="post" id = "form2"style="display:none;">
<h1>The Income</h1>
<label> Estimated monthly rent:£ </label> <input name="rent" id="rent" type="text" /><hr>
THE COSTS STEP 3 <hr>
Agents Commission: <select name="commission" id="commission">
<option value="10%">10%</option>
<option value="12%" selected="selected">12%</option>
</select> <hr>
Estimated Setup Fees:£ <input id="fees" name="fees" type="text" /><hr>
How many weeks in the year do you estimate <br>that your property will<br> be vacant/empty?<input name="weeks" type="text" /><hr>
<button class="submit button2" name="submit" type="submit" value="calculate"><span class="next">></span>calculate</button>
</form>
</div>

your submit action should validate on submitting the first form and then show other form. Please try below code.
<script>
$(document).ready(function(){
$("#form1").submit(function() {
$("#form1").validate();
/* AJAX calls and insertion into #productionForm */
$("#form2").show();
return false;
});
});
</script>

Try using jQuery Form Plugin: http://malsup.com/jquery/form/
Put this in the section:
<script src="http://malsup.github.com/jquery.form.js"></script>
and then modify your script with ajaxForm:
<script>
$("#form1").ajaxForm(function() {
/* AJAX calls and insertion into #productionForm */
$("#form2").show();
return false;
});
</script>

Here's what I am talking about on my comment Harun Thuo :
$(".selector").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
},
submitHandler: function(form) {
// do other things for a valid form
form.submit();
$("#form2").show();
return false;
});
}
});
You can do the submission here. Read the documentation. You can also control the error placement.
http://jqueryvalidation.org/validate