I have a Buy button that a user can click on to purchase a particular product.
This takes them through to a purchase form I've built.
One of the fields on that form uses a URL parameter so it knows which product the user wants to buy.
So what I want to do is to have a HTML select field somewhere on the page before (where the Buy button is) and allow the user to select the product there.
Then when they click on the Buy button, it passes the selected value through via the URL. For example:
// Some content here promoting the three products.
// Now I want a select field for the user to choose one of the three products, like this.
<select id="productSelect">
<option value="product1">Product 1</option>
<option value="product2">Product 2</option>
<option value="product3">Product 3</option>
</select>
// Then I have some more content here showing the pros/cons of each product.
// Finally, I have a buy button at the bottom of the page that takes them to the page with the purchase form.
// Here is where I want to grab the value of the select field and pass it through via the "product" parameter like this.
<a class="button" href="/buy/?product='select value here'">Buy</a>
Do this with JavaScript:
document.getElementsByClassName("button")[0].addEventListener("click", function(event) {
var product = document.getElementById("productSelect").value;
event.target.setAttribute("href", "/buy?product=" + product);
});
This will work.
Related
I want to customize the way datalist drop down shows. I have the following datalist right now
<input type="text" id="employee" list="employee">
<datalist id="employee">
<option value="John Doe">John Doe (ID: 1)</option>
<option value="Jane Doe">Jane Doe (ID: 2)</option>
<option value="John Jane">John Jane (ID: 3)</option>
</datalist>
When I type on the input box, I see the output like this
But my requirement is to make it look like below and
When the drop down is selected, only the name should be selected (without the id). Something like this:
How can I do this? Basically I want to show more details in the dropdown but select only the Name and not the Id for submitting the form. Also, I dont want 2 columns (darker and lighter) in the dropdown. I just want the value with more information.
Here is the JSFiddle which I used for this question.
P.S. - I am generating this datalist dynamically from Ajax Call based on the user input in text field. Also, I cannot use jquery to manipulate anything. It has to be native javascript.
The second column is appearing because you are putting content between the opening and closing tags. Change:
<option value="John Doe">John Doe (ID: 1)</option>
to:
<option value="John Doe"></option>
to remove the second column.
This can be done on receiving the data via the AJAX call, simply, create the option in JavaScript:
var option = document.createElement("option");
option.value = name + " (ID: " + id + ")";
document.getElementById("my-datalist").appendChild(option);
The above code will make one column, however, it contains the ID in the value field. You would have to remove that before submitting if you didn't want it submitted with the form. Or you can have two columns one for the name (value attribute) and one for the ID (text content).
For more information, refer to this link.
I have created a drop down list with names of books. When a book name is selected from the drop down, I would like it to display information about the book in the same page. The book information is stored in a mysql database. I am currently able to display information for all books, but I would like to be able to sort through the information on a php page.
I attempted to implement the answer found here, but nothing happened.
<select id="selected" name="selection" onchange="getselected(this)">
<option value="default">Select</option>
<option value="book1">Book Name 1</option>
<option value="book2">Book Name 2</option>
<option value="book3">Book Name 3</option>
<option value="book4">Book Name 4</option>
</select>
My script is:
<script>
function getselected(sel) {
var bookname = sel.value;
}
</script>
To start, how do I display the selected book name on the page?
For example, if Book Name 1 was selected from the drop down, a single line of text will appear displaying Book Name 1. I attempted to write the book name with this script.
<script type="text/javascript">document.write(bookname);</script>
Eventually I would like to use the variable bookname to select the information the mysql database. There are multiple entries with the same book name. SELECT * WHERE name = $bookname
Add the following HTML to your page
<div id="dynamic"></div>
change your script to the following
<script>
function getselected(sel) {
document.getElementById("dynamic").innerHTML = sel.options[sel.selectedIndex].text;
}
</script>
Hope this helps!
I've got an option-select dropdown autopopulating using data pulled from an oracle database using asp-classic. The option's id's are the employee id numbers. I'm doing a query to a database to get the employee id who was working during the shift. Once I get that ID, I want to set that option to be the currently selected option, but it's not working for me. Here's what I've got:
<select id="supervisor1" style="width:90%">
<option value="1234" id="1234">John1 Smith </option>
<option value="1235" id="1235">John2 Smith </option>
<option value="1236" id="1236">John3 Smith </option>
<option value="1237" id="1237">John4 Smith </option>
<option value="1345" id="1345">John5 Smith </option>
<option value="1346" id="1346">James Smith </option>
</select>
So that's an example of the select. Obviously names and id numbers have been changed, and there are about 50 names in the actual program.
Now, when the ASP code executes on pageload, the current supervisor is stored in an ASP variable called "foreman1".
<script>
var selectedIndex = '<%=foreman1%>'
var sup1 = document.getElementById('supervisor1');
//alert(selectedIndex);
sup1.options[sup1.options.selectedIndex].selected = true;
</script>
This stores the value of 'foreman1' in a javascript variable. It stores the supervisor selectbox in a variable as well. Then it is supposed to go through the options of supervisor1, find the one with the id of 'foreman1' and then make it selected, which I imagine would make it show up on the page as being the one that is selected. however, it isn't doing this. What am I doing wrong?
If selectedIndex is the value of the option you'd like to select, just set the selects value to the same value
<script>
var selectedIndex = '<%=foreman1%>'
var sup1 = document.getElementById('supervisor1');
sup1.value = selectedIndex;
</script>
and place the script tag before </body>
I have main categories and Sub categories of products when I select any main category it shows related sub-categories. But When I post the form it posts last sub-category value instead of selected sub-category value.
JavaScript Code
$(function() {
$('#category').change(function(){
$('.sub-category').hide();
$('#' + $(this).val()).show();
});
});
HTML code
<Select id="category" name="product_category">
<option value="eco">Main Category 1</option>
<option value="organic">Main Category 2</option>
</Select>
<Select name="product_sub" id="eco" class="sub-category">
<option value="eco1">Sub Category 1</option>
<option value="eco2">Sub Category 2</option>
</Select>
<Select id="organic" name="product_sub" class="sub-category" style="display:none;width:270px;">
<option value="organic1">Sub Category 3</option>
<option value="organic2">Sub Category 4</option>
</Select>
For Example: When I am selecting sub category 1 , its posting value of sub category 3
All successful form fields are submitted to the server. CSS display does not impact whether or not a form field is considered successful. The HTML spec defines what makes a control successful.
A successful control is "valid" for submission. Every successful
control has its control name paired with its current value as part of
the submitted form data set. A successful control must be defined
within a FORM element and must have a control name.
However:
Controls that are disabled cannot be successful.
If a form contains more than one submit button, only the activated submit button is successful.
All "on" checkboxes may be successful.
For radio buttons that share the same value of the name attribute, only the "on" radio button may be successful.
For menus, the control name is provided by a SELECT element and values are provided by OPTION elements. Only selected options may be
successful. When no options are selected, the control is not
successful and neither the name nor any values are submitted to the
server when the form is submitted.
The current value of a file select is a list of one or more file names. Upon submission of the form, the contents of each file are
submitted with the rest of the form data. The file contents are
packaged according to the form's content type.
The current value of an object control is determined by the object's implementation.
If a control doesn't have a current value when the form is submitted,
user agents are not required to treat it as a successful control.
Furthermore, user agents should not consider the following controls
successful:
Reset buttons.
OBJECT elements whose declare attribute has been set.
Hidden controls and controls that are not rendered because of style
sheet settings may still be successful.
Disable the form fields you do not want submitted.
$('#category').change(function(){
$('.sub-category').hide().prop('disabled', true);
$('#' + $(this).val()).show().prop('disabled', false);
});
On the form, a customer can create multiple groups. Every group has the same input fields. If customer clicks on '+ Additional Group' then an additional group will be created dynamically via jQuery (The html is downloaded via an AJAX call).
Below is the sample html. Each ul tag is a group. In the group ul, each input field includes a group number field. Like this: foo_1, foo_2
current_group is a hidden field which keeps track of the total number of groups.
If add_group button has been clicked, jQuery will get the total number of groups from current_group and then additional group dynamically.
Is this how it should be done?
Also if a customer click on Submit button when they have finish Form - it may return back to same page because of Error Validation via PHP. I don't want to loose dynamic html groups again. How can this be solved?
<h2> Group One </h2>
<ul class="Form">
<li>
<label>Foo</label>
<select name='foo_1'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
</li>
<li>
<label>Bar</label>
<select name='bar_1'>
<option value='car'>Car</option>
<option value='bike'>Bike</option>
<option value='van'>Van</option>
</select>
</li>
<ul>
<h2> Group Two </h2>
<ul class="Form">
<li>
<label>Foo</label>
<select name='foo_2'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
</li>
<li>
<label>Bar</label>
<select name='bar_2'>
<option value='car'>Car</option>
<option value='bike'>Bike</option>
<option value='van'>Van</option>
</select>
</li>
<ul>
<input type='hidden' id='current_group' value='2' />
<input type='button' id='add_group' value='+ Additional Group' />
Well if the first set of HTML elements is there already, you can always use jQuery's clone() to copy the elements instead of calling the server. You would need to find the elements and replace the names like you talked about.
jQuery(".Form").clone().find("select").eq(0).prop("name", "foo_" + count).end().eq(1).prop("name", "bar_" + count).end().end().appendTo("#someElem");
In a more readable format
var count = 1;
function addRow(){
count++;
var newFormElems = jQuery(".Form").clone(); //clone the form
var selects = newFormElems.find("select"); //find the selects
selects.eq(0).prop("name", "foo_" + count); //rename first
selects.eq(1).prop("name", "bar_" + count); //rename second
newFormElems.appendTo("#someElem"); //add to the page
}
Another way to redo the naming function which it increments the number:
newFormElems.find("select").each(
function(){
this.name = this.name.replace(/^([^_]+_)(\d+)/, function(match,str,num){ return str + (parseInt(num,10)+1)});
}
);
And what is the best way to deal with the dynamic forms? Well you can submit the data with Ajax or you have the php code write out form after the validation.
There are several way to do one thing. This is your logic. It should work if no mistakes made.
Whenever you are fetching displaying the new group keep a hidden field named group_ids[]
You will receive all the group ids in an array. You can access that array from $_REQUEST['group_ids'] (you can use $_POST or $_GET according to your code)
Now whenever you submit the page check what group ids are submitted by user. You can receive the drop down values also. If you need to display those groups again you can get it from database using $_REQUEST['group_ids'] and keep the correct option selected by comparing the current value from the user selected value.