For a Flask app I am trying to set the cursor into an input text field in a form. The form looks like this:
<form method="get" autocomplete="off">
<div class="row">
<div class="four columns">
<label for="from-currency">Exchange:</label>
<input type="text" placeholder="currency to exchange from" value="{{ from_curr }}" name="from_currency" id="from-currency" class="input-field"/>
</div>
<div class="four columns">
<label for="to-currency">To:</label>
<input type="text" placeholder="currency to exchange to" value="{{ to_curr }}" name="to_currency" id="to-currency" class="input-field"/>
</div>
<div class="four columns">
<label for="calculate-button"> </label>
<input type="submit" value="Calculate" id="calculate-button" class="input-field">
</div>
</div>
</form>
I tried using JavaScript (element.focus();), but it did not move the cursor into my input field.
<script>
function submit_param(inp) {
inp.addEventListener("input", function(event) {
var val = this.value;
var urlParams = new URLSearchParams(window.location.search);
urlParams.set(inp.name, val);
var queryString = urlParams.toString();
history.pushState({}, "", "?"+queryString);
location.reload();
inp.focus();
});
}
submit_param(document.getElementById("from-currency"));
submit_param(document.getElementById("to-currency"));
</script>
What am I doing wrong, or how else can I move the cursor back into the input filed at the end of my script block?
How can I set cursor into html text input field?
<input type="text" autofocus>
The autofocus attribute is a boolean attribute.
When present, it specifies that an element should automatically get focus when the page loads.
Hope this helps. Good luck.
Related
I don`t find out how to get the value from the js script input ( phone number that user input , and the country prefix code that the script auto put )
<script src="{% static 'assets/js/intlTelInput.js' %}"></script>
<script>
var input = document.querySelector("#phone");
window.intlTelInput(input, {
initialCountry: "gb",
});
</script>
and have it saved thru my HTML form under this:
<input type="tel" name="phone-number" class="form-control input-style" placeholder="your phone">
<input type="tel" id="phone">
Full code :
<form class="submit-form" method="post" action="{% url 'register' %}" enctype="application/json">
{% csrf_token %}
<div class="div-block">
<div class="double-fields-step-2-only">
<div class="form-group">
<div class="form-group right">
<input type="tel" name="phone-number" class="form-control input-style" placeholder="your phone">
<input type="tel" id="phone">
<script src="{% static 'assets/js/intlTelInput.js' %}"></script>
<script>
var input = document.querySelector("#phone");
window.intlTelInput(input, {
initialCountry: "gb",
});
</script>
<div class="icon"></div>
</div>
</div>
<button type="submit" class="btn btn-register" data-title="Loading...">
Register
</button>
</form></div>
</form>
As I can understand, your js file has a phone number and you want it to be in your input field. If so, then you can do something like this:
#Step 1:
Store the phone number value in a variable (e.g: var mobile='myNumber';)
#Step 2:
Now you can use this variable inside the DOM anywhere.
<form id='myform' method="post" action="action/">
<!--your fields here-->
</form>
<script>
document.getElementById('myform').innerHTML+=`
<input type="text" id="myid" name="mobile" value="${mobile}">
`
</script>
Tip: you can also use type="hidden" for hiding this field from users.
Here is a working example: https://www.w3schools.com/code/tryit.asp?filename=GSTEVYR70G0L
Well, in case of misunderstanding, here is an example for both SET and GET values in jQuery.
<form id="form1">
<input id="phone_number" type="text">
</form>
<script>
var phoneNumber = "123456789"; //this is your pre-defined variable
$(document).ready(function(){
//if you want to SET an input field value, you can do as the following
$("#phone_number").val(phoneNumber);
//if you want to GET an input field value, you can do as the following
var input_phoneNumber = $("#phone_number").val();
//if you want it to happen on Register button click, do this:
$(".btn-register").click(function(){
$("input[type='tel']").val(phoneNumber)
})
})
</script>
I'm having a problem in getting the value of input tag with a type of date which is place inside a modal. I'm trying to get this value using javascript. Here's my code:
HTML:
<form method="POST" action="{% url 'single_collection' %}">
{% csrf_token %}
<div class="modal-body form-horizontal">
<div class="form-group">
<label for="inputSQAID" class="col-sm-3 control-label">SQA Name</label>
<div class="col-sm-8">
<input type="hidden" name="sqa_name" id="sqa_name" value="{{ collectionlist.sqa_name }}">
</div>
</div>
<div class="form-group">
<label for="fromdate2" class="col-sm-3 control-label">From:</label>
<div class="col-sm-8">
<input type="date" class="form-control" name="fromdate2" id="fromdate2" max="{% now 'Y-m-d' %}" required>
<div class="modal-footer">
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success" name="s_dl" id="s_dl" onclick="single_c()">Download</button>
</div>
</form>
Here's my javascript code, I'm just trying to display the value of the date from the input [type=date]:
<script type="text/javascript">
function single_c(){
var dates2 = document.getElementById('fromdate2').value;
document.write(dates2)
}
</script>
I tried to place the input tag outside the modal then it is working but when I put it back inside the modal it is not working. Any work around in here.
Your input does not have "value" property.
So you need to add "value" property to input,
And you need to call function single_c()
this function after how you type some text in input
Maybe something like this?
var date = "please enter a date";
dates.addEventListener('input',(e) => {
date = e.target.value
})
function single_c(){
document.write(date)
}
I had this problem too.
The main issue here is that if you have an id to target the value, the id must have the same name as the name attribute. I.e if you have an id="CheckingDate", your name="CheckingDate" else it won't work.
I want to create a form with HTML with different types of inputs (such as name, surname, dates, and radio-button options), and when I want to print the object with the data inputted in the form on the console, the value from the radio-buttons is not stored correctly.
First of all, this is my first project on this area and also my first posted question on stackoverflow, so I would appreciate some suggestions on how to pose the question better if I'm forgetting some crucial data.
I have been following help from different resources (mostly youtube videos such as: https://www.youtube.com/watch?v=GrycH6F-ksY ) to create this form and submit the data with AJAX, and the code of my javascript application comes mainly from that video.
All the data is stored correctly and I can see it in the console, except from the data comming from the radio-buttons. No matter what option is selected (either "male" or "female"), the console always shows the value of the last button, which in this case is "female". I suppose I am doing something wrong when defining these buttons, and why they are not being "selected" (I suppose that's what is happening since the data shown is always the last default value) but I haven't been able to find out where I am doing something wrong.
I'm including the part of the code that I think might be relevant
<form action="ajax/contact.php" method="post" class="ajax">
<div class="form-row">
<div class="form-group col-md-6">
<label>Name</label>
<input type="text" class="form-control" name="inputName" required>
</div>
<div class="form-group col-md-6">
<label>Surname</label>
<input type="text" class="form-control" name="inputSurname" required>
</div>
</div>
<div class="form-group">
<label>Date of birth</label>
<input type="date" class="form-control" name="inputDate">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="inputEmail" required>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Gender</label>
</div>
<div class="form-group col-md-4">
<div class="radio-inline"><input type="radio" name="inputGender"
value="male">Male</div>
</div>
<div class="form-group col-md-4">
<div class="radio-inline"><input type="radio" name="inputGender"
value="female">Female</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Number of children</label>
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control" name="inputNumber">
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Javascript function
$('form.ajax').on('submit', function() {
var that = $(this),
url = that.attr('action'),
method = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
console.log(data);
return false;
});
PHP file
<?php
if (isset($_POST['inputName'],$_POST['inputSurname'],$_POST['inputDate'],$_POST['inputEmail'],$_POST['inputGender'],$_POST['inputNumber'])) {
print_r($_POST);
}
In the console I'm getting this:
${inputName: "myName", inputSurname: "mySurname", inputDate: "2019-12-13",
$inputEmail: "myMail#gmail.com", inputGender: "female", …}
$inputDate: "2019-12-13"
$inputEmail: "myMail#gmail.com"
$inputGender: "female"
$inputName: "myName"
$inputNumber: "1"
$inputSurname: "mySurname"
$_proto_: Object
but I thought it would be showing:
$...
$inputGender: "male"
$...
when the male option is selected.
Thank you very much
The problem is in your JS. You're looping through everything with a name attribute, in order, and adding its value to your submit data. In the case of radio buttons, you have to check if they're selected and only add if so, otherwise, the last one always wins, as you're seeing.
And since you appear to be using jQuery, you can probably just let its serialize helper do this work for you.
I have set of input boxes to add names and designaions.and iwant to print those in a <p> tag when user click print button. how to proceed.
<div class="form-group">
<label for="inputRegNo" >Name & Designation<span style="color:#c0392b;padding-left:5px;">*</span></label>
<div class="form-group">
<input required type="text" name="fname[]" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" placeholder="Name" />
<input required type="text" name="lname[]" placeholder="Designation" />
</div>
</div>
<div class="form-group">
<label for="inputRegNo" ></label>
<div class="form-group">
<input type="text" name="fname[]" placeholder="Name" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" />
<input type="text" name="lname[]" placeholder="Designation" />
</div>
</div>
print
<div>
<label>Name & Designation</label>
<p id="refa5"> - </p>
</div>
its looks you are new in javascript.. it's simple give the name to all the input field like
<input type="text/checkbox" name="txtName">
and in javascript you can access this field value by
<script type="text/javascript">
var name = document.getElementsByName("txtName");
</script>
if you wish to print the element on button click simply specify their click event on javascript like
function onClick() {
alert("helo from click function");
}
and then on button ..
<input type="button" onclick="onClick()">
w3schools is a great resource for this. Here is some example code on how to do this :
<button onclick="myFunction()">Click me</button>
<input id="inputID"></input>
<p id="demo"></p>
<script>
function myFunction() {
var inputID = document.getElementById("inputID").value;
document.getElementById("demo").innerHTML = inputID;
}
</script>
What the code above does is it takes the value of an input, then it sets the innerHTML of a <p> element to it. You can obviously do this with other things like <h1> elements as well.
I have an HTML form with 4 inputs fields inside it. All these input fields have the same class and ID, the only differences are the "divs" surounding the inputs.
One form is in the header the other one in the content, and inside each of them, one field is a username field to login, and the other one to register.
<div class=theheader>
<h1> The Header</h1>
<div class="fullform">
<div class="container register">
<div class="form_group required">
<input class="input_text" id="username_field" name="username" size="30" value="" type="text">
</div>
</div>
<div class="container login">
<div class="form_group">
<input class="input_text" id="username_field" name="username" size="30" type="text" >
</div>
</div>
</div>
</div>
<div class=thecontent>
<h1> Form Content</h1>
<div class="fullform">
<div class="container register">
<div class="form_group required">
<input class="input_text" id="username_field" name="username" size="30" value="" type="text">
</div>
</div>
<div class="container login">
<div class="form_group">
<input class="input_text" id="username_field" name="username" size="30" type="text" >
</div>
</div>
</div>
</div>
Here is an example of what it looks like : http://jsfiddle.net/M6R7K/78/.
I need to add a placeholder inside each of these fields, but the tricky thing is, I don't have any direct access to this HTML code, because this one is automatically generated by a third party plugin. So I can only add javascript or css, using the existing classes and ids.
So I used the javascript :
document.getElementById("username_field").setAttribute("placeholder", "Username");
And it has indeed add the correct placeholder in the correct field. The problem is, it only add the placeholder in the 1st field found, not all of them. Even if I add several lines of javascript.
So the question : How to fill up all these field with a placeholder without touching the HTML code ? (With javascript or anything else) And at the best possible, having a different placeholder for each field ? (One needs to be "username and email", and the other one "username" only). We should be able to use the classes of the div's, just like we can do in CSS. But I wasn't able to figure it out.
Thanks !
Your code set placeholder one of them. Standard don't define which of them will get the placeholder because standard forces you tou use ID only once per page. You need to set placeholders for all elements with input_text class. You can do it by array with placeholders and iterating fields: In each iteration set i-th placeholder from array by this code
var placeholders = ["Username", "Email", "Phone", "Credit card"]
var elements = document.getElementsByClassName("input_text");
for (var i = 0; i < elements.length; i++) {
elements[i].setAttribute("placeholder", placeholders[i]);
}
Example: http://jsfiddle.net/M6R7K/81/
The best practice is set placeholders normally in HTML.
First of all you cannot use the same id for more then one element.
Second: try to use as input name attribute meaningful values. If you cannot touch the HTML you can always use the index parameter inside the forEach loop, this could be an idea. Another idea could be to look for the root element in order to distinguish the input fields.
I tried to do for you, right to give you an idea on how to solve your problem:
window.onload = function() {
Array.prototype.slice.call(document.getElementsByClassName("input_text")).forEach(function(currentValue, index) {
currentValue.setAttribute("placeholder", currentValue.getAttribute('name'));
});
}
<div class=theheader>
<h1> The Header</h1>
<div class="fullform">
<div class="container register">
<div class="form_group required">
<input class="input_text" id="username_field1" name="username" size="30" value="" type="text">
</div>
</div>
<div class="container login">
<div class="form_group">
<input class="input_text" id="username_field2" name="password" size="30" type="text" >
</div>
</div>
</div>
</div>
<div class=thecontent>
<h1> Form Content</h1>
<div class="fullform">
<div class="container register">
<div class="form_group required">
<input class="input_text" id="username_field3" name="email" size="30" value="" type="text">
</div>
</div>
<div class="container login">
<div class="form_group">
<input class="input_text" id="username_field4" name="other" size="30" type="text" >
</div>
</div>
</div>
</div>
I have been able to find the solution, using the "attr" function, and the Jquery framework.
This is the function that I applied to each of the inputs, in order to create a unique placeholder (example for the 1st field) :
$(".theheader .register input").attr('placeholder', 'Username Header')
This code allows to retrieve the DIV CLASS of each input field, and apply a customized field.
So for my example, it would be this :
$(".theheader .register input").attr('placeholder', 'Username Header')
$(".theheader .login input").attr('placeholder', 'Username or Email Header');
$(".thecontent .register input").attr('placeholder', 'Username Content');
$(".thecontent .login input").attr('placeholder', 'Username or Email Content');
And each field has his customized placeholder !
Here is the result : https://jsfiddle.net/3ddo465n/9/
Thank you all for the contribution !