I'm looking for a way to update the webpage I'm working on to act as a report for several different people to pass back and forth. I'm using forms to take in several pieces of data and am wondering how I can make it so that it just immediately adds the content to the divs under the right heading. I'm currently using jquery and append and it looks like it adds the desired input and then immediately removes it. I tried using .live as well and it did not show up at all. Is there a way to make form inputs post to the page without submitting to another page?
Here is my code so far, testing just the element that will be the heading for the issue:
<div class="IssueDiv">
</div>
<form id="newIssue">
<fieldset>
<legend>Add a new important issue:</legend>
<input type="text" id="issue" placeholder="Issue Summary...">
<input type="text" id="issue-client" placeholder="Client...">
<input class="ticket" type="text" id="issueParent" placeholder="Parent ticket..."><br>
<textarea placeholder="Issue details..."></textarea><br>
<button id="addIssue">Add Issue</button>
</fieldset>
</form>
And the jquery:
<script>
$(function(){
$("#addIssue").click(function() {
var $issue = $("#issue").val();
var $issueSum = $("<h3></h3>").text($issue);
$(".IssueDiv").append($issueSum);
});
});
</script>
edit: I'm looking into using AJAX but I'm not sure how to make it so that all of the input data will persist. I am basically looking to make a webpage-style-report that will allow myself and my team to update the entries on the report and they will stay on the report until we are able to take them off by removing a div that encapsulates the individual issue.
I would also like to be able to format the individual pieces here separately, so, for instance, I could add a check-box that says the issue is urgent and format the heading of those to be red. What is the easiest way to have data that persists, can be added into new (div/h/p) elements, and is shown on the main webpage, while also allowing me to update formatting?
Your code appears to add the text and then immediately remove it because your form gets posted and the page reloads, effectively resetting the page to its initial state.
If you just want to add the text to the page without posting the form or executing any server-side processing, you can prevent the form from posting using jQuery's preventDefault(). Note that I have created a submit listener on the form itself, rather than a click listener on the submit button.
$("#newIssue").on('submit', function(e) {
e.preventDefault();
...
});
$(function () {
$("#newIssue").on('submit',function (e) {
e.preventDefault();
var $issue = $("#issue").val();
var $issueSum = $("<h3></h3>").text($issue);
$(".IssueDiv").append($issueSum);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="IssueDiv"></div>
<form id="newIssue">
<fieldset>
<legend>Add a new important issue:</legend>
<input type="text" id="issue" placeholder="Issue Summary...">
<input type="text" id="issue-client" placeholder="Client...">
<input class="ticket" type="text" id="issueParent" placeholder="Parent ticket...">
<br>
<textarea placeholder="Issue details..."></textarea>
<br>
<button id="addIssue">Add Issue</button>
</fieldset>
</form>
However, keep in mind that if you're using this to share reports between computers, this will not work. This is only updating the DOM in the current browser and is not doing any data storage or retrieval. If you need the reports to update online, consider using AJAX to post your data to a server-side script without refreshing the page. Then include some sort of timer that refreshes the content (also using AJAX) on a schedule (e.g. every 10 seconds).
Related
Hello I created a simple application that allows me to do a database search. I created an html page with functions in javascript. This is what shows my index.html
<hmtl>
<body onload="initialize()">
<h1>Choose your route:</h1>
<form action="/find" method="POST" autocomplete="on">
<td><input type="text" name="mypos" placeholder="Your Position" size="20" /></td>
<td><input type="text" name="yourpos" placeholder="Destination" size="20" /></td>
<td><button type="submit">Search</button></td>
<button type="Reset" value="Reset">Reset</button>
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>
After inserting the coordinates in the changes and then searching, my output will be a separate line where I can print to the screen if the route exists or not ie: Route not found or Route found.
My problem is to insert a button to go back to this point in the search so as to go back to the start page or index.html. The problem is that I only have one html page (index.html) so any command can only insert it in the search page and not in the results page (the results page is just a printed string is not another html page). This page also interacts with flask. I hope I was clear. Thank you very much for the attention.
As far as I could understand, what you have is index.html doing a postback, and the response of that postback renderizes a different page with the result of the insertion. And it's that result page from where you want to back to index.html. Well, you have two options:
1. In the result page, create a button like this:
<button class="backbutton">Back</button>
<script>
// Somewhere in your initialization code:
const backbutton = document.querySelector('.backbutton');
backbutton.addEventListener('click', function(){
window.history.back();
});
</script>
That gives you some flexibility because it doesn't depend on the route to your index.html page.
2. Simply include a link to your index.html page in your result page:
<a href="index.html">Back to search form</button>
If you want to use the values from a form input after the form is submitted (and cleared), you need to have memorized the value somewhere beforehand. One way to do this is to add (to the input) a listener for the blur event (which happens when the input loses the focus, implying that the user is done editing the input).
In the listener function, you can store the value in a javascript variable for later, like
const firstMyPosInput = document.getElementsByName("myPos")[0];
let myPosValue = firstMyPosInput.value;
Now you can add a new button element (like <button id="myBtn">Try again</button> and give it a click listener that sets the input's value back to what it was before like firstMyPosInput.value = myPosValue.
I have a 'parent' page that is using the following bit of code to pull in a form from a different page on the same domain. There are reasons why I can't just place the form directly on the 'parent'.
<script type="text/javascript">
jQuery("#ai_temp_profile_edit").load(
"https://example.com/form/ #profile-edit-form",
function() {}
).hide().fadeIn(1000);
</script>
The form that is pulled in looks like this:
<form action="https://example.com/form/" method="post" id="profile-edit-form" class="standard-form base" target="hiddenFrame">
<label for="field_1">Name</label>
<input id="field_1" name="field_1" type="text" value="Joey-Jojo Jr. Shabadoo">
<input type="submit" name="profile-group-edit-submit" id="profile-group-edit-submit" value="Save Changes " />
<input type="hidden" name="field_ids" id="field_ids" value="1" />
<input type="hidden" id="_wpnonce" name="_wpnonce" value="a62f8d5fec" />
<input type="hidden" name="_wp_http_referer" value="/form/" />
</form>
When 'submit' is clicked, https://example.com/form/ is opened in a hidden iframe and the user name gets properly saved. This all works well.
I would like the user name on the currently loaded 'parent' page to update via jquery, so that the user has some immediate visual feedback that the name change has taken place.
My approach has been to try and take the value out of the 'field_1' input when 'submit' has been clicked, and pass that variable onto a div in the parent page with an id of 'display_name'.
$(document).ready(function(){
function nameUpdate(){
$("#profile-group-edit-submit").click(function () {
var updateName = $("#field_1").val();
$("#display_name").text(updateName);
});
}
nameUpdate();
});
I've also tried adding window.parent.
before the the #display_name selector section and it didn't change anything.
I've used this approach on another button/div combo on the same page and it works, the difference is that that particular button is in an iframe, not loaded by jquery. So I'm guessing my problem is related to that fact.
I've googled around, but have run out of ideas of how to phrase my question, what to look for, etc...
Any help would be greatly appreciated. Thanks!
Edit: For clarity, the div w/ id #display_name won't update.
Use jquery to handle the form submission.
$(document).ready(function(){
$('#profile-edit-form').submit(function(){
var updateName = $("#field_1").val();
$("#display_name").text(updateName);
});
});
EDIT:
Due to your loading the form dynamically you need to bind the submit function after the load. So...
$(document).ready(function () {
var formLoaded = function () {
$('#profile-edit-form').submit(function () {
var updateName = $("#field_1").val();
$("#display_name").text(updateName);
});
};
$("#ai_temp_profile_edit").load(
"https://example.com/form/ #profile-edit-form",
formLoaded
).hide().fadeIn(1000);
});
If I am understanding it correctly, your problem is "display_name" field is not getting updated with the latest value.
If this is the problem then can you try below thing?
Instead of
$("#display_name").text(updateName);
try using-
$("#display_name").val(updateName);
As per the documentation on jQuery site Val() works well with form Elements whereas text won't.
More on Val() method- https://api.jquery.com/val/#val2
got a problem and cant find the solution.
I am writing a chat. When a new user opens my site (a new session) a div popes out and the user is asked to fill in his name.
The form works fine when I use an input submit. I want it to work without the submit button, I want it to work when i press a div.
here is my code
html:
<form name="form" id="form" action="index.html" method="post">
<span id="nspan">First name:</span> <input type="text" id="firstname" name="name">
<div name="enter" id="enter">Submit</div>
</form>
the jquery:
$(document).ready(function(){
$("#enter").click(function () {
$("#form").submit();
});
});
nevermind is correct - no problem with that code.
Here's the JSFiddle to prove it: http://jsfiddle.net/8Xk7z/
Maybe you problem is that the id "form" is to general a name, and you already used it for another form.
Another thing, why not use a button or a link? You can style it like you want. Be careful when you use thing for what they are not suppose to be used for, it my give unexpected side effects.
In your case, you may only be able to login to you chat using a mouse, that would exclude blind people. You would also not be able to use the tabulater to get to the login "button". And last, if you are blind and uses a screen reader your would actually not know that there is at login "button", as the reader would not recognize the div as something you can click.
I would recomend using the button-tag like this
<button id="enter">Submit</button>
Or the a-tag like this
<a href id="enter">Submit</a>
If you don't like the predefined styling of them you may always override the styling.
try to define jquery at top of the page
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
Then put your script at next.
still issue.
Please check your other function on same page works fine or not.
reaching a point of confusion
I am creating a couple of input elements and a button to search.
From using HTML previously, I am lead to believe that i should create a and contain my elements and
But the data is not to be sent anywhere apart from to the javascript to show the correct place in the google map.
I've managed to confuse myself; do i need a element to contain and s ?
The problem is when i press a whether it be a test or a search button the page reloads.
I do not want the page to reload. The only way for me not to get this to happen is by removing element, this does not feel right, I am concerned with using good practice if possible.
This is my code:
<form id="maps_form">
<fieldset id="search_maps">
<label for="marker">Search Shop: </label>
<input name="searchName" id="searchName" type="text" placeholder="Enter Shop Name">
</fieldset>
<fieldset id="map_buttons">
<button id="test"> test</button>
<button id="searchSomething">Search</button>
</fieldset>
</form>
I feel like, whilst am learning this javascript, dipping into jquery and learning xml, I am forgetting the basics of html :s is this normally to lose touch whilst learning new languages?
The page will reload if your your click/submit handler doesn't return false. So page will refresh if:
If your Javascript listener isn't registered correctly
Your Javascript handler returns true
Your Javascript handler causes an error (check dev console for errors)
$("#maps_form").submit(function () {
// do stuff
return false; // Don't submit the form
});
Never do that! Wouldn't prevent go to next page if too many action after return false.
$("#maps_form").submit(function () {
// do stuff
return false; // Don't submit the form
});
This is correct form:
$("#maps_form").submit(function (event) {
event.preventDefault();
...
});
let me start by saying it may look simple but im finding it extremely difficult.
ive made a search script that uses PHP and to fetch a result would look like this
search.php?term=alice&submit=Submit
Standard stuff.. problem is, i use an SPI with AJAX and PHP so my results would have to load dynamically into a div, whilst still keeping the hash value, as not to lose the page the user had visited previous to searching.
jQuery.history.js is the plugin i use for back button support, which requires links to be like such:
Home Page
this would load 'home.html' into a div named pageContent. as far as i know theres no way to call php files unless you develop a little hack, which i have,
here is my JavaScript/jQuery for my search form:
<script language="JavaScript">
$(document).ready(function() {
// bind form using ajaxForm
$('#search1').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#pageContent',
// success identifies the function to invoke when the server response
success: function() {
$('#pageContent');
var hash = '#search.php?term='+($('#query').val()+'&submit=Submit').replace(/ /g, '+');
var stripped = hash.replace(/(<([^>]+)>)/ig,"");
update(window.location.hash = stripped);
}
});
});
</script>
Heres the form:
<form id="search1" action="search.php" method="post">
<input id="query" type="text" name="term" />
<input type="submit" name="submit" value="Submit" />
</form>
My problem is this:
ive tried this.form.reset(); this: Resetting a multi-stage form with jQuery , yet none of this works. please help me if you know a way of doing this..
$('#query').val(DefaultValue);
with this u can set your value to whatever you want, like blank: '';