I'm currently doing work experience designing the ui for some courier software in basic HTML. I have only been doing this for 4 days now so please excuse my basic knowledge etc.
At the top of this particular page I have 2 headers which I would like, if possible, to get to automatically update to mirror data entered into 2 fields lower in the form. Neither of these fields has a submit button currently and ideally I would like it so that the headers are changed when the user clicks on the next part of the form. My boss didn't know how to do this but suggested I look at java onchange commands, however I haven't been able to find anything that would help me out in this regard.If anyone has any suggestions they would be greatly appreciated.
<script type="text/javascript">
function changed () {
var el = document.getElementById('info');
el.innerHTML = document.getElementById('user').value;
}
</script>
<form name="log in_form" method="post" action="log.php?action=login">
<div class="forminput"><input onkeyup="changed()" type="text" id="user">
</form>
<div id="info">
</div>
Use the onKeyUp, for constant updating.
Related
My web-app is written by AngularJs+ ui-router.
The web-app contains many forms (the number of forms are vary, depending on the application the user is applying). Each form has a ui-route state, so our users can go to each form and fill the information.
Before users submit the application we would like to implement a "summary/review" state(page) that contains all the forms the user filled, so users can review (and print) all the information from one page. Is there any way I can use the same form template (templateUrl) for the summary page?
I was thinking to use ng-include and programmatically(ng-repeat) list out all the selected forms, but it seems doesn't work.
PS: my form template might use different controller..
OK, I figured this out.
For ng-include: we need to use
<ng-include src="'formPath'"></ng-include>
For putting the ng-include in a repeater:
<div ng-repeat="f in vm.thisApp.RequiredForms">
<ng-include src="f.FormPath"></ng-include>
</div>
I hope this helps anyone who needs the answer.
in my Angular 1.x app I am getting a list of Offers via an api call to my backend.
For each Offer returned in the reply I am creating an ng-form. I then display the forms in a modal and I want to be able to disable each form's submit button when it has been clicked to avoid multiple clicks whilst the form data is posted to the back end.
This seems tricky since the number of Offers is an unknown, therefore I'm not sure how I can initialize a variable for each Offer in order to disable the button.
The task would be far more straight forward if I just had one single form, I colud set:
$scope.disableButton = true
... then use ng-disabled on the button
Thusfar I am displaying my forms as follows:
<div ng-form ng-repeat="i in offers track by $index" name="messageForm[$index]" class="row ng-cloak">
....
<button type="button" ng-click="offerRespond(messageForm[$index])" ng-disabled="!messageForm[$index].$valid || offer.i.disableButtons">Submit</button>
</div>
Then in my controller's offerRespond function:
offer = this;
offer.i.disableButtons = true;
This doesn't work of course but it is as close as I can get.
A hack would be to parse the Offers object before passing it to the frontend but that just seems like a horrible hack.
Actually I almost had the answer in my implementation, I just was referring to my variables in correctly:
ng-disabled="!messageForm[$index].$valid || offer.i.disableButtons"
should have been
ng-disabled="!messageForm[$index].$valid || i.disableButtons"
Thanks to #igor for giving me an idea to test which enabled me to revealed the answer myself.
Basic problem is, when user tabs in a specific text input on a form, prefilled "+36" gets selected. I'd like to somehow put the cursor right after it (after the +36), instead of selecting the whole word. I've been thinking about disabling text selection of text inputs but no result yet. Googled a lot for it but couldnt find anything but disabling text selection on web pages, which is not really related. How could I solve this problem?
If you are using Jquery, you can try something like this on document ready
$(document).ready(function() {
$("input").focus(function() {
var input = this;
setTimeout(function() {
input.selectionStart = input.selectionEnd;
}, 1);
});
});
Please find the Jsfiddle for the same Jsfiddle Input Focus
In your form element put autocomplete attribute like below
<form method="post" action="/form" autocomplete="off">
</form>
So, I've tried several times to thrust myself into the world of website development. Each time, I have abandoned a project for one simple reason: lists.
I would like to know, from front to back, the dataflow for a system which follows the following sequence of events:
The user is shown a list in a website
The user fills out a new list item in some sort of modal dialog
The user hits "Submit" and that item is now added to the list.
That new list item is sent to the server to be stored
Would there be a whole new page load? When would the data be posted to the server? What are the various options for this (seemingly simple) application? I am targeting relatively small web tools. Not necessarily single page, but I'm not against it.
I understand how to add the new <li> to a list with JQuery, and I know how to build the modal with HTML. I can pull the data from the modal, but I'm not sure how to take that data from JQuery, turn it into the appropriate block of HTML (which could be rather complex), and store the new record in the database.
I can't seem to find a tutorial on this sort of data handling.
Thank you!
Simple. Since you mentioned jQuery, let's use jQuery. Ready? Here we go!
I'm assuming you have a textarea or an input in your modal where a user can enter text. If so, give it an id attribute so it can be referenced, like id="myText".
Then, to take the textarea or input's content and turn it into a list item in your list, you'll need to append an <li> with the textarea's content to its parent <ul> tag. Again, you'll need some way to reference the <ul> tag, so give the <ul> tag an id attribute, something like myList, so it becomes <ul id="myList">.
Now, it's just a matter of taking the val()ue from the input field, and appending it to the list. This is how you do that.
var textareaStuff = $('#myText').val();
$('#myList').append('<li>'+textareaStuff+'</li>');
That wasn't so hard, was it? This is actually quite fun.
I will admit, POSTing stuff to the server may take some getting used to, but it's not too hard.
I've prepared an HTML file for you that does all these things, with pretty detailed documentation. It should be able to help you learn what you're wanting to learn. It's below.
<!DOCTYPE html>
<html>
<head>
<title>My jQuery Experiments</title>
</head>
<body>
<!-- Here's your list with its ID so we can reference it in JS. -->
<ul id="myList">
<li>Sample Item 1</li>
</ul>
<input id="myText"> <!-- Here's your input field. This can be in a modal. -->
<button id="addItemButton">Add Item</button> <!-- We need a save button. -->
<!-- Include jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- This is the javascript you'll need to write and understand -->
<script type="text/javascript" >
// When the element with id="addItemButton" is clicked,
$('#addItemButton').click(function() {
// Append the stuff in brackets to the element with id="myList"
$('#myList').append('<li>' + $('#myText').val() + '</li>');
// ^ The stuff in brackets is an li code with the value of the HTML
// element with id="myText", your input field above.
// Now to post it to a server, we'll need to use AJAX.
// Luckily, jQuery has an AJAX function. It looks like this:
$.ajax('http://example.com/mysaver.php', {
// We're POSTing stuff to the server.
method: 'post',
// This is the data to send to the server.
// It is a JSON object.
// If using PHP, you'll get $_POST['item'] = whatever is in id="myText"
data: { item: $('#myText').val() },
// If the AJAX request was successful,
success: function(data) {
// The argument 'data' contains whatever the server returned.
},
// If not,
error: function(jqXHR) {
// Handle your error here.
}
});
});
</script>
</body>
</html>
I hope this was helpful! Go ahead and approve this answer if it was, and please feel free to ask further questions in the comments and I'll do my best to help out where I can.
I hope someone can help me with this issue.
I am trying to use the datepicker from the following link
The problem is that I want to be able to use a few features but don't know how.
1)I want to be able to unset a specific date from my angular controller
2)I want to be able to clear all the selected dates from the datepicker calendar.
http://bootstrap-datepicker.readthedocs.org/en/release/methods.html
Here's how my code looks:
<div class="col-md-3">
<h5>Pickup Dates</h5>
<!--Inline DatePicker-->
<div class="datepicker" ng-click="dateSelection()" ng-selected="selectedDates!=-1">
</div>
</div>
<script>
$('.datepicker').datepicker({
multidate: true,
todayHighlight: true,
format: 'dd/MM/yyyy'
});
</script>
My angular controller is as follow
$scope.dt = $('.datepicker').datepicker('getDates');
Then I have a function that gets triggered when a button is clicked.
Once the button is pressed, all dates are saved and then the selected dates
should clear from the calendar but instead a new calendar gets created.
$scope.createSearches=function() {
/*saving dates code*/
$('.datepicker').datepicker('clearDate')
}
I read the documentation and not sure how to use the clearDate event so if someone can help me with this and also how to unset specific dates from the controller, I will really appreciate that.
Thanks