how to hide the error message in javascript

how to hide the error message in javascript - javascript

i have one file upload form field,here without select any file means i want to show error message,from this code it will be working fine after that i select anyone file means i want hide the error message ,i don't know how to do this???
$("#horoscope_form").submit(function(e) {
e.preventDefault();
var filename = document.forms["myForm"]["Filename"].value;
if (filename == null || filename == "") {
$("#fileselect_error").show();
return false;
} else {
var filename = document.getElementById("myFile").value;
alert(filename);
$("#fileselect_error").hide();
return false;
}
});
<form method="post" enctype="multipart/form-data" class="form-horizontal" style="margin-top: 20px;" id="horoscope_form" name="myForm">
<div class="form-group">
<label class="control-label col-xs-3">File Upload</label>
<div class="col-md-9">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-default btn-file" id="fileinput">
<span class="fileupload-exists">Change</span>
<span class="fileupload-new">Select file</span>
<input type="file" id="myFile" name="Filename">
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-xs-5">
<span id="fileselect_error"><strong >Error!</strong> Please select your file.</span>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-md-12">
<button class="btn btn-primary" value="register" type="submit">Upload The Horoscope</button>
</div>
</div>
</form>

Changes Made
$("input:file").change(function (){
console.log($(this).val().trim())// You will get the input value.
if($(this).val().trim().length){
$("#fileselect_error").hide();
}
else{
$("#fileselect_error").show();
}
});
Working Example
$(document).ready(function() {
//$("#fileselect_error").hide();
$("input:file").change(function() {
console.log($(this).val().trim())
if ($(this).val().trim().length) {
$("#fileselect_error").hide();
} else {
$("#fileselect_error").show();
}
});
$("#horoscope_form").submit(function(e) {
e.preventDefault();
var filename = document.forms["myForm"]["Filename"].value;
if (filename == null || filename == "") {
$("#fileselect_error").show();
return false;
} else {
var filename = document.getElementById("myFile").value;
alert(filename);
$("#fileselect_error").hide();
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data" class="form-horizontal" style="margin-top: 20px;" id="horoscope_form" name="myForm">
<div class="form-group">
<label class="control-label col-xs-3">File Upload</label>
<div class="col-md-9">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-default btn-file" id="fileinput">
<span class="fileupload-exists">Change</span>
<span class="fileupload-new">Select file</span>
<input type="file" id="myFile" name="Filename">
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-xs-5">
<span id="fileselect_error"><strong >Error!</strong> Please select your file.</span>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-md-12">
<button class="btn btn-primary" value="register" type="submit">Upload The Horoscope</button>
</div>
</div>
</form>

Have a change event handler for the file input control and set the display property of the error message there
$("#horoscope_form").submit(function(e) {
e.preventDefault();
var valid = !!$('#myFile').val();
$("#fileselect_error").toggle(!valid);
return valid;
});
$('#myFile').change(function() {
$("#fileselect_error").toggle(!this.value);
})
#fileselect_error {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data" class="form-horizontal" style="margin-top: 20px;" id="horoscope_form" name="myForm">
<div class="form-group">
<label class="control-label col-xs-3">File Upload</label>
<div class="col-md-9">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-default btn-file" id="fileinput">
<span class="fileupload-exists">Change</span>
<span class="fileupload-new">Select file</span>
<input type="file" id="myFile" name="Filename">
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-xs-5">
<span id="fileselect_error"><strong >Error!</strong> Please select your file.</span>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-md-12">
<button class="btn btn-primary" value="register" type="submit">Upload The Horoscope</button>
</div>
</div>
</form>

Add a class of hide, and the remove it like this:
jsfiddle
.hide {
display: none
}

Related

how can ı access all inputs in form

I found this code in https://codepen.io/pkbhuiyan/pen/VaVNQd . I passed "id" to form tag and I am trying to access all inputs in form tag but it does not work.
jQuery:
$(document).ready(function () {
jQuery(function ($) {
var $inputs = $( "#contact_form :input" ).prop("disabled", true);;
$("#edit_btn").click(function () {
$("#submit_btn").show(0);
$("#edit_btn").hide(0);
$inputs.prop("disabled", false);
});
$("#submit_btn").click(function () {
$inputs.prop("disabled", true);
$("#submit_btn").hide(0);
$("#edit_btn").show(0);
});
});
});
HTML:
<div id="kursiyerprofili">
<form action="/" method="post">
<div class="main">
<div class="container-fluid">
<div class="row">
<div class="contact_form col-sm-10 col-md-10">
<form name="contact_form" id="contact_form" class="contact_form" method="post">
<div class="row">
<div class="col-sm-5 col-md-5">
<label>İSİM</label>
<input name="name" id="student-name" class="form-control" type="text" value="" />
</div>
<div class="col-sm-5 col-md-5">
<label>SOYİSİM</label>
<input name="surname" id="student-surname" class="form-control" type="text" value="" />
</div>
<div class=" pull-right profile-edit-button ">
<a id="edit_btn" class="btn btn-warning" name="submit">Profili Düzenle</a>
<a id="submit_btn" class="btn btn-warning" name="submit">Değişiklikleri Kaydet</a>
<!--<span id="notice" class="alert alert-warning alert-dismissable hidden" style="margin-left:20px;"></span>-->
</div>
</div>
</form>
</div> <!--contact-form-->
</div> <!--row-->
</div> <!--container-fluid-->
</div> <!--main-->
</form>
</div>

If my form is like below:
<form id="myForm" action="/action_page.php"></form>
I can access all elements like bwlow:
document.getElementById("myForm").elements

The jQuery way:
$("form").each(function(){
$(this).find(':input')
});

How to prevent adding double input with onclick button

Hi guys so when I try to add a question and answers this code works. But if I have made 2 questions and want to add a answer it will put an extra "answer" field in BOTH of the question. But ofcourse I only want to add an answer field to the "question" button i clicked on
var question = 0;
function add_question() {
question++;
var allquestions = document.getElementById('all_questions')
var divquestion = document.createElement("div");
divquestion.innerHTML = `
<div id="all_questions">
<div class="form-group">
<label for="question" class="col-form-label">Question `+ question + `:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-question"></i></span></div>
<input type="text" class="form-control" name="question">
</div>
</div>
<div class="form-group mx-5">
<label for="answer" class="col-form-label">answer 1:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
<div class="form-group mx-5">
<label for="title" class="col-form-label">answer 2:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
<div id="all_answers">
</div>
<button type="button" class="btn btn-success m-1" onclick="add_answer()">add answer</button>
<hr>
</div>
`;
allquestions.appendChild(divquestion)
}
var answer = 2;
function add_answer() {
answer++;
var allanswers = document.getElementById('all_answers')
var divanswer = document.createElement("div");
divanswer.innerHTML = `
<div class="form-group mx-5">
<label for="title" class="col-form-label">answer ` + answer + `:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
`;
allanswers.appendChild(divanswer)
}
<div class="modal-body">
<div class="row">
<div class="col">
<form class="form-horizontal" action="functions/postSurveyActions.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="col-form-label">Title:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-tags"></i></span></div>
<input type="hidden" name="hiddenSurveyGet"/>
<input type="text" class="form-control" name="title">
</div>
</div>
<div class="form-group">
<label for="description" class="col-form-label">Description:</label>
<textarea type="text" class="form-control" rows="4" name="description"></textarea>
</div>
<div class="list-group" id="myList">
<a class="list-group-item active main-color-bg">Survey:</a>
</div>
<button type="button" class="btn btn-success m-2" onclick="add_question()">add question</button>
<div id="all_questions">
<!-- this is the place where all questions get included with javascript -->
<hr>
</div>
<button type="button" class="btn btn-success m-2 float-right btnAddSurvey">Add survey</button>
</form>
</div>
</div>
</div>
If something is unclear I will try to explain it.
Please dont be to harsh I am pretty new to javascript...

All you needed to do was specify in your questions container an ID for where to put your answers in your add answer function i just used the question increment as an id and added that to the <div id="all_answers_${id}"> id and passed the id in the click function onclick="add_answer(${id})".
var question = 0;
function add_question() {
question++;
var allquestions = document.getElementById('all_questions')
var divquestion = document.createElement("div");
var id = question;
divquestion.innerHTML = `
<div id="all_questions">
<div class="form-group">
<label for="question" class="col-form-label">Question `+ question + `:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-question"></i></span></div>
<input type="text" class="form-control" name="question">
</div>
</div>
<div class="form-group mx-5">
<label for="answer" class="col-form-label">answer 1:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
<div class="form-group mx-5">
<label for="title" class="col-form-label">answer 2:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
<div id="all_answers_${id}">
</div>
<button type="button" class="btn btn-success m-1" onclick="add_answer(${id})">add answer</button>
<hr>
</div>
`;
allquestions.appendChild(divquestion)
}
var answer = 2;
function add_answer(id) {
answer++;
var allanswers = document.getElementById('all_answers_'+id)
var divanswer = document.createElement("div");
divanswer.innerHTML = `
<div class="form-group mx-5">
<label for="title" class="col-form-label">answer ` + answer + `:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
`;
allanswers.appendChild(divanswer)
}
<div class="modal-body">
<div class="row">
<div class="col">
<form class="form-horizontal" action="functions/postSurveyActions.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="col-form-label">Title:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-tags"></i></span></div>
<input type="hidden" name="hiddenSurveyGet"/>
<input type="text" class="form-control" name="title">
</div>
</div>
<div class="form-group">
<label for="description" class="col-form-label">Description:</label>
<textarea type="text" class="form-control" rows="4" name="description"></textarea>
</div>
<div class="list-group" id="myList">
<a class="list-group-item active main-color-bg">Survey:</a>
</div>
<button type="button" class="btn btn-success m-2" onclick="add_question()">add question</button>
<div id="all_questions">
<!-- this is the place where all questions get included with javascript -->
<hr>
</div>
<button type="button" class="btn btn-success m-2 float-right btnAddSurvey">Add survey</button>
</form>
</div>
</div>
</div>

how to change bootstrap card-header value with java script?

I have a ejs(html) file, and There is a div class called "card".
What I want to do is that, if I click the button("Click me") then,
card-header(header1) has to be changed(before --> after) with colored back-ground.
However when I clicked the button, only the back-ground color was changed (excluding the header). need your help.
function save() {
var x = document.getElementById("header1");
x.style.backgroundColor="#cfe8f9";
x.setAttribute("value", "After");
}
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="header1" style="font-weight:bold;">before</div>
<div class="card-body">
<form action="" method="POST">
<input type="hidden" id="input_flag" value="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">noID</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq_1" class="form-control" value="" style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
...
...
...
<button type="button" class="btn btn-primary" onclick ="save()">Click me</button>
</div> //end of col-sm-6

Update the innerHTML
function save() {
var x = document.getElementById("header1");
x.style.backgroundColor="#cfe8f9";
x.innerHTML = "After";
}
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="header1" style="font-weight:bold;">before</div>
<div class="card-body">
<form action="" method="POST">
<input type="hidden" id="input_flag" value="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">noID</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq_1" class="form-control" value="" style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
...
...
...
<button type="button" class="btn btn-primary" onclick ="save()">Click me</button>
</div> //end of col-sm-6

Saving dynamically added li and ul element to database using an array

I'm trying to build a User interface of an application where user could add ul and li element when clicking on add question, I successfully managed to develop the front end part here's a preview:
but the problem is when saving this to the database which is so overwhelming I'm stuck at this, is there any way to save the data to an array so I can display them with php, any idea is welcomed.
here's the jquery code:
wrapper.on("click", "button", function(e){
e.preventDefault();
var parent = $(this).parent().parent().parent().parent().parent().parent();
var parentID = $(this).attr('element-id');
var elementID = 1000000000000000000*Math.random();
parentIDs.push(elementID);
if($(this).attr('class') == "add_field_button btn btn-success"){
if(parent.find('ul').length){
parent.find('ul').first().append(`
<li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li>`);
}else{
$(this).closest('li').append(`
<ul><li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li></ul>`);
}
}else if($(this).attr('class') == "delete_field_button btn btn-error"){
parent.remove();
}
Thanks is advance.

Well...
If the whole user-interative-area, I'd call a playground, can be put inside a container:
<div id='playground'>
.. all the ul's and li's..
</div>
And if you've got a form or something else:
<form action='/' id='form-playground' method='post'>
<textarea id='playground-container' name='playground' class='hidden'>
</textarea>
<input type='submit' value='Save My Playground'>
</form>
Then on submit you can copy the contents of the the playground to a hidden textarea:
$(document).ready(function () {
$('#form-playground').on('submit', function () {
$('#playground-container').html($('#playground').html());
return true;
});
});
Or perhaps an AJAX post:
$.post( PostUrl, { playground: $('#playground').html() } );

Bootstrap - Submit file input form?

I have this Bootstrap from model, and I do not know why the submit button does not sent the file, it sent nothing.
<form action="myPage.php" class="form-horizontal form-bordered">
<div class="form-body">
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="input-group input-large">
<div class="form-control uneditable-input input-fixed input-medium" data-trigger="fileinput">
<i class="fa fa-file fileinput-exists"></i>
<span class="fileinput-filename"> </span>
</div>
<span class="input-group-addon btn default btn-file">
<span class="fileinput-new"> CHOOSE FILE </span>
<span class="fileinput-exists"> CHANGE </span>
<input type="file" name="..."> </span>
DELETE
</div>
</div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-6 col-md-offset-3">
Cancel
</div>
</div>
</div>
</form>
all links are available

Try this code :
<form action="myPage.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputFile">CHOOSE FILE</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

you are using link ,You need submit button
<button type="submit" class="btn btn-default">Submit</button> and your form is messing ">"
<form action="myPage.php" class="form-horizontal form-bordered"

Develop Reference

JavaScript is the programming language of the Web.

how to hide the error message in javascript - javascript

Add a class of hide, and the remove it like this: jsfiddle .hide { display: none }

Related

how can ı access all inputs in form

How to prevent adding double input with onclick button

how to change bootstrap card-header value with java script?

Saving dynamically added li and ul element to database using an array

Bootstrap - Submit file input form?

Categories

Resources