<script>
let myArr = ["ProductA","ProductB","ProductC"];
</script>
I want to make a Django input dropdown using this javascript array.
<input type="text" name="product1" value="0" maxlength="500" class="textinput textInput form-control" id="id_product1">
When user will click on this Django form input, I want a drop-down list to appear, from which users can select an option.
Related
Currently I am using this to submit a quantity of 1 product to my cart page with a simple Onclick add to cart button.
<td class="data_cell dataFontColor">
<label onClick="location.href='cart/?PartNo=#NPart#&Qty=1'">Add to
Cart</label></td>
<td class="data_cell dataFontColor">
<cfif IsDefined ("getPrice2.Price") AND getPrice2.Price eq "">
I am trying to implement a text box to submit any quantity the user wants, but on submit the page moves but nothing is added to cart. I know it's something wrong with the Qty= in the OnClick, but can't seem to figure it out. Any help would be appreciated!
<td class="data_cell dataFontColor">
<td><input type="text" name="Qty" size="4" value= "Qty" maxlength="9"/></td>
<td class="data_cell dataFontColor">
<label onClick="location.href='shop/?PartNo=#NPart#&Qty=#Trim (Qty)#'">Add to
Cart</label></td>
The reason this is not working is because you can't do what you're attempting using ColdFusion which processes the page server-side. User typed inputs are processed client-side.
First, I would add an id attribute to your input tag.
<input type="text" id="Qty" name="Qty" size="4" value= "Qty" maxlength="9"/>
Once your input has an ID, now you can now extract the value client-side using JavaScript.
<label onClick="location.href='shop/?PartNo=#NPart#&Qty="+document.getElementById("Qty").value.trim()>Add to Cart</label>
i have bootstrap model it have drop down .according to the drop down result i have display different input text field .my problem is if the select some option close the model and then open previous selected item input field is still in here .how do i remove it?
$(document).on('click', '.month_ot_resqust', function(){
$('#overtime_requset').modal('show');
clear_field();
});
clear function
this will reset the all the form data.but not remove in input field
function clear_field()
{
$('#overtime_requset_form')[0].reset();
$('#error_from_date').text('');
$('#error_type').text('');
$('#total_number_employee').text('');
$('#total_number_hours').text('');
$('#hours').val('');//this id input field i want disappear
}
input field
<input type="text" name="hours" id="hours" class="form-control" value="00:00:00" />
I have an HTML Form.
First two input fields are text. The Third input field is select with 2 options. Then again two input field as text as below :
Input type = text field
Input type = text field
Input select
3.1 Option 1
3.2 Option 2
Input type = text field
Input type = text field
Now when I press the tab key, it goes in serial order. First it is on 1. then when i press tab key cursor goes to 2. Now when I press the tab key directly it goes to 4 and skips 3. I am not able to understand why this is happening. Is there any way I can include 3 in my tab select and using down arrow I can select either option 1 or option 2.
Do suggest. Thanks.
Here you go with the solution using tabindex attribute
<input type="text" tabindex="1"/>
<input type="text" tabindex="2"/>
<select tabindex="3">
<option>Option 1</option>
<option>Option 1</option>
</select>
<input type="text" tabindex="4"/>
<input type="text" tabindex="5"/>
I'm trying to load value in textbox when angucomplete item selected.
This is how I declare the directive in my html file:
<angucomplete id="autoName" placeholder="Name" pause="100" name="customer" selectedobject="sel" localdata="names" searchfields="custName" titlefield="custName" inputclass="form-control form-control-small" />
and i want selected value in textbox declared as:
<input id='autoValue' type="text" class="form-control" name='custValue' ng-model="selVal" minlength="15" placeholder="custmer value" required>
i tried this one but on pageload getting initial value error
<input id='autoValue' type="text" class="form-control" name='custValue' ng-model="selVal = sel.originalObject.value" minlength="15" placeholder="custmer value" required>
using above solution after selecting item from angucomplete value updated in textbox but textbox become non-editable. so is there any way to update value in textbox without making non-editable
I tried the following but it returns two pieces of data to the server. This is a problem for my gateway, and I get an error.
I used this for one of my attempts:
<script type="text/javascript">
if( $('#other).is('):selected') )
{
// user wants to enter own value
$('[name="installments"]").not('[type="text"]').attr('name', '') // remove all
values apart from the entered text.
}
</script>
<body>
<FORM ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" METHOD="POST">
<br><br>
<input type="radio" name="installments" id="r1" checked="checked" value="99">
Open-Ended - I can stop them via email at any time.<br>
<label for="installments">number of payments</label><br>
<input type="radio" name="installments" id="other" value="Enter Custom.."><br>
<input type="text" name="installments" value="" maxlength="4" size="4">
<br><br><br>
<input type="submit" name="btnSubmit" value="Submit" />
</form>
This returns either -
installments 99
installments (empty)
or
installments Enter Custom..
installments 5
I can only have one return for the var 'installments' either 99 or the number they imputed.
I have tried various ways of doing this using JS and allowing the user to make a choice with the same results - two instances of the var 'installments' being sent.
Is there a javascript way to test the input field and if a number is entered then disable using id(s) the extra radio button so it can't send any data? Or is there a better way to do this?
Solved
I found the answer & Here it is
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#user_input').change(function() {
$('#use_user_input').val($(this).val());
});
});
</script>
And Html Here:
Total number of payments...</span><br>
<input type="radio" name="installments" checked value="99">
Open-Ended -
<input id="use_user_input" type="radio" name="installments" value="">
limited number of payments -
<input id="user_input" type="text" value="" maxlength="4" size="4"></span>
You would want to give the input text field a different name from the radio inputs, then handle the text field's POST as a separate variable from the radio buttons in the HTTP request. Also, give the second radio input a value, such as "other" so you know to handle the associated text input.
If you only have the ability to receive one field from the form you will need to alter the form as the user fills it in. Currently the form works if the user selects one of the values delimited by the radio buttons. The problem, I gather, is that the status of the radio buttons overrides the value of the text field even if the user selects the "other" option of filling in the text box.
The solution is to use a script that is triggered when the user changes the content of the text box. This script will read the value of the text box and assign that value to the 'other' radio button.
We can do this using the onchange event:
<input id="otherRadio" type="radio" name="installments" value="" /><br />
<input id="otherText" type="text" value="" maxlength="4" size="4" onchange="applyOtherOption()" />
If you try this now, it will cause a javascript error on your page when you change the value of the the text field. This is because the browser fails to find a javascript function with the name applyOtherOption. Let's change that now:
<script type="text/javascript">
function applyOtherOption() {
var textField = document.getElementById("otherText");
var radioField = document.getElementById("otherRadio");
radioField.value = textField.value;
}
</script>
The result is that the "other" radio button's value is always changed to whatever the user enters into the text field and if this radio is selected, this is what is sent with the form.
Important
I've been a bit lazy here and typed out the easiest way to access the content of the form elements. This will work on most (probably all major) browsers but it is not the way it should be done. The proper method is to access the form first, then from the form element access the fields. To do it right you should read this article on setting the value of form elements.
I hope this is useful.