**Page <input type="text" id="page#" value={{Page_id}} style="width:50px; display:inline-block" > out of {{total}}
<input type="button" class="btn btn-outline-success" onclick="getDirection()" value="Go" style="display:inline">
<script>
function getDirection(){
var input = document.getElementById("page#").value;
var new_id ="http://159.203.172.178/page/{{current_page.id_tei}}" ;
new_id = new_id.slice(0,-3);
new_id = new_id+input;
console.log(new_id);
window.location=new_id;
}
**
Hello, I am new to javascript. I am trying to make my django application take input from users and turn to the page based on their input. Right now, it works when I click on the button "Go". Is there a way I can make it work when I hit Enter key as well? I tried to use EventListener, but it tells me EvetListener is not a function. Great thanks.
You can make it a form and have the function be called 'onSubmit'.
Related
I have created a working Binary to Decimal Calculator but would like a HTML input.
<html>
<input placeholder="00000000" name="htmlinput"></input>
<input id="clickMe" type="button" value="Go" onclick="runbintodec();"></input>
</html>
<script>
function runbintodec()
{
var bin = document.getElementByName('htmlinput').value;
...(Bin to Dec Calc code)
}
</script>
I need some way to take an input from a html input form and send it to the script when i click the button 'go'.
First of all, input is a non-closing tag. Secondly, there's nothing like document.getElementByName, use document.getElementsByName instead or even better - assign an unique id identifier to your input and then catch it by document.getElementById.
function runbintodec() {
var bin = document.getElementsByName('htmlinput')[0].value;
}
<input placeholder="00000000" name="htmlinput">
<input id="clickMe" type="button" value="Go" onclick="runbintodec();">
I'm building a multipage form. On a few of the form's pages, I have questions that allow the user to add inputs dynamically if they need to add a job, or an award, etcetera. Here's what I'd like to do/what I have done so far.
What I Want to Do:
As the user adds fields dynamically, I want to validate those fields to make sure they have been filled in, and they are not just trying to move to the next page of the form with empty inputs.
After all the fields are successfully validated, a "Next" button at the bottom of the page, which up until this point was disabled, will become reenabled.
What I know How To Do
With some help, I've been able to workout a validation pattern for the inputs that are not dynamically added (such as First Name, Last Name) and I can extend this same logic to the first set of inputs that are not added dynamically. I have also worked out how to re-enable the "Next" button once all fields are good.
What I do Not Know How To Do
How do I write a function that extends the logic of the simple validation test to also check for dynamically added iterations.
http://codepen.io/theodore_steiner/pen/gwKAQX
var i = 0;
function addJob()
{
//if(i <= 1)
//{
i++;
var div = document.createElement("div");
div.innerHTML = '<input type="text" class="three-lines" placeholder="School Board" name="schoolBoard_'+i+'"> <input type="text" class="three-lines" placeholder="Position" name="position_'+i+'"> <input type="date" class="three-lines" name="years_'+i+'"> <input type="button" value="-" onclick="removeJob(this)">';
document.getElementById("employmentHistory").appendChild(div);
//}
}
function removeJob(div)
{
document.getElementById("employmentHistory").removeChild(div.parentNode);
i--;
};
function checkPage2()
{
var schoolBoard_1 = document.getElementById("schoolBoard_1").value;
if(!schoolBoard_1.match(/^[a-zA-Z]*$/))
{
console.log("something is wrong");
}
else
{
console.log("Working");
}
};
<div id="page2-content">
<div class="input-group" id="previousTeachingExperience">
<p class="subtitleDirection">Please list in chronological order, beginning with your most recent, any and all full-time or part-time teaching positions you have held.</p>
<div class="clearFix"></div>
<label id="teachingExpierience">Teaching Experience *</label>
<div id="employmentHistory">
<input type="text" class="three-lines" name="schoolBoard_1" id="schoolBoard_1" placeholder="School Board" onblur="this.placeholder='School Board'" onfocus="this.placeholder=''" onkeyup="checkPage2()" />
<input type="text" class="three-lines" name="position_1" placeholder="Position" onblur="this.placeholder='Position'" onfocus="this.placeholder=''" onkeyup="checkPage2()" />
<input type="date" class="three-lines" name="years_1" />
<input type="button" name="myButton" onclick="addJob()" value="+" />
</div>
</div><!--end of previousTeachingExperience Div -->
Instead of trying to validate each individual input element, I would recommend trying to validate them all at once. I believe that is what your checkPage2 function is doing.
You can add the onBlur event handler or the onKeyUp event handler you are currently using to all added inputs to run your form wide validation. This has the effect of checking each individual form element if it is valid so you know for sure you can enable the submit button.
Lastly, when removeJob is called, you should also run the form wide validation. It would look something like this:
function addJob()
{
i++;
var div = document.createElement("div");
div.innerHTML = '<input type="text" class="three-lines" placeholder="School Board" name="schoolBoard_'+i+'" onkeyup="checkPage2()"> <input type="text" class="three-lines" placeholder="Position" name="position_'+i+'" onkeyup="checkPage2()"> <input type="date" class="three-lines" name="years_'+i+'" onkeyup="checkPage2()"> <input type="button" value="-" onclick="removeJob(this)">';
document.getElementById("employmentHistory").appendChild(div);
}
function removeJob(div)
{
document.getElementById("employmentHistory").removeChild(div.parentNode);
i--;
checkPage2();
};
For every element that you make with document.createElement(...), you can bind to the onchange event of the input element, and then perform your validation.
Here's an updated version of your CodePen.
For example:
HTML
<div id="container">
</div>
Javascript
var container = document.getElementById("container");
var inputElement = document.createElement("input");
inputElement.type = "text";
inputElement.onchange = function(e){
console.log("Do validation!");
};
container.appendChild(inputElement);
In this case I'm directly creating the input element so I have access to its onchange property, but you can easily also create a wrapping div and append the inputElement to that.
Note: Depending on the freqency in which you want the validation to fire, you could bind to the keyup event instead, which fires every time the user releases a key while typing in the box, IE:
inputElement.addEventListener("keyup", function(e){
console.log("Do validation!");
});
I'd like to have a drop down menu and have two buttons on a page, where one button will send out something like:
url/?tile=x&status=on
if the "On" button is pressed
or
url/?tile=x&status=off
if the off button is pressed
x = is the value in the drop down menu
I can do something like this:
<form>
Select Tile For On/Off
<select id="tileSelect2" data-range="63" name="tile"></select>
<script>
var select = document.getElementById("tileSelect2");
var range = select.dataset.range;
for (var i=0; i<+range; i++) {
var node = document.createElement("option");
node.value = i;
node.text = i;
select.appendChild(node);
}
</script>
<input type="submit" value="Switch Tile On">
<input type="submit" value="Switch Tile Off">
</form>
But that will just send the same thing out for both buttons. Is there a way of making different buttons do different things? I'd be happy if it sent:
url/?tileon=x
and
url/?tileoff=x
Or the other option suggested above.
I've found various methods where you can run a script from a button press, but I can't work out from that how to make it send out the value selected to the server.
I need to keep it simple as it's being hardcoded into an embedded sever.
Many thanks.
If you give your submit buttons names, it will create an extra space in the url if the method is set on GET(which you probably use):
<input type="submit" name="on" value="Switch Tile On">
<input type="submit" name="off" value="Switch Tile Off">
You will get
url/tile=x&on=Switch+Tile+On
If you hit the first button. Now you can check whether the button was "on" or "off" with
if(isset($_GET['on']))
or
if(isset($_GET['off']))
If you add a <hidden/> element to your form declaration, then you supply a value to your <hidden/> before the form is posted in order to pass along the value to the form on the server.
<form>
Select Tile For On/Off
<select id="tileSelect2" data-range="63" name="tile"></select>
<script>
var select = document.getElementById("tileSelect2");
var range = select.dataset.range;
for (var i=0; i<+range; i++) {
var node = document.createElement("option");
node.value = i;
node.text = i;
select.appendChild(node);
}
</script>
<hidden id="switchValue" name="switchValue" value="" />
<script>
function switch(val) {
document.getElementById("switchValue").value = val;
}
</script>
<input type="submit" value="Switch Tile On" onclick="switch('on')">
<input type="submit" value="Switch Tile Off" onclick="switch('off')">
</form>
i am looking for solution i want to disable button if value of input box matched.
i got two buttons and an input box
<button type="button" name="buttonpassvalue" value="-1" onclick="showUser1(this.value)"><< Previous</button>
<button type="button" name="buttonpassvalue1" value="1" onclick="showUser2(this.value)">Next >> </button>
<input type="text" id="count" value="0"/>
i want to disable buttonpassvalue if input box (count) is zero and disable second button buttonpassvalue1 if value of (count) is 5
thanks for your help.
Made a JSFiddle for you!
http://jsfiddle.net/fRHm9/
Basically, you make a change event listener and, when it changes, grab the element whose id is equal to the input's value. I assigned the buttons ids of -1 and 1. Check out the fiddle.
Basically, you could achieve this quite easily using plain javascript. But, when using javascript in order to be able to find a specific element efficiently you will need to specify an id for that element. So I would recommend you to change your buttons so that they use id attributes as follows...
<button type="button" id="buttonpassvalue" name="buttonpassvalue" value="-1" onclick="showUser1(this.value)"><< Previous</button>
<button type="button" id="buttonpassvalue1" name="buttonpassvalue1" value="1" onclick="showUser2(this.value)">Next >> </button>
<input type="text" id="count" value=""/>
Note, that I added id attributes to each buttons. Now, you can run attach this javascript function to the keyup event of the text input element...
var input = document.getElementById('count');
input.onkeyup = function(){
var buttonpassvalue = document.getElementById('buttonpassvalue');
var buttonpassvalue1 = document.getElementById('buttonpassvalue1');
var val = this.value.trim();
if(val == "0"){
buttonpassvalue.setAttribute("disabled","disabled");
buttonpassvalue1.removeAttribute("disabled");
}
else if(val == "5"){
buttonpassvalue.removeAttribute("disabled");
buttonpassvalue1.setAttribute("disabled","disabled");
}
else{
buttonpassvalue.removeAttribute("disabled");
buttonpassvalue1.removeAttribute("disabled");
}
};
I have created a JS Fiddler where you can see a quick demo. Also, note that this solution is using plain javascript.
I have a simple form with 2 input fields and one button. When the button is clicked, the value of the 2 input fields should be sent to the AJAX function to be handled in a servlet. For some reason, the servlet is not being reached. Can anyone see why? I have an almost identical method working with a different form, and I can't see why this one isn't working.
Here is the HTML form code:
<div id="addCourses" class="hidden" align="center" >
<form id="addCourse" name="addCourse">
<input type="text" id="courseID" name="courseID" value="courseID" size="40" /><br />
<textarea rows="5" cols="33" id="courseDesc" name="courseDesc">Description</textarea><br />
<input type="button" value="Add Course" onclick="addCourse(this.courseID.value, this.courseDesc.value);"/>
</form>
</div>
Here is the Script function:
<script type ="text/javascript">
function addCourse(id, descr)
{
var fluffy;
fluffy=new XMLHttpRequest();
fluffy.onreadystatechange=function()
{
if (fluffy.readyState==4 && fluffy.status==200)
{
//do something here
}
};
fluffy.open("GET","ajaxServlet?courseID="+id+"&courseDescription="+descr,true);
fluffy.send();
}
</script>
Because this is the button and not the form
so
this.courseID.value
this.courseDesc.value
returns an error.
You should use
this.form.courseID.value
this.form.courseDesc.value
Second problem is you have a name clash. The form and function are named addCourse. It will lead to problems. Rename one of them to be different.
Running Example
When you use this, as in onclick="addCourse(this.courseID.value, this.courseDesc.value);", I think that would refer to the input element, and therefore the values aren't being passed correctly.
Bind your event handlers in javascript, where they should be, and you can avoid the issue entirely.
HTML:
<input type="text" id="courseID" name="courseID" value="courseID" size="40" /><br />
<textarea rows="5" cols="33" id="courseDesc" name="courseDesc">Description</textarea><br />
<input type="button" id="addCourse" value="Add Course"/>
JS:
document.getElementById('addCourse').onclick = function () {
var fluffy = new XMLHttpRequest();
var id = document.getElementById('courseID').value;
var descr = document.getElementById('courseDesc').value;
fluffy.onreadystatechange=function() {
if (fluffy.readyState==4 && fluffy.status==200) {
//do something here
}
};
fluffy.open("GET","ajaxServlet?courseID="+id+"&courseDescription="+descr,true);
fluffy.send();
};
As epascarello pointed out, you need to change the ID of your form as having two elements with the same ID is not allowed and will cause unpredictable javascript behavior.
Try a fluffy.close; after the if ready state expression.