We Keep Coding

jQuery: How to show next section if the first section has completed with valid input

I am new to programming. I have got an issue with my jquery codes.
I have a form that I want to hide some sections of it and do not show until the first section which is input text, be completed then after clicking on the next button first check if all data inputs are completed then show the next section which is dropdown text (part2) and if I pick one of the dropdown text then show next section which is part3.
I tried this code.
<script>
$(".part2").hide()
$(".nextBtn").on("click", function(){
$('input').each(function() {
if(!$(this).val()){ alert('Some fields are empty'); return false; }
else{
$(".part2").show();}
});
});
</script>
<div class="form">
<div class="inputfield">
<label>First Name</label>
<input type="text" class="input" name="get[firstname]">
</div> <br/>
<div class="inputfield">
<label>Last Name</label>
<input type="text" class="input" name="get[lastname]">
</div> <br/>
<div class="inputfield">
<label>Email Address</label>
<input type="text" class="input" name="get[email]">
</div>
<div class="inputfield">
<label>Phone Number</label>
<input type="text" class="input" name="get[phone]">
</div>
<button class="nextBtn">Next</button>
<section class="part2">
<div class="inputfield">
<label for="text">Choose a text:</label>
<select name="text" id="text">
<option value="1">Text1</option>
<option value="2">Text2</option>
</select>
</div>
<section class="part3">
<div class="inputfield">
<label for="text">Choose a text:</label>
<select name="text" id="text">
<option value="1">Text1</option>
<option value="2">Text2</option>
</select>
</div>
Thanks.

Wrap all in sections as part2 and part3 and try this, and include one next button in each section in order to know the section will have to show
$('.nextBtn').click(function(){
if ($(this).closest('section').find('input').val() != '') {
$('section').hide();
$(this).closest('section').next().show();
}else {
console.log('Some fields are empty')
}
})

How do we concatenate text along with a PayPal field variable?

We are using a standard PayPal Form to collect payments online and have a field for customers to input a pickup date/time, for this we are using the passthrough variable "invoice" per instructions at PayPal Docs everything worked fine this way until we decided for clarification we would also like to pass along the text "PickUpDate" so its makes sense in the email notifications from PayPal. Instead of just Invoice ID 2021-08-30T12:30 We would like it to read Invoice ID PickUpDate:2021-08-30T12:30 We added some JavaScript to get this to work but no success - Any suggestions anyone, hoping for a simple solution somewhere? - Thanks in advance!
Here is an example of the form as we have it now:
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[type="datetime-local"]').change( function() {
$val = 'PickUpDate:' + $(this).val();
$('#invoice').val($val);
});
});
</script>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" style="margin:0;padding:0;" target="PayPal">
<input type="hidden" name="business" value="paypal#toolcart.com">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="notify_url" value="https://develop.toolcart.com/?notify=1" />
<input type="hidden" name="item_number" value="Toolcart Sale of: Grey Steel 48x72x24 Cabinet">
<input type="hidden" name="item_name" value="Purchase of a Grey Steel 48x72x24 Cabinet">
<div class="text-secondary px-3 form-group">
<label class="col-md-3 control-label" for="date">
<small>Pickup times 9:00a-6:00p (Mon-Sat)</small>
</label>
<div class="col-md-3">
<input id="date" type="datetime-local" name="invoice" min="2021-08-26T09:00" class="form-control-sm" id="invoice" required="">
</div>
</div>
<input type="hidden" name="custom" value="Websale|GrSteel48x72x24Cab|587688|1200.00|Tax|06|72|Total|1272.00">
<div class="text-secondary px-3 form-group">
<label class="col-md-3 control-label" for="selectbasic">
<small>Please select a payment option:</small>
</label>
<div class="col-md-3">
<select id="selectbasic" name="amount" class="form-control-sm">
<option selected="true" value="360">Reservation amount: $360.00</option>
<option value="1272">Full Price: $1,200.00 + 72.00 Tax</option>
</select>
</div>
</div>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="receiver_email" value="paypal#toolcart.com">
<input type="hidden" name="return" value="https://develop.toolcart.com/pickup">
<input type="hidden" name="no_note" value="1">
<input type="image" src="/wp-content/themes/develop-toolcart-theme/images/paypal.png" class="img-fluid" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
I would just like to prepend the text of PickUpDate: before the type="datetime-local" values and submit it along with the form if at all possible?

I've never used jQuery, try using template literal like this:
I don't know if this will work, just try.
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[type="datetime-local"]').change( function() {
$val = `PickUpDate: ${$(this).val()}`;
$('#invoice').val($val);
});
});
</script>

1 button for 2 forms where one of the forms is a <select>

I got 2 forms, one of the forms is a select which can show 2 hidden divs. When one of the options is selected it should send the value to the database. Now the second form is where the button is. When this button is pressed it should submit both forms. I already tried some things, but they don't seem to work. Anyone has an idea?
The first 'main' form:
<form class="areaType" id="formSelect" action="saveData.php" method="POST">
<p>Are you a student showcasing a project or a school institution looking to collaborate?</p>
<select id="textAreaType" onchange="chooseType(this)" name="type">
<option value="0" selected></option>
<option value="1">Student project</option>
<option value="2">School institution project</option>
</select>
</form>
The second (hidden) form:
<form class="textAreas" id="formSchool" action="saveData.php" method="POST">
<div class="fieldsForSquare">
<p>Fill in these fields for your square</p>
</div>
<div class="areaTitle">
<p>Title</p>
<textarea type="text" id="textAreaTitle" name="summary" required></textarea>
</div>
<div class="areaDescription">
<p>Short description</p>
<textarea maxlength="200" type="text" id="textAreaDescription" name="shortSummary" required></textarea>
</div>
<div class="areaPersons">
<p>How many people are you looking for and how big is the team going to be?</p>
<input type="number" maxlength="2"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
id="textAreaPersons" required>
<input type="number" maxlength="2"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
id="textAreaPersons2" required>
</div>
<div class="areaHours">
<p>Is it fulltime or parttime?</p>
<select id="textAreaHours" required>
<option value="0" selected></option>
<option value="1">Fulltime</option>
<option value="2">Parttime</option>
</select>
</div>
<div class="fieldsForPage">
<p>Fill in these fields for your page</p>
</div>
<div class="areaAbout">
<p>What is it about?</p>
<textarea type="text" id="textAreaAbout" required></textarea>
</div>
<div class="areaLookingFor">
<p>What/who are you looking for?</p>
<textarea type="text" id="textAreaLookingFor" required></textarea>
</div>
<div class="areaCollab">
<p>U wish to add other accounts to this project?</p>
<textarea type="text" id="textAreaCollab"></textarea>
</div>
<div class="areaImg">
<p>Add some images of the product/project.</p>
<input id='files' type='file' multiple />
<output id='result' />
</div>
<div class="submitButton">
<input type="submit" value="submit" onclick="submitForms()">
</div>
</form>
The third (hidden) form:
<form class="textAreas" id="formStudent" action="saveData.php" method="POST">
<div class="fieldsForSquare">
<p>Fill in these fields for your square</p>
</div>
<div class="areaTitle">
<p>Title</p>
<textarea type="text" id="textAreaTitleStudent" name="summary" required></textarea>
</div>
<div class="areaDescription">
<p>Short description</p>
<textarea maxlength="200" type="text" id="textAreaDescriptionStudent" name="shortSummary"
required></textarea>
</div>
<div class="fieldsForPage">
<p>Fill in these fields for your page</p>
</div>
<div class="areaAbout">
<p>What is it about?</p>
<textarea type="text" id="textAreaAbout" required></textarea>
</div>
<div class="areaCollab">
<p>U wish to add other accounts to this project?</p>
<textarea type="text" id="textAreaCollab"></textarea>
</div>
<div class="areaImg">
<p>Add some images of the product/project.</p>
<input id='files' type='file' multiple />
<output id='result' />
</div>
<div class="submitButton">
<input type="submit" value="submit" onclick="submitForms_()">
</div>
</form>
The Javascript code for submitting the forms depending on which value is selected:
function submitForms() {
document.getElementById('formSelect').submit();
document.getElementById('formSchool').submit();
}
function submitForms_() {
document.getElementById('formSelect').submit();
document.getElementById('formStudent').submit();
}
the PHP code where it first checks if an option is selected and then (it should) insert it:
<?php
include('../general.config.php');
print_r($_POST);
$summary = $_POST['summary'];
$shortSummary = $_POST['shortSummary'];
$type = $_POST['type'];
if(isset($type)){
$query = $db->prepare("INSERT INTO `project`( `type`, `short_summary`, `summary`) VALUES (?, ?, ?)");
$query->bindPARAM(1,$type, PDO::PARAM_INT);
$query->bindPARAM(2,$shortSummary, PDO::PARAM_STR);
$query->bindPARAM(3,$summary, PDO::PARAM_STR);
if($query->execute())
echo "succes!";
else
echo "NO SUCCES!";
}
?>
chooseType() function:
function chooseType(select) {
if (select.value == 1) {
document.getElementById('mainAddProjectStudentID').style.display = 'block'
document.getElementById('mainAddProjectSchoolID').style.display = 'none'
} else if (select.value == 2) {
document.getElementById('mainAddProjectSchoolID').style.display = 'block'
document.getElementById('mainAddProjectStudentID').style.display = 'none'
} else if (select.value == 0) {
document.getElementById('mainAddProjectSchoolID').style.display = 'none'
document.getElementById('mainAddProjectStudentID').style.display = 'none'
}
}
When no option is selected:
When one of the options is selected:

First thing is you cannot submit two forms with one submit button unless you use ajax. Neither is this the best way to deal with the situation.
I will answer the question in two parts. One where you have three forms and are able to send data from both the forms and then a better way to do this.
Your select option has static values that represent either of the forms. You can simply add a hidden input field to have your form data include the correct type.
<!-- Hidden Input Tag for the formStudent form-->
<input type="hidden" name="type" id="studentType" value="1">
<!-- Hidden Input Tag for the formSchool form-->
<input type="hidden" name="type" id="schoolType" value="2">
Now when either of the forms are submitted your objective of having the type variable populated correctly is met.
One of the right and easier way of doing this would be to use just one form instead of three. You can toggle display of the forms with the select tag, like you are already doing. Use unique names for your fields and in your php script use $type variable to conditionally populate the variables $summary, $shortSummary and $type.
Demonstration (adding just the basic elements)
<form action="saveData.php" method="POST">
<select id="textAreaType" onchange="chooseType(this)" name="type">
<option value="0" selected></option>
<option value="1">Student project</option>
<option value="2">School institution project</option>
</select>
<!-- Student Form> -->
<div id="mainAddProjectStudentID" style="display:none;">
<textarea type="text" id="textAreaTitleStudent" name="studentSummary" required></textarea>
<textarea maxlength="200" type="text" id="textAreaDescriptionStudent" name="studentShortSummary" required></textarea>
</div>
<!-- School Form -->
<div id="mainAddProjectSchoolID" style="display:none;">
<textarea type="text" id="textAreaTitleStudent" name="schoolSummary" required></textarea>
<textarea maxlength="200" type="text" id="textAreaDescriptionStudent" name="schoolShortSummary" required></textarea>
</div>
<!-- Submit Button -->
<input type="submit" value="submit">
</form>
And your php to read the data will be
if(!empty($_POST['type']) && ($_POST['type'] == 1 || $_POST['type'] ==2 )){
$type = $_POST['type'];
$summary = ($type == 1)? $_POST['studentSummary'] : $_POST['schoolSummary'];
$shortSummary = ($type ==1)? $_POST['studentShortSummary'] : $_POST['schoolShortSummary'];
}
This is just one way of doing it, there could be many.

Usage of radio value in ID selector

Given this html:
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" value="input1_div" checked=""/> Opt1
<input type="radio" name="stype" id="opt2" value="input2_div"/> Opt2
</div>
<div id="stypes">
<div id="input1_div">
<input type="text" id="input1" name="input1" placeholder="input1"/>
</div>
<div id="input2_div" style="display: none;">
<input type="text" id="input2" name="input2" placeholder="input2" disabled=""/>
</div>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>
I use following jQuery to hide/disable input fields based on selected radio buttons:
jQuery('#choices input').each(function() {
var item = this;
$(this).click(function() {
if($('input[type=radio][name=stype]').is(':checked')) {
$('#stypes > div').hide();
$('#stypes input').not("#sbutton").prop('disabled', true);
$('#' + $(item).val()).fadeIn();
$('#' + $(item).val() + ' input').prop('disabled', false);
}
});
});
All-in-One in this jsfiddle.
I'm particularly unsure about my technique to incorporate radio value into the id selector:
$('#' + $(item).val()).fadeIn();
$('#' + $(item).val() + ' input').prop('disabled', false);
What is the correct way to do it? Other tips regarding my jQuery?

First of all, you don't need a sophisticated jQuery.each loop to bind the click and to define this. In each event handler this will be the caller of the function. In your case it is enough to have click function for all of them.
As you said in comments, it's only matter of presentation. I prefer to have one field instead of two fields. Even I prefer to have a fixed name for this text input, though in order to make it very similar to your example I change the name and placeholder accordingly.
$(function(){
$('#choices input').click(function() {
var newName = $(this).val(),
newPlaceholder = $(this).attr("data-placeholder");
$('#interchangable_input[name!='+newName+']').hide()
.attr("name", newName)
.attr("placeholder", newPlaceholder)
.fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" data-placeholder="Input one" value="input1" checked=""/> <label for="opt1">Opt1</label>
<input type="radio" name="stype" id="opt2" data-placeholder="Input two" value="input2"/> <label for="opt2">Opt2</label>
</div>
<div id="stypes">
<input type="text" id="interchangable_input" name="input1" placeholder="Input one"/>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>
Few more suggestions:
You can use <label for="target id"> for each option label in radio buttons or checkboxes. It will work fine with click event handler, even if the user clicks on the label instead of the button itself.
You can hid some information as data-* attribute in html5. You don't need to necessarily use value.
Update for multiple items
In case of group of multiple items in form, I can imagine a form with different sections or pages. The <fieldset> can be use to group these items. In HTML5 you could just disable the fieldset tag by <fieldset disabled> when you change the form page with jquery. (With exception of IE browsers). Because of this exception we need to disable all items in subforms. In order to handle this part, I defined a class .form-element which applies for all form inputs. You can also use <div> instead of <fieldset>, then you will need to track their enable/disable status.
$(function(){
// initialization by disabling form-elements and hiding them
$("#subforms fieldset[disabled]").hide();
$("#subforms fieldset[disabled] .form-element").attr('disabled','disabled');
// choice tracker
$('#choices input').click(function() {
var $target = $($(this).attr("data-subform")),
$oldElement = $("#subforms fieldset:not([disabled])");
$oldElement.attr('disabled','disabled').hide();
$oldElement.find(".form-element").attr('disabled','disabled');
$target.removeAttr("disabled");
$target.find(".form-element").removeAttr("disabled");
$target.fadeIn();
});
});
fieldset {
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" data-subform="#subform1" value="subform1" checked=""/> <label for="opt1">Opt1</label>
<input type="radio" name="stype" id="opt2" data-subform="#subform2" value="subform2"/> <label for="opt2">Opt2</label>
</div>
<div id="subforms">
<fieldset id="subform1" >
<input class="form-element" type="text" name="input1_1" placeholder="Input one"/>
<input class="form-element" type="text" name="input1_2" placeholder="Input two"/>
</fieldset>
<fieldset id="subform2" disabled>
<input class="form-element" type="text" name="input2_1" placeholder="Input one"/><br />
<textarea class="form-element" name="input2_2" placeholder="Input two"></textarea><br />
<input class="form-element" type="checkbox" name="input2_3" id="input2_3" /> <label for="input2_3">check this first</label>
</fieldset>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>

Combo box for all control

I created a filterable drop Down List using JavaScript. This is the List Box Coding.
<select name="d1" class="leftselect" id="d1" size="5" ondblclick="DropDownTextToBox('d1','t1');" style="display:none;" >
<option>axcsus-COMMON STOCK</option>
<option>aces</option>
<option>bdfs</option>
<option>befs</option>
<option>behs</option>
<option>dfgh</option>
<option>dhes</option>
<option>dwww</option>
<option>pass</option>
<option>pass</option>
</select>
I created 4 Text Field and a arrow character. If i click the arrow character , I'll show the list at the bottom of the control.
<div id="div_name" style="float:left;z-index: 20;">
<input name="t1" type="text" id="t1" onkeyup="value_filtering('d1','t1');" onkeypress="onEnter(event,'d1','t1')" />
<input type="button" class="rightselect" onclick="displayList('d1','t1');" value="▼" />
</div>
<div class="inputbox">
<input name="t2" class="inputbox" type="text" id="t2" onkeyup="value_filtering('d2','t2');" onkeypress="onEnter(event,'d2','t2')" />
<input type="button" class="leftselect" onclick="displayList('d1','t2');" value="▼" />
</div>
<div style="float:left;text-align:center;" >
<input name="t3" type="text" id="t3" onkeyup="value_filtering('d3','t3');" onkeypress="onEnter(event,'d3','t3')" />
<input type="button" class="rightselect" onclick="displayList('d1','t3');" value="▼" />
</div>
<div class="inputbox">
<input name="t4" class="inputbox" type="text" id="t4" onkeyup="value_filtering('d4','t4');" onkeypress="onEnter(event,'d4','t4')" />
<input type="button" class="leftselect" onclick="displayList('d1','t4');" value="▼" />
</div>
In the display List function I'm getting the corresponded textbox position and displayed the List Control under the Text Box. Okie. Now my problem is If i select any option in the text box, I need to display the selected value to the textbox which the listbox shown under. After selecting the value from the list box, How i find in which text box showing the List ? Dynamically how can i find the text box id ?
This is my JS code for displaying the Listbox to the corresponding TextBox.
function displayList(ele,txt)
{
vis=document.getElementById(ele);
obj=document.getElementById(txt);
if (vis.style.display==="none")
vis.style.display="block";
else
vis.style.display="none";
vis.style.position = "absolute";
//alert(getElementPosition(txt).top + ' ' + getElementPosition(txt).left);
vis.style.top = getElementPosition(txt).top+obj.offsetHeight;
vis.style.left = getElementPosition(txt).left;
}
Note : I can call this function at the click event of arrow button. I can easily pass the text Field Id. But in the case ListBox action i can't send the particular ID of the Text Field.

If you have no opposition to using jquery you can using the jquery UI built-in autocomplete which will do pretty much what you're looking for. For more advanced and nicer plugins you can try chosen

Try this.
<script>
var targetInput=null;
function displayList(ele,txt) {
vis=document.getElementById(ele);
obj=document.getElementById(txt);
targetInput = obj;
if (vis.style.display==="none") {
vis.style.display = "block";
} else {
vis.style.display = "none";
vis.style.position = "absolute";
//alert(getElementPosition(txt).top + ' ' + getElementPosition(txt).left);
vis.style.top = getElementPosition(txt).top+obj.offsetHeight;
vis.style.left = getElementPosition(txt).left;
}
}
function selectList(txt) {
if (!targetInput) return;
targetInput.value = txt.value;
txt.style.display = 'none';
}
</script>
<div id="div_name" style="float:left;z-index: 20;">
<input name="t1" type="text" id="t1" onkeyup="value_filtering('d1','t1');" onkeypress="onEnter(event,'d1','t1')" />
<input type="button" class="rightselect" onclick="displayList('d1','t1');" value="▼" />
</div>
<div class="inputbox">
<input name="t2" class="inputbox" type="text" id="t2" onkeyup="value_filtering('d2','t2');" onkeypress="onEnter(event,'d2','t2')" />
<input type="button" class="leftselect" onclick="displayList('d1','t2');" value="▼" />
</div>
<div style="float:left;text-align:center;" >
<input name="t3" type="text" id="t3" onkeyup="value_filtering('d3','t3');" onkeypress="onEnter(event,'d3','t3')" />
<input type="button" class="rightselect" onclick="displayList('d1','t3');" value="▼" />
</div>
<div class="inputbox">
<input name="t4" class="inputbox" type="text" id="t4" onkeyup="value_filtering('d4','t4');" onkeypress="onEnter(event,'d4','t4')" />
<input type="button" class="leftselect" onclick="displayList('d1','t4');" value="▼" />
</div>
<select name="d1" class="leftselect" id="d1" size="5" ondblclick="DropDownTextToBox('d1','t1');" onclick="selectList(this)" style="display:none;">
<option>axcsus-COMMON STOCK</option>
<option>aces</option>
<option>bdfs</option>
<option>befs</option>
<option>behs</option>
<option>dfgh</option>
<option>dhes</option>
<option>dwww</option>
<option>pass</option>
<option>pass</option>
</select>