Develop Reference

Display Jquery Response in HTML

I am learning PHP and JavaScript. I have form using DropZone.js which upload files and giving response using Jquery Like below
<form class="dropzone" id = "image-upload" method="POST" action="upload.php">
<div class="form-label-group">
<input type="text" id="brand" class="form-control" placeholder="Brand Name" required autofocus>
<label for="brand"></label>
</div>
<div class="form-label-group">
<input type="text" id="reference" class="form-control" placeholder="Reference" required>
<label for="reference"></label>
</div>
<div class="form-label-group">
<input name="attached_files" value="" />
</div>
</form>
and JavaScript Like below
<script type="text/javascript">
Dropzone.autoDiscover = false;
jQuery(".dropzone").dropzone({
acceptedFiles: "image/*",
maxFilesize: 2, // MB
success : function(file, response) {
//console.log(file);
console.log(response);
if (response['target_file'] != '') {
var currentValue = jQuery("#image-upload input[name='attached_files'").val();
if (currentValue == '') {
jQuery("#image-upload input[name='attached_files'").val(response['target_file']);
} else {
jQuery("#image-upload input[name='attached_files'").val(currentValue + ", " + response['target_file']);
}
}
}
});
</script>
Its working fine as expected and showing me uploaded files in
<input name="attached_files" value="" />
But instead I want it as comma separated and <pre></pre> so it can look more better. Let me know if someone can help me for achieving my goal.
Thanks!

Submit form not working when using jQuery

I have a form and when the user clicks submit, I would like the form to hide and a thank you message to appear. Unfortunately with the code I have, it's not working and I can't figure out why. I think it might be something with the jQuery so I'd like to try and re-write this function using vanilla JS, but I'm not sure how.
It is the last part of the function, the if (empty.length), hide form, show thank you message that is causing me problems. Everything else is working fine, so its this function I would like to try and write in JavaScript, or try another way using jquery to make it work. The problem is it doesn't work in my code, but when I open this in a jsfiddle, it doesnt just hide the form it opens a new page and I get an error. I don't want the user to be directed to a new page, I just want the form to close and thank-you message to appear. I am very new to this so I apologize if my code is messy.
UPDATE: I really think the issue here is the jQuery, can I write this in plain JS and would that fix it?
var $subscribe = $('#click-subscribe');
var $subscribeContent = $('#subscribe-content');
var $subscribeClose = $('#subscription-close');
$subscribeContent.hide();
$subscribe.on('click', function(e) {
e.preventDefault();
$subscribeContent.slideToggle();
});
$subscribeClose.on('click', function(e) {
e.preventDefault();
$subscribeContent.slideToggle();
})
var $form = $('#signup-form'),
$signupForm = $('.form-show'),
$formReplace = $('#thank-you');
$formReplace.hide();
$form.on('submit', function() {
var empty = $(this).find("input, select, textarea").filter(function() {
return this.value === "";
});
if (empty.length <= 0) {
$signupForm.hide();
$formReplace.show();
} else {
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click-subscribe">Show / hide form</button>
<div id="subscribe-content">
<div class="subscription-signup">
<div class="subscription-close" id="subscription-close"></div>
<div class="email-signup">
<p class="cat-title subscription-text">lorem ipsum</p>
<p class="subscription-text">lorem ipsum</p>
<p class="subscription-text">lorem ipsum</p>
<div class="subscription-form">
<form id="signup-form" class="form-show" name="signup-form" method="post" action="${URLUtils.url('Newsletter-SubscribeMobile')}">
<div class="form-row salutation header">
<label for="salutation">Title</label>
<div class="chzn-row valid salutation">
<select id="title" name="title" class="chzn-global-select input-select optional required">
<option value="">--</option>
<option value="Mr">Mr.</option>
<option value="Mrs">Mrs.</option>
<option value="Ms">Ms.</option>
<option value="Miss">Miss</option>
</select>
</div>
</div>
<div class="form-row required">
<label for="firstname">
<span aria-required="true">First Name</span>
<span class="required-indicator">*</span>
</label>
<input class="input-text required" id="firstname" type="text" name="firstname" value="" maxlength="500" autocomplete="off">
</div>
<div class="form-row required">
<label for="lastname">
<span aria-required="true">Surname</span>
<span class="required-indicator">*</span>
</label>
<input class="input-text required" id="lastname" type="text" name="lastname" value="" maxlength="500" autocomplete="off">
</div>
<div class="form-row required">
<label for="signup-email" style="display:none;">Email</label>
<input class="header-signup-email" type="text" id="signup-email-header" name="signup-email" value="" placeholder="Email" />
</div>
<div class="form-row text-center">
<input type="submit" name="signup-submit" id="signup-submit" class="subscribe-submit" value="Submit" />
</div>
</form>
<div id="thank-you">
<p>Thanks for subscribing!</p>
</div>
</div>
</div>
</div>
</div>

I think some other javascript/jQuery code are making issues to run the codes, for simple solution make your code as plugin and called it like following.
create new js file called validation.js
(function($){
$.fn.validation = function(){
var $subscribe = $('#click-subscribe');
var $subscribeContent = $('#subscribe-content');
var $subscribeClose = $('#subscription-close');
$subscribeContent.hide();
$subscribe.on('click', function(e) {
e.preventDefault();
$subscribeContent.slideToggle();
});
$subscribeClose.on('click', function(e) {
e.preventDefault();
$subscribeContent.slideToggle();
});
var $form = $('#signup-form'), $signupForm = $('.form-show'), $formReplace = $('#thank-you'); $formReplace.hide();
this.on('submit', function(e){
var empty = $(this).find("input, select, textarea").filter(function() {
return this.value === "";
});
if(empty.length == 0){
$signupForm.hide();
$formReplace.show();
}
e.preventDefault();
});
};
})(jQuery);
Now, call the validation.js at the head like below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="validation.js"></script>
<script type="text/javascript">
$(function(){
$('#signup-form').validation();
});
</script>

Validating login form using javascript

I'm relatively new to HTML and JS and I've been trying to create a simple login page that on entering valid credentials redirects to index.html page. But no matter what I enter it always redirects to the index.html page. Here's the HTML code for the login page
<form role="form" action="index.html" name="formlogin" method="post" class="login-form" onsubmit="check_info()">
<div class="form-group">
<label class="sr-only" for="form-username">Username</label>
<input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username">
</div>
<div class="form-group">
<label class="sr-only" for="form-password">Password</label>
<input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password">
</div>
<button type="submit" class="btn" value="submit">Sign in!</button>
</form>
Here's the javascript
<script type="text/javascript">
function check_info()
{
var myform = document.formlogin;
if(myform.form-username.value == "test")
{
if(myform.form-password.value == "123")
{
return true;
}
}
else
{
return false;
}
}
</script>
P.S: I'm using a bootstrap login template.

Html:
onsubmit="return check_info()"
Javascript:
function check_info()
{
var user = document.getElementById("form-username").value;
var pass = document.getElementById("form-password").value;
if(user == "test")
{
if(pass == "123")
{
return true;
}
}
return false;
}

You can use required parameter like this:
<input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username" required>

jQuery Validate forms by sections

i am trying to use jQuery validate to validate a big form that i have cut in 3 different sections.
personal information
job information
additional information
is there a way for me to validate the content every time the user hits continue? and then when they get to the last section they can submit the ENTIRE form?
form
<form method="post" name="form" id="form" class="form">
<div class="section_one form-wrapper-top-margin active">
<div class="columns-2 float-left">
<input name="name" id="name" type="text" class="" value=""/>
</div>
<div class="columns-2 float-right margin-0">
<input name="email" id="email" type="text" class="" value=""/>
</div>
<div class="columns-2 float-right margin-0">
<input name="button" type="button" value="Continue" id="btn_1"/>
</div>
</div>
<div class="section_two form-wrapper-top-margin">
<div class="columns-1 margin-0">
<input name="address" id="address" type="text" class="" value=""/>
</div>
<div class="columns-1 margin-0">
<textarea name="description" id="description" type="text" class=""></textarea>
</div>
<div class="columns-2 float-right margin-0">
<input name="button" type="button" value="Continue" id="btn_2"/>
</div>
</div>
<div class="section_there form-wrapper-top-margin">
<div class="columns-1 margin-0">
<textarea name="description" id="description" type="text" class=""></textarea>
</div>
<div class="columns-2 float-right margin-0">
<input name="submit" type="submit" id="submitbtn" value="Send your message"/>
</div>
</div>
</div>
</div>
</form>
i dont put the jQuery code here because i dont know where to start. i know jQuery validate, validates an entire form, but i never seen it done by sections with out splitting it into 3 different forms.
Thanks for the help...

You can do like this also:-
$(".section_two").click(function(){
//Your code for validation of section one.
});
$(".section_three").click(function(){
//Your code for validation of section one and section two.
});
$("#submitbtn").click(function(){
//Your code for validation of section three.
});
Let me know if this helps.

I found the answer here:
jQuery button validate part of a form at a time
this is the code i used
var validator = $('#form').validate({
ignore: 'input.continue,input#submitbtn',
rules: {
name: {
required: true
},
email: {
required : true
},
date: {
required: true
},
},
messages: {
name: "Enter your name",
email: {
require: "Please enter a valid email address",
email: "Enter a valid email"
},
},
errorPlacement: function(error, element) { },
});
$('#continue1').on('click', function(){
var tab = $(".section_one.active");
var sec1 = $('.inner_section_container');
var valid = true;
$('input', tab).each(function(i, v){
valid = validator.element(v) && valid;
});
if(!valid){
return;
}else{
$('.inner_section_container').animate({'left':'-1080px'});
}
});
$('#continue2').on('click', function(){
var tab = $(".section_two.active");
var sec1 = $('.inner_section_container');
var valid = true;
$('input', tab).each(function(i, v){
valid = validator.element(v) && valid;
});
if(!valid){
return;
}else{
$('.inner_section_container').animate({'left':'-2160px'});
}
});
thanks for everyone's advise...

How to check if function returns true

I have a web form that submits if my function validate form returns true in that function i wrote an if statement that if another function called usernamecheck returns true then return the validateform function true. I dont want the form to submit unless you click the button to check the username. I know i didnt write this the best way i hope you understand
<!-- Signup Form -->
<form name='signup' action="subscription.php" onsubmit="return validateForm();" method="post" >
<input type="text" id="signupUsername" name="signupusername" placeholder="Business Name" tabindex=1 required>
<input type="password" id="signupPassword" placeholder="Password" name="signuppassword" tabindex=2 required> <br>
<input type="text" id="ownerName" placeholder="Owner's Name" name="ownername" tabindex=3 required>
<input type="email" id="signupEmail" placeholder="Email" name="signupemail" tabindex=4 required>
<input type="tel" id="signupphoneNumber" placeholder="Phone Number" name="signupphonenumber" tabindex=5 required>
<input type="image" id="signupSubmit" src="images/signupBtn.jpg">
<input type="text" id="city" placeholder="City" name="city" tabindex=6>
<input type="text" id="state" placeholder="State" name="state" tabindex=7>
This is the button that you click to check your username if it exists
<input type="button" id='check' value="Check It">
//
</form>
<script type="text/javascript">
Below there is the function where if you click the button above it checks the function usernamecheck
$(function() {
$( "#check" ).click(function() {
return usernamecheck();
});
});
Below is the validateForm function where if usernamecheck returns true it returns true as well and submits the form
function validateForm()
{
if(usernamecheck() && $("#signupUsername").val().length < 4) {
return true;
}
}
function usernamecheck() {
$.post( "checkusername.php", { username: $("#signupUsername").val() })
.done(function( data ) {
result = JSON.parse(data);
if(result["status"]== "Username is taken")
{
alert("username is taken");
return false;
}
else if(result["status"]== "Username is Available") {
alert("username is Available");
return true;
}
else {
alert('You did not check the username');
}
});
}
</script>
<!-- Map Logo -->
<img src='images/map.jpg' id="map" class='menuitems'>
<!-- About Us Logo -->
<img src='images/aboutus.jpg' id="aboutus" class='menuitems'>
<!-- People Logo -->
<img src='images/people.jpg' id="people" class='menuitems'>
</div>
</div>
</div>
</body>
</html>