We Keep Coding

Form that changes class attribute to active

I have a web page associated with 3 <li> and each has its own onclick() function. By default, one of them is active. Now I have a form, if this form is submitted I want it to take me to one of the other two <li>.
In other words, I want it to remove the active class from the default one, and add it to one of the other two. How can I do that?
HTML:
<div class="container">
<ul class="editor-nav">
<li id="content-w" class="en-nav active">1. Add Status</li>
<li id="setting-w" name="setting-w" class="en-nav">2. Upload Image</li>
<li id="cover-w" class="en-nav">3. Upload Video</li>
</ul>
</div>
<div class="be-large-post-align" id="firstdiv">
<form class="" action="work.php" method="post">
<textarea id="special" name="post" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>
<input type="submit" name="submitMe" class="buttons-navbar btn btn-primary" value="POST" /></form>
</div>
<div class="be-large-post-align" id="seconddiv" style="display:none;">
<form class="" action="work.php" method="post" enctype="multipart/form-data">
<!-- <label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" multiple="multiple" style="display:none"
onchange="$('#upload-file-info').html(this.files[0].name)">
Button Text Here
</label>
<span class='label label-info' id="upload-file-info"></span> -->
Select Image Files to Upload:
<input type="file" name="files[]" multiple>
<textarea id="special" name="post2" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>
<input type="submit" name="submitIt" class="buttons-navbar btn btn-primary" value="Upload" />
</form>
</div>
<div class="be-large-post-align" id="thirddiv" style="display:none;">this is working! </div>
JQuery:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" > </script>
<script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"> </script>
<script type = "text/javascript" >
$("#setting-w").on("click", function() {
$("#firstdiv").fadeOut(1, function() {
$("#seconddiv").fadeIn(1, function() {});
$("#thirddiv").fadeOut(1, function() {});
});
});
$("#content-w").on("click", function() {
$("#seconddiv").fadeOut(0.1, function() {
$("#firstdiv").fadeIn(0.1, function() {});
$("#thirddiv").fadeOut(0.1, function() {});
});
});
$("#cover-w").on("click", function() {
$("#seconddiv").fadeOut(0.1, function() {
$("#firstdiv").fadeOut(0.1, function() {});
$("#thirddiv").fadeIn(0.1, function() {});
});
});
</script>

Use data attribute to fade your div.
$('.editor-nav li').click(function(e) {
$('.editor-nav li').removeClass('active');
var data = $(this).data('myval');
if (data == "2" || data == "3") {
$(this).addClass('active');
var tstDiv = data - 1;
$(this).attr('disabled', true);
$(document).find($('*[data-val="' + data + '"]')).fadeIn();
$(document).find($('*[data-val="' + tstDiv + '"]')).fadeOut();
}
});
.active {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container">
<ul class="editor-nav">
<li data-myval="1" id="content-w" class="en-nav active">1. Add Status</li>
<li data-myval="2" id="setting-w" name="setting-w" class="en-nav">2. Upload Image</li>
<li data-myval="3" id="cover-w" class="en-nav">3. Upload Video</li>
</ul>
</div>
<div data-val="1" class="be-large-post-align" id="firstdiv">
<form class="" action="work.php" method="post">
<textarea id="special" name="post" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>
<input type="submit" name="submitMe" class="buttons-navbar btn btn-primary" value="POST" /></form>
</div>
<div data-val="2" class="be-large-post-align" id="seconddiv" style="display:none;">
<form class="" action="work.php" method="post" enctype="multipart/form-data">
<!-- <label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" multiple="multiple" style="display:none"
onchange="$('#upload-file-info').html(this.files[0].name)">
Button Text Here
</label>
<span class='label label-info' id="upload-file-info"></span> -->
Select Image Files to Upload:
<input type="file" name="files[]" multiple>
<textarea id="special" name="post2" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>
<input type="submit" name="submitIt" class="buttons-navbar btn btn-primary" value="Upload" />
</form>
</div>
<div data-val="3" class="be-large-post-align" id="thirddiv" style="display:none;">this is working! </div>
After page submit if your page is reloaded page loose state. So set your value when page submit like:
localStorage.setItem('key', 'your form Number')
Get localStorage when page load like:
var formID = localStorage.getItem('key');
After that check for null before add class:
if (localStorage.getItem("key") != null) {
(".editor-nav ul li").eq(formID ).addClass("active"); // Check this one on page load
}

You can use removeClass() and addClass() if you wish to add/remove any class based on their id.
Example:
$("#setting-w").on("click", function(){
$("#content-w").removeClass('active');
$("#cover-w").removeClass('active');
$("#setting-w").addClass('active');
}

How to submit for after all the fields are filled in JavaScript

Basically I have a HTML form that contains a textbox and a submit button, what I want is when I pressed submit button it should check for the textbox that it have no error then proceed with submission.
Here is my button code:
<form id="thisform">
<div id="Registeration" class="Registeration">
<input type="text" id="textbox" class="textbox"
placeholder="My textbox" name="fBox" maxlength="30"/>
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="submitform" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" onclick="submit()"/>
</div></form>
function(){
alert('hello');
return false;
}

Here's a plain JS example where the form is only submitted if the text is at least 5 characters long.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="POST" action="result.html" class="da-form">
<input type="text" name="textbox" class="textbox">
<input type="submit" class="submit">
</form>
<script>
var formEl = document.querySelector('.da-form');
var submitBtn = document.querySelector('.da-form .submit');
var textEl = document.querySelector('.textbox');
submitBtn.addEventListener('click', function(event) {
event.preventDefault();
if (textEl.value.length >= 5) {
formEl.submit();
} else {
console.error('text should be at least 5 chars long');
}
console.log();
});
</script>
</body>
</html>

you can use AngularJS:
Angular allow you to get status about your form: $invalid/$valid
the following code will disable the button until the form will be valid:
<input type="button" value="Submit" ng-click="submit()" class="button" ng-disabled="myForm.$invalid">
please see the following example:
HTML:
<div ng-app>
<form ng-controller="FormController" name="myForm">
<div class="header padding-b--10">Form Area</div>
<div class="padding-b--10">
<input name="empId" placeholder="Employee ID" ng-model="data.empId"
style="padding:5px" required/>
<span ng-if="myForm.empId.$dirty && myForm.empId.$invalid" ng-bind="invalid" class="error"></span>
</div>
<div class="padding-b--10">
<input name="empEmail" type="email" placeholder="Email" ng-model="data.empEmail"
style="padding:5px" required/>
<span ng-if="myForm.empEmail.$dirty && myForm.empEmail.$invalid" ng-bind="invalid" class="error"></span>
</div>
<input type="button" value="Submit" ng-click="submit()" class="button" ng-disabled="myForm.$invalid">
</form>
Controller:
function FormController($scope){
$scope.invalid = "Invalid";
$scope.submit = function(){
console.log($scope.data);
}
};
Working Example: https://jsfiddle.net/pqz3hsac/22/

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>

Hide Submit button after send form with load method

I create a form and send request to other page with :
$(document).ready(function() {
$("#send").click(function() {
var text = $("#text").val();
var email = $("#email").val();
$("#exp").load("sendmail.php",{text:text,email:email});
});
});
and my form code :
<ul>
<li><input type="text" name="name" id="text" /></li>
<li><input type="text" name="email" id="email"/></li>
<button class="button" id="send" >send email</button>
<div id="exp" style="color:green;"></div>
</ul>
how i can hide submit button after send mail ?

jQuery:
$(document).ready(function() {
$("#send").click(function() {
var text = $("#text").val();
var email = $("#email").val();
$.post("sendmail.php",{text:text,email:email}, function(){
$('.form').hide();
});
});
});
Html:
<ul class="form">
<li><input type="text" name="name" id="text" /></li>
<li><input type="text" name="email" id="email"/></li>
<button class="button" id="send" >send email</button>
<div id="exp" style="color:green;"></div>
</ul>

Hide div on click

<div id="result">Fade me in and hide div hideme</div>
<div id="hideme">
<form method="POST">
YES <input type="radio" name="name" value="yes" />
NO <input type="radio" name="name" value="no" checked />
<p />
<input type="submit" id="submit" name="submit" value="HIDE NOW!" />
</form>
</div>
<script>
$(document).ready(function() {
$('#result').hide();
$('#submit').click(function() {
$('#hideme').hide();
$('#result').fadeIn(5000);
});
});
</script>
Here is the jsfiddle
Why is the second hide not working after clicking and fadeOut the div

You have to use .preventDefault() to prevent the default behaviour of the submit button. Or use a normal button(type='button') instead of a submit button.
Try,
$(document).ready(function () {
$('#result').hide();
$('#submit').click(function(e) {
e.preventDefault();
$('#hideme').hide();
$('#result').fadeIn(5000);
});
});
DEMO

To post you need to AJAX and preventDefault to not submit
Also never call anything in a form submit
$(function() {
$('#result').hide();
$('#form1').on("submit", function(e) {
e.preventDefault(); // stop form submission
$('#hideme').hide();
$.post(this.action, { "name": $("input[name='name']").val()},function(data) {
$('#result').html(data).fadeIn(5000);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">Fade me in and hide div hideme</div>
<div id="hideme">
<form id="form1" method="POST" action="someaction.php">
YES <input type="radio" name="name" value="yes" /> NO <input type="radio" name="name" value="no" checked />
<p />
<input type="submit" value="HIDE NOW!" />
</form>
</div>