Here's the situation I have a webpage which has one drop down called prefer. I wanted the user to be able to choose one option and then have a link next to it called "Add" which generates another textbox with the same options, i was going to use jquery to show an additional drop down.
But if possible I wanted to put the select box in an array and then loop through this process infinitely. so I could call select name="prefer[]" and somehow put in a variable which increases.
Afterwards, I could use php to cycle through the array and utilize each one.
Could I do this with Javascript somehow?
You could clone the select box and append it to the form(I put it in a div). Edit: When you post you should get an array of values in php(prefer[index]).
$('#add').click(function(){
$('#myselect').after($('#myselect').clone());
});
<form method="post" id="theForm">
<div id="myselect">
<select id="prefer" name="prefer[]">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
<option value="five">five</option>
</select>
</div>
<input type="button" id="add" value="add">
<input type="submit" id="submit" value="submit">
</form>
php example:
<?php
$prefer = $_POST['prefer'];
// Note that $prefer will be an array.
foreach ($prefer as $s) {
echo "$s<br />";
}
?>
Related
So I have a form that submits device,color and the problem(with the device) and it displays the correct price underneath nicely using jQuery but I can't figure out how to insert the jQuery result into the hidden input value so that it also sends the price to next page(checkout page) Thanks :)
<form method="POST" action="../action.php">
<select class="custom-select mr-sm-2" name="device" id="inlineFormCustomSelect">
<option value="Motorola Edge">Moto Edge</option>
<option value="Motorola Edge Plus">Moto Edge Plus</option>
</select>
<select class="custom-select mr-sm-2" name="color" id="inlineFormCustomSelect">
<option selected>Select Color..</option>
<option value="Solar Black">Solar Black</option>
<option value="Midnight Magneta">Midnight Magneta</option>
</select>
<select class="custom-select mr-sm-2" name="issue" id="inlineFormCustomSelect3">
<option data-price="£0.00" data-total="" selected>Select Problem..</option>
<option data-price="£40.00" data-total="£42.00" value="Screen Repair">Damaged Screen</option>
<option data-price="£15.00" data-total="£15.75" value="Battery Replacement">Battery Replacement</option>
<option data-price="£35.00" data-total="£36.75" value="Audio Repair">Faulty Audio</option>
<option data-price="£35.00" data-total="£36.75" value="Mic Repair">Faulty Microphone</option>
<option data-price="£35.00" data-total="£36.75" value="Cam Repair">Faulty Camera</option>
</select>
<p><i id="price"></i>+Additional Fees</p>
<p>Total:<span id="total"></span></p>
<script type="text/javascript" language="javascript">
$(function(){
$('select').change(function(){
var selected = $(this).find('option:selected');
$('#price').html(selected.data('price'));
$('#total').html(selected.data('total'));
}).change();
});
*//This is some code I tried below//*
$(document).ready(function(){
$('input[id="price"];').val(price);
});
</script>
<input type="hidden" id="price" name="price" value=''>
<button type="submit" name="submit">
In the case that you are trying to use the same values in an entirely different page. You should know that JS variables do not automatically save, you will lose them after refreshing the page or loading another page.
In order to save variables in the browser, you can use localStorage or localSession. In this particular case, I suggest localSession. localSession will delete the data when the browser is close or the cache is cleared.
Also, you could remove the semicolon ';' from $('input[id="price"];').val(price)
I do not suggest using localStorage or localSession for important forms, this requires back-end. You could use PHP, Node, Django, or any back-end for managing forms. But what you tried was ultimatly right, it's just that there was no variable set to retrive the data from. Hence, why the input could be left empty.
One way you can do this is to update the hidden field when you update the text field.
$(function(){
$('select').change(function(){
var selected = $(this).find('option:selected');
$('#price').html(selected.data('price'));
$('#total').html(selected.data('total'));
$('#hiddenPrice').val(selected.data('price'));
}).change();
});
HTML:
<input type="hidden" id="hiddenPrice" name="hiddenPrice" value="">
Notes:
In your question, the hidden input has the same Id as the text field. That's not valid HTML. So give your hidden input a different Id (such as id='hiddenPrice'). Also, be aware that hidden fields can still be modified by a user. You should validate the posted price in your server side code to verify it is the correct price.
Try these
$('select[name="issue"]').on('change', function() {
var issue = parseFloat($(this).children("option:selected").data('price'));
$('input[name="price"]').val(issue);
// or this one below
$('input[name="price"]').val(issue).trigger('change');
});
Also, try changing the id of your hidden input field and remove or extract this '£' from the data-price.
I have some issue with this:
<select name="whatever">
<option value="pizza">pizza</option>
<option value="pasta">pasta</option>
<option value="sandwich">sandwich</option>
<option value="cheese">cheese</option>
</select>
Select control always when i "run" it show me as first in drop-down menu a pizza and that mean a pizza is selected by default. So, how i can change this if i want to post cheese to be a default(current active in drop-down)
This down is just a example how i want to work my select, you see down a placeholder=5 , that mean this number control will by default use a 5 and i want to do the similar thing with my select control.
<input type='number' placeholder=5 min=0 max=10 step=1>
Thank you!
You simply just put the attribute of selected on to the option you want as your default.
You can use a JavaScript function to get the value from your table and assign this value as the selected option of the drop-down. The options for a select drop-down are identified by an index starting at 0.
In the demo below, I've used buttons to call the JS function. Click on the button to change the selected option:
var sel = document.getElementsByName("whatever")[0];
function defaultOption(option) {
sel.options[option].selected = 'selected';
}
<button onClick="defaultOption(0)">pizza</button>
<button onClick="defaultOption(1)">pasta</button>
<button onClick="defaultOption(2)">sandwich</button>
<button onClick="defaultOption(3)">cheese</button>
</br>
</br>
<select name="whatever">
<option value="pizza">pizza</option>
<option value="pasta">pasta</option>
<option value="sandwich">sandwich</option>
<option value="cheese" selected>cheese</option>
</select>
I currently have a drop down that has multiple values in it (i.e. 50, 100, 200, etc..) which when selected and a button clicked reloads the page and filters a data table to shows however many results were selected.
<form action="#" method="post" class="form-inline" name="normal" id="SearchResultsForm">
<select name="limitNumberOfResults" id="limitNumberOfResultsPerPage"
class="single">
<option value="10">10</option>
<option value="20" selected="selected">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
<input type="submit" class="button" value="Show" name="submitbutton"/>
</form>
I'd like to convert this from a drop down over to a list of links. How would I go about doing this?
I was trying to use something like the following.
<a href="#" onclick="SearchResultsForm.submit();return false;">
10
</a>
<a href="#" onclick="SearchResultsForm.submit();return false;">
20
</a>
However, I'm not sure how to get the results per page value to be recognized.
Thank you!
If you click 10 go to same page with ?limitNumberOfResults=10 then get that value write your code to get result.
10
$per_page = $_REQUEST['limitNumberOfResults'];
Jakir Hossain's answer works (and doesn't require JavaScript) but may require reworking the links to include current state.
Another possibility is for you to use a hidden field and update it when the links are clicked; it does require JavaScript, but you don't have to know about any other parameters that are passed to the server.
<input type="hidden" name="limitNumberOfResults" value="20" />
10
20
var form = document.getElementById('SearchResultsForm');
// Using event delegation to register clicks on the links
form.addEventListener('click', function(e){
if (e.target.tagName === 'A' && e.target.classList.contains('set-result-count') ) {
e.preventDefault();
form.elements.limitNumberOfResults.value = e.target.getAttribute('data-result-count');
}
});
you can use <select onchange='this.form.submit();'></select> in select tag so that when options are changed form gets submitted and you get the results per page value
I got stuck with targeting the correct element and I hope you can help me.
So:
I have fields generated by PHP script:
<fieldset>
<div class="row">
<select>
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="text" />
</div>
<div class="row">
<select>
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="text" />
</div>
</fieldset>
And I need to initialize an auto complete plugin over each of textfield on focus, based on what is selected inside the select in the row, where is the textbox.
Because of templates of project, where I don't have access, I cannot edit the ID or classes of rows (like numbering the rows), so even this is a simplified solution, it is all like what I am working with.
So, once again, what I need to achieve:
$(input).focus(function(){
Ask_what_is_in_select_at_the_same_row()
Store_value_of_Selected_Option_to_Variable()
});
You can use it this way:
$('div.row :text').focus(function(){
// get the value of the select which is the sibling of focussed text input.
var optVal = $(this).siblings('select').find('option:selected').val();
// now you can use it.
});
DEMO
I have a form containing only select fields, a submit button and a reset button.
<form id="search_form">
<select id="country">
<option value="-1">Select Country</option>
<option value="22">USA</option>
<option value="23">Germany</option>
...
</select>
<select id="regions">
<option value="-1">Select Region</option>
...
</select>
<input type="reset" value="Reset />
</form>
Each of the select fields has a default option with a value of "-1".
When a user clicks on the reset button, I want all the selects to show the option with this "-1" value as being selected.
What is the best way to do this using JQuery?
You can just make a single .val() call, like this:
$("#search_form select").val("-1");
Or the entire handler:
$("#search_form input:reset").click(function(e) {
$(this).closest("form").find("select").val("-1");
e.preventDefault();
});
You can give it a try here, though if you're just using this to default the values instead of resetting them, I'd use a button instead of a type="reset".