Develop Reference

Manipulating element by ID

I'm creating a plugin for Input Files, I created everything but without having in mind the possibility of having multiple inputs on screen, then it was necessary instead to manipulate the element from the element ID. This is so that actions in one input do not affect all other inputs on the screen.
Below is the code so far, I could not make it work when informed by the element ID.
function bs_input_file() {
// TODO: add function to hide remove button when file not informed
const inputElement = $(".input-file").find('input');
const inputId = inputElement.map(function (index, dom) {
return dom.id
});
buttonInspec(inputId);
function buttonInspec(id) {
$("#" + id).find("button.btn-reset").addClass("hidden");
var element = $("#" + id).find('input');
element.on("change input propertychange", function() {
console.log("changed!")
if (element.val() != "") {
$("#" + id).find("button.btn-reset").removeClass("hidden");
}
});
}
// Necessary to put ID below also
$(".input-file").before(
function() {
if (!$(this).prev().hasClass('input-ghost')) {
var element = $("<input type='file' class='input-ghost' style='visibility:hidden; height:0'>");
element.attr("name", $(this).attr("name"));
element.change(function() {
element.next(element).find('input').val((element.val()).split('\\').pop());
});
$(this).find("button.btn-choose").click(function() {
element.click();
});
$(this).find("button.btn-reset").click(function() {
element.val(null);
$(this).parents(".input-file").find('input').val('');
});
$(this).find('input').css("cursor", "pointer");
$(this).find('input').mousedown(function() {
$(this).parents('.input-file').prev().click();
return false;
});
return element;
}
}
);
}
bs_input_file();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<h3>Example</h3>
<form method="POST" action="#" enctype="multipart/form-data">
<!-- COMPONENT START -->
<div class="form-group">
<div class="input-group input-file" name="Fichier1">
<input id="fileInput0" type="text" class="form-control" placeholder='Select file...' />
<span class="input-group-btn">
<button class="btn btn-secondary btn-reset" type="button"><em class="glyphicon glyphicon-trash"></em></button>
<button class="btn btn-default btn-choose " type="button"><em class="glyphicon glyphicon-folder-open"></em> Search...</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group input-file" name="Fichier2">
<input id="fileInput1" type="text" class="form-control" placeholder='Select file...' />
<span class="input-group-btn">
<button class="btn btn-secondary btn-reset" type="button"><em class="glyphicon glyphicon-trash"></em></button>
<button class="btn btn-default btn-choose " type="button"><em class="glyphicon glyphicon-folder-open"></em> Search...</button>
</span>
</div>
</div>
<!-- COMPONENT END -->
</form>
</div>
</div>

How to search result when select drop down using jquery?

<script>
$(document).ready(function(){
$("#find_jobs").click(function(){
$("#job").css("display","block");
$("#freelancer").css("display","none");
});
$("#find_freelancer").click(function(){
$("#job").css("display","none");
$("#freelancer").css("display","block");
});
$(".submitss").click(function(){
job_id = $(".job_search").attr('id');
job_val = $(".job_search").val();
alert(job_id);
alert(job_val);
});
});
</script>
<form class="form-horizontal" role="form" method="post" id="myform">
<div class="input-group" id="header-search">
<div class="input-group-btn">
<div class="btn-group" role="group">
<i class="fa fa-search"></i>
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="margin-top: 10px;"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-left" role="menu">
<div class="form-group">
<ul>
<li>Find Jobs</li>
<li>Find Freelancers</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<input type="text" id="job" class="form-control job_search" placeholder="Search Job" name="job_search" style="display:block;"/>
<input type="text" id="freelancer" class="form-control freelancer_search" placeholder="Search Freelancer" name="freelancer_search" style="display:none;"/>
</div>
</form>
In this code, I have a search box form with list ul Now, What am I doing here when I select find_job then search job input field active and If I selected find_freelancer then freelancer input field active. Now, What I required When I click on class="submitss" or press enter key then it shows job_id and job_val but if I select then it shows freelancer_id and freelancer_val.
So, How can I do this? Please help me.
Thank You

If I understood you correctly, this should do the job. Basically if input#job is visible show job, else show freelancer. I don't really see the need to use two different input fields, but ok.
function submit() {
if ($("#job").css("display") === "block") {
job_id = $(".job_search").attr('id');
job_val = $(".job_search").val();
} else {
job_id = $(".freelancer_search").attr('id');
job_val = $(".freelancer_search").val();
}
alert(job_id);
alert(job_val);
}
$(document).ready(function(){
$(window).keydown(function(event) {
if (event.keyCode == 13) { // enter key
submit();
event.preventDefault();
return false;
}
});
$("#find_job").click(function () { // find_job not find_jobs
$("#job").css("display", "block");
$("#freelancer").css("display", "none");
});
$("#find_freelancer").click(function() {
$("#job").css("display", "none");
$("#freelancer").css("display", "block");
});
$(".submitss").click(submit);
});
Also
<a href="javascript:void();" class="submitss" id="submitss">
should be
<a href="javascript:void(0);" class="submitss" id="submitss">
or you get
Uncaught SyntaxError: Unexpected token )

How to do Multiple Proccess in One JavaScript

I want to processes three command.
check if input empty or not, if empty the proccess stop, if not continue to command 2 and 3.
insert input data to database.
show and hide between 2 div.
Here what I try
function SubmitFormData() {
if ($.trim($('#url').val()) == '') {
alert('Input can not be left blank');
return false;
}
var url = $("#url").val();
$.post("shorten.php", {
url: url
},
function(data) {
$('#result_div').html(data);
$('#short_form')[0].reset();
});
$("#result_div").hide();
$("#submit").show();
$('#submit').click(function() {
$("#result_div").slideToggle();
$("#short_div").slideToggle();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="col-12" id="short_form" name="short_form" method="post">
<div class="input-group" id="short_div">
<input type="text" class="form-control" id="url" name="url" placeholder="Your Long URL" required>
<div class="input-group-append">
<button type="button" id="submit" name="submit" class="btn btn-default" onclick="SubmitFormData();"><i class="fa fa-search" aria-hidden="true" style="font-size: 25px;"></i>Submit</button>
</div>
</div>
<div class="input-group" id="result_div">
</div>
</form>

A/C to the description given by you :-
You are on right track just try like the code given, it should work for you -
$(document).ready(function(){
$('#result_div').hide();
$('#submit').on('click', function(){
var inputVal = $.trim($("#url").val());
if(inputVal != ''){
$.post('shorten.php', {url: inputVal}, function(response){
$('#result_div').html(response).show();
$('#short_form')[0].reset();
});
$("#result_div").slideToggle();
$("#short_div").slideToggle();
}else{
alert('Please insert valid input')
}
});
});

how to enable a disabled button if only one star button is clicked

I'm using codeigniter and I have a form where a user can rate a product. My code is below shown. I need to make submit button disable at the beginning and when ever a user selects a star button only that submit button needs to be enabled . How can i achieve that? Please anyone guide me. because i don't understand the javascript code as i pasted from the internet.Can anyone help me please?
businessRateView.php
<?php $Vehicleid=$details['id']; ?>
<form action="<?php echo 'http://localhost/ci/businessRateCtrl/insertIntoBusinessReview/'.$Vehicleid?> " method="POST">
<h2>Rate Ad</h2>
<p>All field marked with * are required</p>
<div style="color:red">
<?php
$CI =& get_instance();
$CI->load->library('form_validation');
echo validation_errors();
?>
</div>
<div class="spacer-20"></div>
<h4>Your rating*</h4>
<h1><div class="rating" style="width:200px;float:left;padding-left:1px">
<span class="rate-star" data-rate="Excellent">&bigstar;</span>
<span class="rate-star" data-rate="Good" >&bigstar;</span>
<span class="rate-star" data-rate="Okay" >&bigstar;</span>
<span class="rate-star" data-rate="Unsatisfied" >&bigstar;</span>
<span class="rate-star" data-rate="Terrible" >&bigstar;</span>
</div>
</h1>
<div style="float:right;padding-right:450px">
<h3><label id="rateText" name="lblrating"></label></h3>
</div>
<div class="spacer-20"></div>
<h4>Write your review</h4>
<div class="spacer-20"></div>
<label class="col-md-4"> Title </label>
<input type="text" name="reviewTitle" placeholder="Title your review" class="form-control">
<div class="spacer-20"></div>
<label class="col-md-4">Your review </label>
<textarea rows="10" cols="103" name="review" placeholder="Write your review" class="form-control"></textarea>
<div class="spacer-20"></div>
<a class="btn btn-primary btn-lg" href=<?php echo 'http://localhost/ci/adpreview_ctrl/getad_preview/'.$Vehicleid?> onclick="return cancelConfirm();">Cancel</a>
<input type="submit" name="submitreview" class="btn btn-primary btn-lg" value="SUBMIT">
</form>
</div>
</section>
</div>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
var starList = document.getElementsByClassName('rate-star');
var numOfStars = starList.length;
for(var i = 0; i < numOfStars; i++) {
starList[i].addEventListener('click', starClickHandler, false);
}
}
function starClickHandler(event) {
var star = event.currentTarget;
setActive(star, false);
setActive(star, true);
document.getElementById('rateText').textContent = star.getAttribute('data-rate');
}
function setActive(element, isActive) {
if(isActive) {
element.classList.add('active');
element.nextElementSibling && setActive(element.nextElementSibling, isActive);
}
else {
element.classList.remove('active');
element.previousElementSibling && setActive(element.previousElementSibling, isActive);
}
}
function cancelConfirm(){
return confirm("Are you sure you want to cancel and leave this page?");
}
</script>
<style type="text/css">
#rateText{
text-align:right;
}
.rating {
unicode-bidi: bidi-override;
direction: rtl ;
}
.rating > .rate-star.active,
.rating > .rate-star:hover,
.rating > .rate-star:hover ~ .rate-star {
color: #FFFF00;
cursor: default;
}
</style>
businessRateCtrl.php
public function loadReviewPage($vehicleid){
$data=array();
$data['details']['id']=$vehicleid;
$this->load->view('pages/templates/header');
$this->load->view('pages/businessRateView',$data);
$this->load->view('pages/templates/footer');
}
public function insertIntoBusinessReview($Vehicleid){
$data=array();
$data['details']['id']=$Vehicleid;
$this->form_validation->set_rules
(
'lblrating',
'lblrating',
'required',
array
(
'required' => 'You have not provided Rating',
)
);
if ($this->form_validation->run() == FALSE)
{
$this->load->view('pages/templates/header');
$this->load->view('pages/businessRateView',$data);
$this->load->view('pages/templates/footer');
}
else{
$this->main_model->insertIntoBusinessReview($Vehicleid);
//$_SESSION['ads']=$_SESSION['ads']+1;
$this->session->set_flashdata('success_msg', 'Thank you! We will post your review soon');
redirect("<?php echo 'http://localhost/ci/adpreview_ctrl/getad_preview/'.'$Vehicleid' ?>");
}
}
mainmodel.php
public function insertIntoBusinessReview($Vehicleid){
$rating = $_POST['lblrating'];
if(($_POST['reviewTitle'])!==null || ($_POST['review'])!==null)
{
$title=$_POST['reviewTitle'];
$review=$_POST['review'];
$data=array('Vehicleid'=>$Vehicleid,'rating'=>$rating,'title'=>$title,'review'=> $review,'reviewPoster'=>$this->session->userdata['logged_in']['email']);
$this->db->insert('businessreviews',$data);
}
$data=array('Vehicleid'=>$Vehicleid,'rating'=>$rating,'reviewPoster'=>$this->session->userdata['logged_in']['email']);
$this->db->insert('businessreviews',$data);
}
Here
function starClickHandler(event) {
var star = event.currentTarget;
setActive(star, false);
setActive(star, true);
document.getElementById('rateText').textContent = star.getAttribute('data-rate');
from above code it set label "rateText" into "Excellent","Good" or whatever the text belongs to the button which is clicked.
So if i need to take the text "Excellent","Good" etc. and insert it into the db how can i do that? Can you please kind enough to help me?

You can just use Remove attribute
$(document).ready(function(){
$(".rating .rate-star").click(function(){
$(".active").removeClass("active");
$( ".rate-star:lt("+($(this).index()+1)+")" ).addClass("active");
$("#rateText").html($(this).data("rate"));
$("#submitreview").removeAttr("disabled");
});
});
Sample of your code

Bootstrap Modals, combine Jquery and JS code in form validation

I would have 3 questions concerning the JQuery syntax:
1) The modal is not showing up. This may be an operator (&&) problem? How do I get it right? It should show up only if the thing is valid.
2) How to combine submit prevent Default with valid classes? I have used that before but never combined with JQuery. I want the modal only to show when is_email is valid and when the InputEmail, InputMessage and InputName fields were filled out.
$('#submit').click(function(submit){
if($('#InputEmail'&&'#InputMessage'&&'#InputName').val().length === 0)&& (is_email=="valid") {
$('#myModal').modal('show');
submit.preventDefault();
}
);
4) If I put the col-lg6, it will change size, however the documentation says that I have to add this:
$('.message-group').attr({
class: 'has-success'
works but if I add col-lg6 form-group name-group it will change the size. Why is this?
My syntax is:
/*JQUERY FORM EFFECTS*/
/*$('#InputName').on('input', function() {
var input=$(this);
var is_name=input.val();
if(is_name){input.removeClass("invalid").addClass("valid");}
else{input.removeClass("valid").addClass("invalid");}
}); Can I comment that out? */
$('#InputEmail').on('input', function() {
var input=$(this);
var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
var is_email=re.test(input.val());
if(is_email){
input.removeClass("invalid").addClass("valid");
}
else{
input.removeClass("valid").addClass("invalid");
}
});
/* Display please enter a name. */
$('#InputName').focusout(function(){
if($('#InputName').val().length === 0) {
$('.name-group .message-block').text('Please enter your name.');
$('.name-group').attr({
class: 'has-error'
}); // end attr
} else {
$('.name-group .message-block').text('');
$('.name-group').attr({
class: 'has-success'
}); //end attr
}
}); //end focus out
$('#InputMessage').focusout(function(){
if($('#InputMessage').val().length === 0) {
$('.message-group .message-block').text('Please enter your message.');
$('.message-group').attr({
class: 'has-error'
}); // end attr
} else {
$('.message-group .message-block').text('');
$('.message-group').attr({
class: 'has-success'
}); //end attr
}
}); //end focus out
$('#InputEmail').focusout(function(){
if($('#InputEmail').val().length === 0) {
$('.mail-group .email-block').text('Please enter your email.');
$('.mail-group').attr({
class: 'has-error'
}); // end attr
} else {
$('.mail-group .email-block').text('');
$('.mail-group').attr({
class: 'has-success'
}); //end attr
}
}); //end focus out
$('#submit').click(function(submit){
if($('#InputEmail'&&'#InputMessage'&&'#InputName').val().length === 0)&& (is_email=="valid") {
$('#myModal').modal('show');
submit.preventDefault();
}
);
My form:
<div class="form-group name-group">
<label for="InputName">Your Name</label>
<div class="input-group">
<input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
<span class="input-group-addon">
<i class="glyphicon glyphicon-ok form-control-feedback"></i>
</span>
</div>
<span class="text-block"></span>
</div>
<div class="form-group mail-group">
<label for="InputEmail">Your Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmail" name="InputEmail" placeholder="Enter Email" required>
<span class="input-group-addon">
<i class="glyphicon glyphicon-ok form-control-feedback"></i>
</span>
</div>
<span class="email-block"></span>
</div>
<div class="form-group message-group">
<label for="InputMessage">Message</label>
<div class="input-group"
>
<textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
<span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span>
</div>
<span class="message-block"></span>
</div>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
</div>
</form>

Can you show your markup for your div with the id of myModal?
Also, are you looking for a multiselect? If so here is a link to jQuery's documentation on including multiple element queries in a single selector call: http://api.jquery.com/multiple-selector/
Something more like:
if($('#InputEmail,#InputMessage,#InputName').val().length === 0)
{
alert('not filled out');
return false;
}
else return true;
Also, if that is a direct copy/paste, you are missing a closing parenthesis on your if statement:
if($('#InputEmail'&&'#InputMessage'&&'#InputName').val().length === 0)&& (is_email=="valid"))
Also, could you please clarify what you are asking in your bootstrap .css question?