I have a div having two divs inside as follows.
HTML code:
<div style="margin: 20px auto;" align="center">
<div style="float:left;">
<input type="button" class="myButton" value="Add"/>
<input type="button" class="myButton" value="Modify"/>
<input type="button" class="myButton" value="Delete"/>
</div>
<div>
<form id = "country_form" method="post">
<select id="country_name" name = "country_name" style = "position: relative;width:60px;" onChange="return country_change();">
<option value="">Select</option>
<option value="India">India</option>
<option value="Australia">Australia</option>
<option value="Malaysia">Malaysia</option>
<option value="UAE">U.A.E</option>
<option value="Singapore">Singapore</option>
<option value="USA">U.S.A</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="China">China</option>
</select>
<select id="country_port" name = "country_port" style = "position: relative;margin-left:5px;width:60px;">
<option value="">Select</option>
<option value="Macau">Macau</option>
<option value="Ningbo">Ningbo</option>
<option value="Beijing">Beijing</option>
<option value="Shanghai">Shanghai</option>
<option value="Guangzhou">Guangzhou</option>
<option value="Shenzhen">Shenzhen</option>
</select>
<input type="hidden" value="yes" name="submit_value"/>
<input type="submit" class="myButton" value="Search"/>
</form>
</div>
</div>
As i am doing float left to first inner div the outer div is going to left of screen.
So how to make it center.
Please help me to make it possible
jsFiddle: DEMO
See if this helps.........
<div style="margin: 20px auto; width:80%;" align="center">
http://jsfiddle.net/XNdJw/
Related
I need to add a text input that displayed only when the other is selected. And make this input required if it is shown. One thing more, I need to enter that input to the same table in the database. Can anyone help? Please!
<form action="" method="post">
<div class="row">`enter code here`
<div class="col-sm-8 col-sm-offs et-2">
<select class="form-control" name="country" id="country" required>
<option value="">Please select your country</option>
<option value="A">Country A</option>
<option value="B">Country B</option>
<option value="C">Country C</option>
<option value="Other">Other</option>
</select>
<button type="submit" class="btn btn-gpsingh">Next</a>
</div>
</div>
</form>
Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div class="row">
<div class="col-sm-8 col-sm-offs et-2">
<select class="form-control" name="country" id="country" required >
<option value="">Please select your country</option>
<option value="A">Country A</option>
<option value="B">Country B</option>
<option value="C">Country C</option>
<option value="Other">Other</option>
</select>
<input type ="text" id="country_other" style="display:none">
<button type="submit" class="btn btn-gpsingh">Next</a>
</div>
</div>
</form>
<script>
$("#country").change(function(){
var value = this.value;
if(value =='Other')
{
$("#country_other").show();
$("#country_other").prop('required',true);
$("#country_other").val('');
}
else
{
$("#country_other").hide();
$("#country_other").prop('required',false);
$("#country_other").val('');
}
});
</script>
I've tried a range of methods to try and swap two options and none worked.
I want the first option of select to swap with first option of select1
Is anyone able to provide an example of how to deal with this swap?
Here is the JavaScript I have tried:
$('#swap').click(function() {
var v1 = $('#select').val(),
v2 = $('#select1').val();
$('#select').val(v2);
$('#select1').val(v1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-tour__converter">
<form action="#" class="search-tour__form flex">
<div class="search-tour__form_left-side">
<input type="number" id="amount" value="1" class="search-tour__input">
<div class="search-tour__drop-down">
<select id="select" class="main-dropdown">
<option value="EUR">EUR</option>
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<option value="UAH">UAH</option>
</select>
</div>
</div>
<button class="search-tour__btn" value="swap" id="swap" type="button">Swap
</button>
<div class="search-tour__form_right-side">
<div class="search-tour__drop-down">
<select id="select1" class="main-dropdown">
<option value="UAH">UAH</option>
<option value="UAH">UAH</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
<input type="number" id="result" value="31.37" class="search-tour__input">
</div>
<input type="button" class="titles-block__btn" value="Конвертировать" onclick="calculate();">
</form>
</div>
Are you trying to do the following?
$('#swap').click(function()
{
var v1 = $('#select option:first-child');
var v2 = $('#select1 option:first-child');
var temp1 = v1.html();
var temp2 = v2.html();
v2.html(temp1);
v1.html(temp2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-tour__converter">
<form action="#" class="search-tour__form flex">
<div class="search-tour__form_left-side">
<input type="number" id="amount" value="1" class="search-tour__input">
<div class="search-tour__drop-down">
<select id="select" class="main-dropdown">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<option value="UAH">UAH</option>
</select>
</div>
</div>
<button class="search-tour__btn" value="swap" id="swap" type="button">Swap
</button>
<div class="search-tour__form_right-side">
<div class="search-tour__drop-down">
<select id="select1" class="main-dropdown">
<option value="UAH">UAH</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
<input type="number" id="result" value="31.37" class="search-tour__input">
</div>
<input type="button" class="titles-block__btn" value="Конвертировать" onclick="calculate();">
</form>
</div>
I have a dropdown selector in my HTML and I need to print out an image that is linked to a selection. But I have no idea how to start that.
<input type="text" id="TextVeld" class="form-control" placeholder="get value on option select">
<br><br>
<select name="cars" id="TextShow" class="form-control">
<option value="Pizza0">Kies je pizza</option>
<option value="Pizza1">Margherita</option>
<option value="Pizza2">Carciofi</option>
<option value="Pizza3">Marinara</option>
<option value="Pizza4">Funghi</option>
<option value="Pizza5">Calzone</option>
<option value="Pizza6">Napoli</option>
<option value="Pizza7">Romana</option>
<option value="Pizza8">Quattro Formaggi</option>
</select>
<br><br>
<button type="button" name="button">Toon</button>
<button type="button" name="button" onclick="Kiezen()">Kies</button>
I did find an example that does this, but not on a button click. Even then, it doesn't work when I add it to my code.
Assuming "Print out" means "Show", try this
var folder = "https://icco.co.uk/catalog/view/theme/iccqtheme/images/"
function showIt() {
var pizza = document.getElementById("pizzas").value;
document.getElementById("pizzaImage").src= folder + (pizza? pizza+".png" : "deliveroo.png");
}
window.addEventListener("load",function() {
document.getElementById("toon").addEventListener("click",showIt); // click
document.getElementById("pizzas").addEventListener("change",showIt); // or change
});
<input type="text" id="TextVeld" class="form-control"
placeholder="get value on option select">
</br></br>
<select name="pizzas" id="pizzas" class="form-control">
<option value="">Kies je pizza</option>
<option value="piza1">Margherita</option>
<option value="piza2">Carciofi</option>
<option value="piza3">Marinara</option>
<option value="piza4">Funghi</option>
<option value="piza5">Calzone</option>
<option value="piza6">Napoli</option>
<option value="piza7">Romana</option>
<option value="piza8">Quattro Formaggi</option>
</select>
</br></br>
<button type="button" id="toon">Toon</button>
<button type="submit" name="button">Kies</button><br/>
<img id="pizzaImage" src="https://icco.co.uk/catalog/view/theme/iccqtheme/images/deliveroo.png" />
Using JQuery to change an image on the change of a select, the code works, on one form, however if I try to apply to same thing to another form the JQuery just doesn't work. Need to implement this one a basis where I can use the same code to change individual select.
Feel free to run the code and see what I mean, the first item works, change the select option to red, the image changes, try the same with the next one, no luck although its written in the same fashion.
If you need anything else let me know, thanks in advance.
$(function(){
$("#colour").on('change', function(){
$("#imageToSwap").attr("src", $(this).find(":selected").attr("data-src"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="shelf">
<li class="simpleCart_shelfItem">
<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png" />
<h4 class="item_name">C&J Wash Bag</h4>
<span class="item_price">£30.00</span>
<select id="colour">
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png">Black</option>
<option value="Red" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagRed.png">Red</option>
</select>
<select class="item_quantity">
<option value="0">0</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>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li>
<li class="simpleCart_shelfItem">
<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png" />
<h4 class="item_name">C&J Wool Lined Gloves</h4>
<span class="item_price">£28.00</span>
<select id="colour">
<option value="Brown" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png">Brown</option>
<option value="Tan" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesTan.png">Tan</option>
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBlack.png">Black</option>
<option value="Grey" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesGrey.png">Grey</option>
</select>
<select required class="item_quantity">
<option value="0">0</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>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li></ul>
It is bad thing to give same id to multiple element. There is same ID used for multiple element. Make it unique it works.
You can use class instead of id. like Here i give colour class and change image using sibling selector.
$(function(){
$(".colour").on('change', function(){
$(this).siblings(".item_thumb").attr("src", $(this).find(":selected").attr("data-src"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="shelf">
<li class="simpleCart_shelfItem">
<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png" />
<h4 class="item_name">C&J Wash Bag</h4>
<span class="item_price">£30.00</span>
<select id="colour" class="colour">
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png">Black</option>
<option value="Red" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagRed.png">Red</option>
</select>
<select class="item_quantity">
<option value="0">0</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>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li>
<li class="simpleCart_shelfItem">
<img id="imageToSwap1" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png" />
<h4 class="item_name">C&J Wool Lined Gloves</h4>
<span class="item_price">£28.00</span>
<select id="colour1" class="colour">
<option value="Brown" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png">Brown</option>
<option value="Tan" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesTan.png">Tan</option>
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBlack.png">Black</option>
<option value="Grey" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesGrey.png">Grey</option>
</select>
<select required class="item_quantity">
<option value="0">0</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>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li></ul>
Hope it helps.
It looks to me that you have "imageToSwap" duplicated. Therefore the function isn't able to locate the correct object to refresh.
As part of W3C rules, a html cannot contain duplicate ids. So I would suggest to change the ids and perform your color change by picking up class as below:
Changes -
Added class colorChange to your color select element and changed its
ids
Changed event change to fire on class and getting the actual target image with $(this) reaching to its parent li and getting the img with class image_thumb
$(function() {
$(".colorChange").on('change', function() {
$(this).closest('li').find('.item_thumb').attr("src", $(this).find(":selected").attr("data-src"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="shelf">
<li class="simpleCart_shelfItem">
<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png" />
<h4 class="item_name">C&J Wash Bag</h4>
<span class="item_price">£30.00</span>
<select id="colour" class="colorChange">
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png">Black</option>
<option value="Red" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagRed.png">Red</option>
</select>
<select class="item_quantity">
<option value="0">0</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>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li>
<li class="simpleCart_shelfItem">
<img id="imageToSwap1" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png" />
<h4 class="item_name">C&J Wool Lined Gloves</h4>
<span class="item_price">£28.00</span>
<select id="colour1" class="colorChange">
<option value="Brown" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png">Brown</option>
<option value="Tan" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesTan.png">Tan</option>
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBlack.png">Black</option>
<option value="Grey" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesGrey.png">Grey</option>
</select>
<select required class="item_quantity">
<option value="0">0</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>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li>
</ul>
I'm wondering how I can chain an input box after chaining a selection in my form.
I'm using http://www.appelsiini.net/projects/chained to chain my selects and it works. However, I need to adjust this to also allow for the chaining of an input. In the below example it would be someone would choose an option such has an item has Strength on it then the select menu of value options then input the value. I'm trying to also incorporate into this where after those 3 options of item, controller, value are inputed the user has the option to filter more so another box appear with the same options of strength, agility, etc. http://jsfiddle.net/isherwood/XMx4Q/ is an example of work I used to incorporate this into my own work.
<form id="myform" name="myform" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<div>
<label for="searchterm">Name:</label>
<input type="text" name="searchterm">
</div>
<div>
<div class="chainedSelectFilter">
<select name="specificFilter" class="attribute">
<option value="" selected>Select a Filter</option>
<option value="strength">Has Strength</option>
<option value="agility">Has Agility</option>
<option value="spirit">Has Spirit</option>
<option value="stamina">Has Stamina</option>
</select>
<select name="specificFilter" class="valueController">
<option value=">" selected>></option>
<option value=">=">>=</option>
<option value="=">=</option>
<option value="<="><=</option>
<option value="<"><</option>
</select>
</div>
</div>
</div>
<div>
<label for="submit"></label>
<input type="submit" name="submit" value="Filter">
</div>
Code reference below shows how to accomplish this. Here is jsFiddle that shows it's working.
HTML
<form id="myform">
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value="" placeholder="Type here"/>
</div>
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value="" placeholder="type here"/>
</div>
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value=""/>
</div>
</form>
JS
$('select').change(function () {
$(this).next('input').fadeIn();
});
$('body').on('keyup','input.chain',function () {
$(this).parent().next('div').fadeIn();
});