Search key add on url with jQuery

Search key add on url with jQuery - javascript

I have a short problem. This is my html code:
<select name="searchtips" id="searchtips" class="form-control">
<option value="http://88.99.78.54/category/bonnes-affaires/ameublement/searchkey">Ameublement</option>
<option value="Electro ménager">Electro ménager</option>
<option value="Extérieur">Extérieur</option>
<option value="Hi-tech">Hi-tech</option>
<option value="Prêt-à-porter">Prêt-à-porter</option>
<option value="Jouets">Jouets</option>
<option value="Animaux">Animaux</option>
<option value="Divers">Divers</option>
</select>
<label></label>
<input type="text" class="form-control" name="search" placeholder="Mots cles">
</div>
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 buttons-section">
<button type="submit" class="btn btn-tips btn-block submit-button">J'EN PROFITE</button>
</div>
</div>
This is the jQuery:
$(".btn").click(function(){
var go_to_url = $("#searchtips").find(":selected").val();
document.location.href = go_to_url;
});
Ok, so when I select an category from options and click on J'EN PROFITE all works fine redirect me to the website. But when I write something on "Mots Cles" I want to add on my search key link: http://88.99.78.54/category/bonnes-affaires/ameublement/searchkey. So how can I add the text on my link?
Thank you so much for your help!

You need to check if the field is populated and based on that, you can append it to the URL. Check the below code:
$(".btn").click(function() {
var searchString = '';
if($("#searchString").val() != '')
var searchString = $("#searchString").val();
var go_to_url = $("#searchtips").find(":selected").val();
document.location.href = go_to_url + '/' + searchString;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="searchtips" id="searchtips" class="form-control">
<option value="http://88.99.78.54/category/bonnes-affaires/ameublement/searchkey">Ameublement</option>
<option value="Electro ménager">Electro ménager</option>
<option value="Extérieur">Extérieur</option>
<option value="Hi-tech">Hi-tech</option>
<option value="Prêt-à-porter">Prêt-à-porter</option>
<option value="Jouets">Jouets</option>
<option value="Animaux">Animaux</option>
<option value="Divers">Divers</option>
</select>
<label></label>
<input type="text" class="form-control" name="search" placeholder="Mots cles" id="searchString">
</div>
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 buttons-section">
<button type="submit" class="btn btn-tips btn-block submit-button">J'EN PROFITE</button>
</div>
</div>

Related

JQUERY replace text on data-empty_label value

I tried to change the default empty value "" with friendly labels however I was not successful for subcategory and name selects since data is coming dynamically from django. category works fine since there is an empty option when page loads however subcategory and name load on select data-empty_label "----------" instead and no options are visible.
<div class="form-row">
<input type="hidden" name="csrfmiddlewaretoken" value="xxxxx">
<div class="form-group custom-control col-md-3">
<select name="category" class="custom-select custom-select-lg" required id="id_category">
<option value="" selected>---------</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="form-group custom-control col-md-3">
<select name="subcategory" disabled class="custom-select custom-select-lg chained-fk" required id="id_subcategory" data-chainfield="category" data-url="/chaining/filter/xxxxx" data-value="null" data-auto_choose="false" data-empty_label="--------" name="subcategory">
</select>
</div>
<div class="form-group custom-control col-md-3">
<select name="name" disabled class="custom-select custom-select-lg chained-fk" required id="id_name" data-chainfield="subcategory" data-url="/chaining/filter/xxxxx" data-value="null" data-auto_choose="false" data-empty_label="--------" name="name">
</select>
</div>
<div class="form-group col-md-3">
<input type="submit" value="Submit" class="btn-lg btn-success btn-block">
</div>
</div>
<script>
$(document).ready(function() {
$("select").on("change", function() {
if($("select[name='category']").val() == "") {
$("select[name='category'] > option:first-child").text('Category');
$("select[name='subcategory']").prop('disabled', 'disabled');
$("select[name='subcategory'] > option:first-child").text('Subcategory');
$("select[name='name']").prop('disabled', 'disabled');
$("select[name='name'] > option:first-child").text('Recipe');
} else {
$("select[name='subcategory']").removeAttr("disabled");
$("select[name='subcategory'] > option:first-child").text('Subcategory');
}
}).trigger('change');
$("select[name='subcategory']").on("change", function() {
$("select[name='subcategory'] > option:first-child").text('Subcategory');
if($(this).val() == "") {
$("select[name='name']").prop('disabled', 'disabled');
$("select[name='recipename'] > option:first-child").text('Recipe');
} else {
$("select[name='name']").removeAttr("disabled");
$("select[name='ename'] > option:first-child").text('Recipe');
}
}).trigger('change');
});
</script>

How do I display a JS value in the <option value="url here & js here">

How can I use document.write to display a value from the drop down menu in
<option value="jmp.php?type=auto&rate=<script>document.write(rate)</script>">Auto Insurance</option>
Is this even possible? How can I accomplish this goal? On the next page I need to _GET the 'rate' and I cannot figure out how to pass it into the value.
When the forms submitted this code is used to send the user to the URL in the value=""
var goBtn = document.getElementById("search");
var menu = document.getElementById("s1");
goBtn.onclick = function() {
window.location = menu.value;
}
Here is the HTML I am working with.
<script>
function getRate() {
var rate = document.getElementById("s2").value;
</script>
<div class="row">
<div class="col-md-12">
<div class="subscribe-block">
<div class="row">
<form class="form-horizontal" role="form" id="subscribeForm">
<div class="col-sm-4">
<fieldset style="margin-top: -1.1em">
<div style="color: #fff;">Insurance Plan</div>
<select id="s1" class="form-control input-lg">
<option value="jmp.php?type=auto&rate=<script>document.write(rate)</script>">Auto Insurance</option>
<option value="jmp.php?type=health&rate=<script>document.write(rate)</script>">Health Insurance</option>
</select>
</fieldset>
</div>
<div class="col-sm-4">
<fieldset style="margin-top: -1.1em">
<div style="color: #fff;">Estimated Current Payment</div>
<select name="s2" id="s2" class="form-control input-lg">
<option>$5</option>
<option>$10</option>
<option>$20</option>
<option>$30</option>
<option>$40</option>
<option>$50</option>
<option>$60</option>
<option>$70</option>
<option>$80</option>
<option>$90</option>
<option>$100</option>
<option>$110</option>
<option>$120+</option>
</select>
</fieldset>
</div>
<div class="col-sm-4">
<input style="color: #fff;" id="search" placeholder="Continue >>" class="btn btn-warning btn-block btn-lg">
</div>

<script>
var goBtn = document.getElementById("search");
var menu = document.getElementById("s1");
var myObject = {
"value1": "jmp.php?type=auto&rate=<script>document.write(rate)<\/script>",
"value2": "jmp.php?type=health&rate=<script>document.write(rate)<\/script>"
}
goBtn.onclick = function() {
window.location = myObject[menu.value];
}
</script>
<select id="s1" class="form-control input-lg">
<option value="value1">Auto Insurance</option>
<option value="value2">Health Insurance</option>
</select>

jquery code not working for all selection options

jquery code does not alert for all options I have in select element, instead jquery only alerts for 1 of the Select option. Please see the below code
I did spent hours to get this fix by checking solution online, but no success
<div>
<h4>Company name</h4>
<select class="form-control" id="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Owner name</h4>
<select class="form-control" id="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Address </h4>
<select class="form-control" id="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Vertical</h4>
<select class="form-control" id="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div class="form-group" style="margin:100px;">
<label for="comment" style="float:left;">Comment:</label> <button class="btn btn-primary btn-xs" id="get_comment_button" role="button" style="float:left;">Get Comment</button>
<textarea class="comment-box" rows="5" id="comment"></textarea>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#get_comment_button").on('click',function(){
var optionText = $("#sel1 option:selected").text();
if (optionText == "updated") {
$("#comment").html("Team Updated on ");
}else {
$("#comment").html("Team Validated on ");
}
});
});
</script>

The ID attribute is unique per document and your code does not work in an intended way because you are repeating the same ID. Either use unique IDs or attach an event to the <select>
Also as a side note, it would also be a good practice to use console.log() for debugging instead of alert()
var company_name = $('#company_name');
var owner_name = $('#owner_name');
var address = $('#address');
var vertical = $('#vertical');
$("#get_comment_button").on('click', function() {
if (company_name.val() == "Updated" ||
owner_name.val() == "Updated" ||
address.val() == "Updated" ||
vertical.val() == "Updated") {
$("#comment").html("Team Updated on ");
} else {
$("#comment").html("Team Validated on ");
}
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div>
<h4>Company name</h4>
<select id="company_name">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Owner name</h4>
<select id="owner_name">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Address </h4>
<select id="address">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Vertical</h4>
<select id="vertical">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div class="form-group" style="margin:100px;">
<label for="comment" style="float:left;">Comment:</label> <button class="btn btn-primary btn-xs" id="get_comment_button" role="button" style="float:left;">Get Comment</button>
<textarea class="comment-box" rows="5" id="comment"></textarea>
</div>

You have used same id in all <select>. Id should be unique. So, you can add same class in all <select> tags.
Here is the Demo
$(document).ready(function(){
$(".sel1").on('change',function(){
var optionText = $(this).children("option:selected").text();
alert("Selected Option Text: "+optionText);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<h4>Company name</h4>
<select id="sel1" class="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Owner name</h4>
<select id="sel1" class="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Address </h4>
<select id="sel1" class="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Vertical</h4>
<select id="sel1" class="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div class="form-group" style="margin:100px;">
<label for="comment" style="float:left;">Comment:</label> <button class="btn btn-primary btn-xs" id="get_comment_button" role="button" style="float:left;">Get Comment</button>
<textarea class="comment-box" rows="5" id="comment"></textarea>
</div>

how to clone div bassed select option

i have select option with count of numbers so i need now when user choose any number clone div tag personal information by this number ex: - select 8 clone 8 time ..
i try do that by use( for loop )but i have problem when run i see clone over this number ex:- choose 8 clone 16 time
this is html code and my try js code
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>

The problem you are facing comes from this line: var clone = $('.rowClone').clone();
the first clone is fine because only 1 .rowClone exist, next time multiple .rowClone exist and it appends all of those.
You have 2 solutions, either use var clone = $('.rowClone:first').clone(); or move var clone = $('.rowClone').clone(); before your for loop
Demo of the problem, run it and look at the console
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
console.log("Number of .rowClone that exist = " + $('.rowClone').length)
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</option>
<option value="8">8</option>
</select>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>
</div>
</div>
</div>

Fetching text input val in jquery is always empty

I'm fetching the value the user has put into a text field in Jquery but the value is empty. Maybe I'm doing something wrong here or maybe I'm trying to access a clone of something istead of the real element because the inputed value is inside a popover in a fullcalendar. And I'm using bootstrap. Here is my code.
$(document).on('click', '#saveEvent', function () {
//save to db
var yogaspaceid = $("#HiddenYogaSpaceId").val();
var eventTitle = $("#eventTitle").val(); // always empty
//var eventTitle = $("#eventTitle").attr('value'); //always emtpy
var eventStartTime = $( "#timeSelect" ).val();
var eventDuration = $("#timeDuration").val();
$.post(
'/ManageSpaces/SaveNewEvent',
{ id: yogaspaceid, title: eventTitle, startTime: eventStartTime, duration: eventDuration}
);
$calPopOver.popover('destroy');
//refresh callendar or add new event then re render
});
<div id="eventcalendar">
<div class="col-md-10">
<div id='fullcalendar' style="width:100%"></div>
<div id="day-popover-head" class="hide">Add Event</div>
<div id="day-popover-content" class="hide">
#*<form role="form">*#
<div class="form-group">
<label for="eventTitle">Title:</label>
<input type="text" id="eventTitle" class="form-control">
</div>
<div class="form-group">
<label for="timeSelect">Select time:</label>
<select class="form-control" id="timeSelect">
</select>
<br>
<label for="timeDuration">Select duration:</label>
<select class="form-control" id="timeDuration">
<option value="30">30 min</option>
<option value="45">45 min</option>
<option value="60">60 min</option>
<option value="75">75 min</option>
<option value="90">90 min</option>
<option value="105">105 min</option>
<option value="120">120 min</option>
</select>
</div>
<div class="form-inline">
<button type="button" id="saveEvent" class="btn btn-default">Submit</button>
<button type="button" id="cancelEvent" class="btn btn-default">Cancel</button>
</div>
#*</form>*#
</div>
</div>
<div id="eventDetails" class="col-md-2 collapse" style="background-color:yellow;">
hello
</div>
</div>

Had to use
var eventTitle = $(".popover #eventTitle").val();
not sure why I had to use .popover in the call, but found the solution here

We Keep Coding

JavaScript is the programming language of the Web.

Search key add on url with jQuery - javascript

Related

JQUERY replace text on data-empty_label value

How do I display a JS value in the <option value="url here & js here">

jquery code not working for all selection options

how to clone div bassed select option

Fetching text input val in jquery is always empty

Categories

Resources