Change divs twice on different form submissions

Change divs twice on different form submissions - javascript

I have a form with radio buttons in div1 and a captcha code to be solved in div2 and another content div3 Once the person checks a radio button in div1 and clicks submit, div1 is replaced by div2 and when a person completes the captcha in div2, I want div2 to be replaced by div3. But, once I am on div2 and complete the captcha, on submit, div1 is shown again with no signs of div3. Any way to achieve that?
<?php
require_once("solvemedialib.php");
$privkey="My_Private_key";
$hashkey="My_Hash_key";
$solvemedia_response = solvemedia_check_answer($privkey,
$_SERVER["REMOTE_ADDR"],
$_POST["adcopy_challenge"],
$_POST["adcopy_response"],
$hashkey);
if (!$solvemedia_response->is_valid) {
$errCaptcha = '<div class="alert">Please enter the Captcha!</div><br />';
} else {
?>
<script type="text/javascript">
$(document).ready(function(){
$("#3").css('display', 'block');
$("div#2").replaceWith( $( "#3" ) );
});
</script>
<?php
}
$genderErr = $gender = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["gender"])) {
$genderErr = "<div class='alert'>Please select a gender.</div>";
} else {
?>
<script type="text/javascript">
$(document).ready(function(){
$("#2").css('display', 'block');
$("div#1").replaceWith( $( "#2" ) );
});
</script>
<?php }}
?>
<div id="1">
<h1>Step 1: Choose your gender</h1>
<div>
<form id="genderform" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<input type="radio" name="gender" value="male" <?php if (isset($gender) && $gender=="male");?>>Male<br />
<input type="radio" name="gender" value="female" <?php if (isset($gender) && $gender=="female");?>>Female<br />
<input form="genderform" id="submit" name="submit" type="submit" value="Submit">
<?php echo $genderErr;?>
</form>
</div>
</div>
<div id="2" style="display:none">
<h1>Step 2: Enter captcha to verify you are not a bot!</h1>
<div align="center">
<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<?php echo solvemedia_get_html("My-C-Key"); //outputs the widget ?><br />
<input id="submit" name="submit" type="submit" value="Submit">
</form>
<?php echo $errCaptcha;?>
</div>
</div>
<div id="3" style="display:none;"><h1>Step3</h1></div>
I am sorry if I am doing a silly mistake here. I am new to coding. Please help me out.

try this .....
<?php
require_once("solvemedialib.php");
$privkey="My_Private_key";
$hashkey="My_Hash_key";
$solvemedia_response = solvemedia_check_answer($privkey,
$_SERVER["REMOTE_ADDR"],
$_POST["adcopy_challenge"],
$_POST["adcopy_response"],
$hashkey);
if (!$solvemedia_response->is_valid) {
$errCaptcha = '<div class="alert">Please enter the Captcha!</div><br />';
} else {
?>
<script type="text/javascript">
$(document).ready(function(){
$("#3").css('display', 'block');
$("#1").css('display', 'none');
$("div#2").css('display', 'none');
});
</script>
<?php
}
$genderErr = $gender = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["gender"])) {
$genderErr = "<div class='alert'>Please select a gender.</div>";
} else {
?>
<script type="text/javascript">
$(document).ready(function(){
$("#2").css('display', 'block');
$("#3").css('display', 'none');
$("div#1").css('display', 'none');
});
</script>
<?php
}
}
?>
<div id="1">
<h1>Step 1: Choose your gender</h1>
<div>
<form id="genderform" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<input type="radio" name="gender" value="male" <?php if (isset($gender) && $gender=="male");?>>Male<br />
<input type="radio" name="gender" value="female" <?php if (isset($gender) && $gender=="female");?>>Female<br />
<input form="genderform" id="submit" name="submit" type="submit" value="Submit">
<?php echo $genderErr;?>
</form>
</div>
</div>
<div id="2" style="display:none">
<h1>Step 2: Enter captcha to verify you are not a bot!</h1>
<div align="center">
<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<?php echo solvemedia_get_html("My-C-Key"); //outputs the widget ?><br />
<input id="submit" name="submit" type="submit" value="Submit">
</form>
<?php echo $errCaptcha;?>
</div>
</div>
<div id="3" style="display:none;"><h1>Step3</h1></div>
EDIT
Try this
<?php
require_once("solvemedialib.php");
$privkey="My_Private_key";
$hashkey="My_Hash_key";
$solvemedia_response = solvemedia_check_answer($privkey,
$_SERVER["REMOTE_ADDR"],
$_POST["adcopy_challenge"],
$_POST["adcopy_response"],
$hashkey);
if (!$solvemedia_response->is_valid) {
$errCaptcha = '<div class="alert">Please enter the Captcha!</div><br />';
} else {
?>
<script type="text/javascript">
$(document).ready(function(){
$("#3").css('display', 'block');
$("div#2").replaceWith( $( "#3" ) );
});
</script>
<?php
}
$genderErr = $gender = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["gender"])) {
$genderErr = "<div class='alert'>Please select a gender.</div>";
} else {
?>
<script type="text/javascript">
$(document).ready(function(){
$("#2").css('display', 'block');
$("div#1").replaceWith( $( "#2" ) );
});
</script>
<?php
}
}
?>
<?php if (!$solvemedia_response->is_valid && !isset($_POST["gender"])) { ?>
<div id="1">
<h1>Step 1: Choose your gender</h1>
<div>
<form id="genderform" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<input type="radio" name="gender" value="male" <?php if (isset($gender) && $gender=="male");?>>Male<br />
<input type="radio" name="gender" value="female" <?php if (isset($gender) && $gender=="female");?>>Female<br />
<input form="genderform" id="submit" name="submit" type="submit" value="Submit">
<?php echo $genderErr;?>
</form>
</div>
</div>
<?php } ?>
<?php if (!$solvemedia_response->is_valid && isset($_POST["gender"])) { ?>
<div id="2" style="display:none">
<h1>Step 2: Enter captcha to verify you are not a bot!</h1>
<div align="center">
<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<?php echo solvemedia_get_html("My-C-Key"); //outputs the widget ?><br />
<input id="submit" name="submit" type="submit" value="Submit">
</form>
<?php echo $errCaptcha;?>
</div>
</div>
<?php } ?>
<?php if ($solvemedia_response->is_valid && !isset($_POST["gender"])) { ?>
<div id="3" style="display:none;"><h1>Step3</h1></div>
<?php } ?>

I don't think cookies or local storage will work. My approach would be to store the styling information for each user session on the server side db. Although node.js would jive well wıth the client sıde javascript, my familiarity with Python Django suggests the following possible solution.
enter code here
{% block body %}
{% if user.is_authenticated %}
<div id="container">User: {{ user.get_username }}
# conditional python code to render the div styles according to
# user preferances
</div>
{% endif %}
{% endblock %}

Related

How to get Specific Button ID when submitting a form?

<form action="" method="post" id="all-student-reservations-form" class="form-block">
<label style="display: inline-block; vertical-align: bottom;">Type<br>
<select name="drlist-type" id="drlist-type" class="input-large">
<?php foreach (array('All', 'Midterm', 'Final') as $examType) { ?>
<option <?php if ($type == $examType) echo 'selected' ?>><?php echo $examType ?></option>
<?php } ?>
</select>
</label>
<label style="display: inline-block; vertical-align: bottom;">Campus<br>
<?php echo campus_selector('drlist-campus', $campuses, $selectedCampus); ?>
</label>
<button type="submit" class="btn-large" id="report" name="report">View All Students Reservations</button>
<button type="submit" class="btn-large" id="download" name="report">Download Report</button>
<input type="hidden" name="postId" value="" />
</form>
$("#all-student-reservations-form").on("submit", function (e) {
e.preventDefault();
$('.btn-large').click(function()) {
var postId = $('#postId').val($(this).attr('id'));
});
alert(postId);
var type = $("#drlist-type").val(),
campus = $("#drlist-campus select").val();
window.location = site_url("reservations/studentsbyCurrentTerm/"+campus+'/'+type);
});
Didn't get PostId value when clicking on View/Download.

First you need to change the button type to button and trigger a function which set the postId then just submit your form.
<form action="" method="post" id="all-student-reservations-form" class="form-block">
<label style="display: inline-block; vertical-align: bottom;">Type<br>
<select name="drlist-type" id="drlist-type" class="input-large">
<?php foreach (array('All', 'Midterm', 'Final') as $examType) { ?>
<option <?php if ($type == $examType) echo 'selected' ?>><?php echo $examType ?></option>
<?php } ?>
</select>
</label>
<label style="display: inline-block; vertical-align: bottom;">Campus<br>
<?php echo campus_selector('drlist-campus', $campuses, $selectedCampus); ?>
</label>
<button type="button" class="btn-large" onclick="submitForm('report')" name="report">View All Students Reservations</button>
<button type="button" class="btn-large" onclick="submitForm('download')" name="report">Download Report</button>
<input type="hidden" name="postId" value="" />
function submitForm(id){
$("#postId").val(id);
$("form").submit();
}
$("#all-student-reservations-form").on("submit", function (e) {
e.preventDefault();
var postId = $('#postId').val();
alert(postId);
var type = $("#drlist-type").val(),
campus = $("#drlist-campus select").val();
window.location = site_url("reservations/studentsbyCurrentTerm/"+campus+'/'+type);
});

PHP radiobutton on click event change

I have created the following code.
for some reason its skips my if event when the radiobutton changes.
the if statment is whitin a FORM i dont think this matters?
<p><?php echo $rijden[$lan][0];?></p><input type="radio" name="JA" id="waarde1" value="waarde1" onClick="gestuurdjanee();"><b>Ja</b> <input type="radio" name="JA" value="waarde0" id="waarde0" onClick="gestuurdjanee();" ><b>Nee</b></br>
<?php
function gestuurdjanee() {
if(document.getElementById("waarde0").checked == true) {
//nee?>
<p><?php echo $merk[$lan][0];?> <input type="text" name="merk"/></p>
<p><?php echo $totaalassen[$lan][0];?> <input type="text" name="totaalassen"/></p>
<p><?php echo $gestuurdenassen[$lan][0];?> <input type="text" name="gestuurdenassen"/></p>
<p><?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig2"/></p>
<p><?php echo $onstype[$lan][0];?> <input type="text" name="typebesturing"/></p>
<?php
}elseif(document.getElementById("waarde1").checked == true) {
//ja?>
<p><?php echo $typeconcurent[$lan][0];?> <input type="text" name="typetrailer"/></p>
<p><?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig"/></p>
<p><?php echo $merk[$lan][0];?> <input type="text" name="merk"/></p>
<p><?php echo $onstype[$lan][0];?> <input type="text" name="onstype"/></p>
<p><?php echo $gestuurdas[$lan][0];?> <input type="text" name="gestuurdas"/></p>
<?php
}
else {
// niksingevuld
?>
<?php echo"Vink een van de optie's aan"?>
<?php
}
}

Combining JS and PHP like that won't work. As been commented, the PHP will only run once on the server. When it's done, it shows the result in the browser. Then the Javascript will run.
Instead create three divisions with different classes.
Then bind an event on changing the input.
Also see the comments in my code:
$(function() {
$('.div1, .div2').hide(); // hide div1 and div2 on page load
$('[name=JA]').on('change', function() { // bind an onchange function to the inputs
if( $('[name=JA]:checked').val() == 'waarde1' ) { // get the value that is checked
$('.div1').show(); // show div1
$('.div2, .div3').hide(); // hide other divs
}
else {
$('.div2').show(); // show div2
$('.div1, .div3').hide(); // hide other divs
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<?php echo $rijden[$lan][0];?>
</p><input type="radio" name="JA" id="waarde1" value="waarde1"><b>Ja</b>
<input type="radio" name="JA" value="waarde0" id="waarde0"><b>Nee</b></br>
<div class="div1">
DIV1
<p>
<?php echo $merk[$lan][0];?> <input type="text" name="merk" /></p>
<p>
<?php echo $totaalassen[$lan][0];?> <input type="text" name="totaalassen" /></p>
<p>
<?php echo $gestuurdenassen[$lan][0];?> <input type="text" name="gestuurdenassen" /></p>
<p>
<?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig2" /></p>
<p>
<?php echo $onstype[$lan][0];?> <input type="text" name="typebesturing" /></p>
</div>
<div class="div2">
DIV2
<p>
<?php echo $typeconcurent[$lan][0];?> <input type="text" name="typetrailer" /></p>
<p>
<?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig" /></p>
<p>
<?php echo $merk[$lan][0];?> <input type="text" name="merk" /></p>
<p>
<?php echo $onstype[$lan][0];?> <input type="text" name="onstype" /></p>
<p>
<?php echo $gestuurdas[$lan][0];?> <input type="text" name="gestuurdas" /></p>
</div>
<div class="div3">Vink een van de optie's aan</div>

Hide button when no checkbox is checked and show button if Check All is clicked or one or more checkbox is clicked

I have a code here about hiding and showing the button whenever I checked or unchecked a checkbox. I made a two button with the same equivalent.
The first button will show if one or more checkbox was checked and hide when no checkbox was checked. But once I unchecked a checkbox the button will be hidden even there's still a checkbox that has been checked.
The second button will show if the All which means Check All was clicked and if None the button will be hidden.
So here's the problem:
When you checked a checkbox the button will show even you checked multiple checkbox the button is still there but once you unchecked a checkbox even there still checked checkbox the button will be hidden.
Another is when you clicked the All it will checked all the checkbox and a button will show even you unchecked a checkbox as long as there's still checked checkbox the button will stay but once you checked a checkbox another button shows up and two buttons will be there already.
Here's the code for the form with checkboxes:
<form id="drawing" action="" method="post">
<div id="sub_profile_cont">
<div class="sub_profile right">
<p class="sub_content_text" style='margin-left: 25px;'>
All | None
MISCELLANEOUS FEES:
</p>
<?php
if($pta_fee == $pta_fee_trans)
{
?>
<p class="sub_content_text" style='margin-left: 30px; color: #93BCCB;'>
<input type='checkbox' value="<?php echo $pta_fee; ?>" disabled>
PTA Fee : ₱ <?php echo $pta_fee; ?></p>
<?php
}
else
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="<?php echo $pta_fee; ?>" id="required-checkbox1" onClick="CheckIfChecked(this.id)">
PTA Fee : ₱ <?php echo $pta_fee; ?></p>
<?php
}
if($maintenance_fee == $maintenance_fee_trans)
{
?>
<p class="sub_content_text" style='margin-left: 30px; color: #93BCCB;'>
<input type='checkbox' value="<?php echo $maintenance_fee; ?>" disabled>
Maintenance Fee : ₱ <?php echo $maintenance_fee; ?></p>
<?php
}
else
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="<?php echo $maintenance_fee; ?>" id="required-checkbox2" onClick="CheckIfChecked(this.id)">
Maintenance Fee : ₱ <?php echo $maintenance_fee; ?></p>
<?php
}
if($id_school == $id_school_trans)
{
?>
<p class="sub_content_text" style='margin-left: 30px; color: #93BCCB;'>
<input type='checkbox' value="<?php echo $id_school; ?>" disabled>
School ID : ₱ <?php echo $id_school; ?></p>
<?php
}
else
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="<?php echo $id_school; ?>" id="required-checkbox3" onClick="CheckIfChecked(this.id)">
School ID : ₱ <?php echo $id_school; ?></p>
<?php
}
if($electricity == $electricity_trans)
{
?>
<p class="sub_content_text" style='margin-left: 30px; color: #93BCCB;'>
<input type='checkbox' value="<?php echo $electricity; ?>" disabled>
Electricity : ₱ <?php echo $electricity; ?></p>
<?php
}
else
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="<?php echo $electricity; ?>" id="required-checkbox4" onClick="CheckIfChecked(this.id)">
Electricity : ₱ <?php echo $electricity; ?></p>
<?php
}
?>
<div id="sub_profile_cont">
<div class="sub_profile left">
<p class="block_cont left">
<!--<input style="background: linear-gradient(rgb(20, 129, 191), rgb(13, 89, 160)); color: #ccc;" class="action_btn" type="button" id="pay_btn" value="COMPUTE" title="Select at least one" disable/>-->
<div id = "submit-button-container" style="display:none; "margin-bottom: -6px;"">
<input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>
</div>
<b style="display: none";>
<input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>
</b>
<!--<input class="action_btn" type="hidden" name="button" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>-->
</p>
</div>
</div>
</div>
</div>
</div>
</form>
Here's my script for the buttons:
This script is for checking checkbox one by one:
<script language="javascript">
function validate()
{
var chks = document.getElementsByName('draw[]');
var hasChecked = false;
for (var i = 0; i < chks.length; i++)
{
if (chks[i].checked)
{
hasChecked = true;
break;
}
}
if (hasChecked == false)
{
alert("Please select at least one.");
return false;
}
return true;
}
</script>
Here's the script for All checked all checkbox:
<script type="text/javascript">
function CheckIfChecked(id)
{
var CheckboxID = id;
var SubmitButtonContainerID = "submit-button-container";
if( document.getElementById(CheckboxID).checked ) { document.getElementById(SubmitButtonContainerID).style.display = "block"; }
else { document.getElementById(SubmitButtonContainerID).style.display = "none"; }
}
CheckIfChecked();
The output should be when I unchecked a checkbox, if one or more checkbox are still checked the button will stay. Another is if I clicked the All all checkbox will be checked but if I unchecked one checkbox and then checked it again onl

try this, but before you need to set jquery lib, for example like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<input type="checkbox">1
<input type="checkbox">2
<button style="display: none" id="one">one or more checked</button>
<button style="display: none" id="all">all checked</button>
<script>
$(function(){
$('[type=checkbox]').click(function ()
{
var checkedChbx = $('[type=checkbox]:checked');
if (checkedChbx.length > 0)
{
$('#one').show();
}
else
{
$('#one').hide();
}
if (checkedChbx.length == $('[type=checkbox]').length)
{
$('#all').show();
}
else
{
$('#all').hide();
}
});
});
</script>

Your Question is hard to understand,but i guess the following code will help you.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form id="drawing" action="" method="post">
<div id="sub_profile_cont">
<div class="sub_profile right">
<p class="sub_content_text" style='margin-left: 25px;'>
All | None
MISCELLANEOUS FEES:
</p>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="" id="required-checkbox1" onClick="CheckIfChecked()">
PTA Fee : ₱ </p>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="" id="required-checkbox2" onClick="CheckIfChecked()">
Maintenance Fee : ₱ </p>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="" id="required-checkbox3" onClick="CheckIfChecked()">
School ID : ₱</p>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="" id="required-checkbox4" onClick="CheckIfChecked()">
Electricity : ₱ </p>
<div id="sub_profile_cont">
<div class="sub_profile left">
<p class="block_cont left">
<!--<input style="background: linear-gradient(rgb(20, 129, 191), rgb(13, 89, 160)); color: #ccc;" class="action_btn" type="button" id="pay_btn" value="COMPUTE" title="Select at least one" disable/>-->
<div id = "first_button" style="display:none; "margin-bottom: -6px;"">
<input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>
</div>
<b style="display: none"; id="second_button">
<input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>
</b>
<!--<input class="action_btn" type="hidden" name="button" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>-->
</p>
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
function checkALL(){
var chk_arr = document.getElementsByName("draw[]");
for(k=0;k< chk_arr.length;k++)
{
chk_arr[k].checked = true;
}
CheckIfChecked();
}
function unCheckALL(){
var chk_arr = document.getElementsByName("draw[]");
for(k=0;k< chk_arr.length;k++)
{
chk_arr[k].checked = false;
}
CheckIfChecked();
}
function checkAny(){
var chk_arr = document.getElementsByName("draw[]");
for(k=0;k< chk_arr.length;k++)
{
if(chk_arr[k].checked==true){
return true;
}
}
return false;
}
function isCheckAll(){
var chk_arr = document.getElementsByName("draw[]");
for(k=0;k< chk_arr.length;k++)
{
if(chk_arr[k].checked==false){
return false;
}
}
return true;
}
function showFirstButton(){
document.getElementById('first_button').style.display = "block";
}
function hideFirstButton(){
document.getElementById('first_button').style.display = "none";
}
function showSecondButton(){
document.getElementById('second_button').style.display = "block";
}
function hideSecondButton(){
document.getElementById('second_button').style.display = "none";
}
function CheckIfChecked(){
checkAny() ? showFirstButton():hideFirstButton();
isCheckAll() ? showSecondButton():hideSecondButton();
}
</script>
</body>
</html>

How to close a popup light box

This is my code. Here Iam closing the popupbox using 'x'. But I want it to be closed by clicking on any radio button.
HTML:
<span>Book now <!--<div class="disp"><p>-->
<div id="light_<?php echo $vid;?>" class="white_content">
<label>Email:</label>
<?=$vehicle->Email; ?>
</p><p>
<label>Mobile:</label>
<?=$vehicle->Mobile; ?></p>
<p>
<form id="form_<?php echo $vid;?>" name="form1" method="post" action="">
<?php //echo $_REQUEST['email'];?>
<p>
<input type="hidden" name="vehicleid" value="<?php echo $vid;?>" id="vehicleid" />
<label>
<input type="radio" name="RadioGroup1_<?php echo $vid;?> " value="1" id="bstatus<?php echo $vid;?>" onClick="idForm(<?php echo $vid;?>)" />
Conform
</label>
<br />
<label>
<input type="radio" name="RadioGroup1<?php echo $vid;?>" value="0" id="bstatus1<?php echo $vid;?>" onClick="idForm(<?php echo $vid;?>)" />
Not Conform
</label>
<br />
</p>
</form>
<b>X</b>
</div>
<div id="fade" class="black_overlay"></div>
</div></span>
JS:
function idForm(str) {
var light = 'light_' + str;
var fade = 'fade' + str;
document.getElementById(light).style.display = 'none';
document.getElementById(fade).style.display = 'none';
var confirmval = 'bstatus' + str;
var unconfirmval = 'bstatus1' + str;
if (document.getElementById(confirmval).checked) {
var selectvalue = document.getElementById(confirmval).value;
}

Javascript list.js to this php code

I love this script list.js from www.listjs.com. It seems to be the perfect fit for searching and filtering the output of a php file below, but I just can get it to work, I only need to add 7 or so lines of code but its not working. Can anyone tell me how come? Thanks
The code that I added is highlighted
<?php
defined('_JEXEC') or die();
?>
**<script type="text/javascript" src="list.js"></script>**
<form action="<?php echo CRoute::getURI(); ?>" method="post" id="jomsForm" name="jomsForm" class="community-form-validate">
<div class="jsProfileType" **id="jsProfileType"**>
**<input class="search" placeholder="Search" />
<button class="sort" data-sort="label">
Sort
</button>**
<ul class="unstyled">
<?php
foreach($profileTypes as $profile)
{
?>
<li class="space-12">
<label for="profile-<?php echo $profile->id;?>" class="radio">
<input id="profile-<?php echo $profile->id;?>" type="radio" value="<?php echo $profile->id;?>" name="profileType" <?php echo $default == $profile->id ? ' disabled CHECKED' :'';?> />
<strong class="bold"><?php echo $profile->name;?></strong>
</label>
<?php if( $profile->approvals ){?>
<span class="help-block"><?php echo JText::_('COM_COMMUNITY_REQUIRE_APPROVAL');?></span>
<?php } ?>
<span class="help-block">
<?php
$profile->description = JHTML::_('content.prepare',$profile->description);
echo $profile->description;?>
</span>
<?php if( $default == $profile->id ){?>
<em><?php echo JText::_('COM_COMMUNITY_ALREADY_USING_THIS_PROFILE_TYPE');?></em>
<?php } ?>
</li>
<?php
}
?>
</ul>
</div>
<?php if( (count($profileTypes) == 1 && $profileTypes[0]->id != $default) || count($profileTypes) > 1 ){?>
<div style="margin-top: 5px;">
<?php if( $showNotice ){ ?>
<span style="color: red;font-weight:700;"><?php echo JText::_('COM_COMMUNITY_NOTE');?>:</span>
<span><?php echo $message;?></span>
<?php } ?>
</div>
**<script>
var options = {
list: "space-12"
};
var userList = new List('jsProfileType', options);
</script>**
<table class="ccontentTable paramlist" cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td class="paramlist_key" style="text-align:left">
<div id="cwin-wait" style="display:none;"></div>
<input class="btn btn-primary validateSubmit" type="submit" id="btnSubmit" value="<?php echo JText::_('COM_COMMUNITY_NEXT'); ?>" name="submit">
</td>
<td class="paramlist_value">
</td>
</tr>
</tbody>
</table>
<?php } ?>
<input type="hidden" name="id" value="0" />
<input type="hidden" name="gid" value="0" />
<input type="hidden" id="authenticate" name="authenticate" value="0" />
<input type="hidden" id="authkey" name="authkey" value="" />
</form>

I don't know PHP, but I have seen this error before when I used list.js in my own project. It turned out I didn't define things properly.
You did set up a div with a proper id, but you seem to be missing a 'list' class. Try changing
<ul class="unstyled">
to
<ul class="list">
Second, I don't think that 'list' is a supported keyword in options (at least not in the most recent list.js version). Try changing your options definition to
var options = {
valueNames: [ 'space-12' ]
};
Third, if you want search to work change
<button class="sort" data-sort="label">
to
<button class="sort" data-sort="space-12">

Develop Reference

JavaScript is the programming language of the Web.

Change divs twice on different form submissions - javascript

Related

How to get Specific Button ID when submitting a form?

PHP radiobutton on click event change

Hide button when no checkbox is checked and show button if Check All is clicked or one or more checkbox is clicked

How to close a popup light box

Javascript list.js to this php code

Categories

Resources