Javascript update text without page refresh - javascript

Just learning javascript now. I want to make a remembrance ribbon where a persons name is added via a form. I have it working but just after it happens the page refreshes and it ends up blank. Is there a quick way to achieve this without a page refresh.
https://thimbleprojects.org/mrcpower/573757

By default, when you submit a form the page will refresh. So to prevent that you can add this to the top of your submit event handler function.
function changeText(event) {
event.preventDefault();
}

try this code:
<input type="text" name="" id="yourInputId">
<button onclick="submit()">submit</button>
<div id="ribbonId"></div>
<script type="text/javascript">
function submit(){
var a = document.getElementById('yourInputId').value;
document.getElementById('ribbonId').innerHTML = a;
}

Related

<form> is causing problems with my JavaScript code

I have simplified my code down to a very basic level to try to figure out why, when I add a form to any of my HTML pages that contain Javascript, the page renders twice: once with the JavaScript and once without, putting me back where I started.
Here's the simple HTML:
<form action="test.php" method="post">
<div class="section">
<fieldset>
<p id="myP"></p>
<button type='submit' name='NewClassTypes' value='NewClassTypes' id='save_button'>Save</button>
</fieldset>
</div> <!-- ends section -->
</form>
<script type="text/javascript" src="inc/js/scripts.js"></script>
So all I have is an empty paragraph and a Save button.
Then I have this Javascript code that just simple writes "Hello world!" to the paragraph element, when the Save button is clicked:
var saveButton = document.getElementById("save_button"); // Save button
var displaySomeText = function () {
var myParagraph = document.getElementById("myP");
myParagraph.textContent = "Hello World!";
}
saveButton.onclick = displaySomeText;
The problem is that when I click on the Save button, "Hello world!" displays for a brief second and then disappears.
BUT it works just fine IF I remove the FORM element.
Any ideas why this might be happening?
In the real code I need to submit data to the database, and I want to be able to use _POST to get the data I need out of all my inputs.
The reason is, after clicking on the submit button, it "submits" the form. Try changing the button's type="button" and this will not happen:
<!------vvvvvvvvvvvvv Change this!!! -->
<button type='button' name='NewClassTypes'
value='NewClassTypes' id='save_button'>Save</button>
Else, you need to give return false in your function. That would also work:
var displaySomeText = function () {
var myParagraph = document.getElementById("myP");
myParagraph.textContent = "Hello World!";
return false; // Add this!
}
The submit button type has a special functionality: it causes the form it is put in to be submitted by the browser. Putting a click handler on it does not prevent this from happening. So, the result is what is expected.
In order to not submit the form, you need to change the button type:
<input type='button' name='NewClassTypes' value='NewClassTypes' id='save_button'>Save</button>
In this case, the action property of the form doesn't make sense, as well as the method - they both are not used.
You may find it easier to use jQuery when troubleshooting issues like that.
$('#save_button').on('click', function(e){
e.preventDefault(); // don't submit the form as usual.
$('#myP').text('Hello World!');
});

Refresh chart(javascript) after doing mysql Query

I've got a javascript for drawing a chart. I get my information out of my MySQL base. And I got 3 different buttons to get the different information out of the database.
My problem now is, I get the information out of my database, it shows it in the chart but when it shows the information it refreshes the page.
Is there a way to show the information after my page is refreshed? I actually tried to use the window.onload but that doesn't give me the wanted result.
in php I use the following code to get the info from my MySQL DB:
if(isset($_POST['btnProduct']))
{
....
}
in html it's like this:
<div class="content">
<form action="" method="post" enctype="multipart/form-data">
<input type="submit" name="btnProduct" id="btnFilterProduct">
</form>
</div>
And in JS I use this code:
<script type="text/javascript">
window.onload = function()
{
document.getElementById('btnFilterProduct').onclick = function()
{
....
}
}
I know the PHP needs to refresh to get the data. and Javascript doesn't. But can I change the order? Or is there a way to change my JS to let it load AFTER the page is refreshed?
To stop the page reload, modify your onclick function to be:
document.getElementById('btnFilterProduct').onclick = function(event) {
event.preventDefault();
...
}
event.preventDefault stops the default behavior of the event, which in this case is to refresh the page since you have an empty action. Another option would be to not use a form. Just use the <button> element instead.

How can I refresh the page when the submit button of a form is clicked?

For example I have this code:
<form name="formm" action="http://example.com/" target="_blank">
<input type="text" name="txt" />
<input type="Submit" value="Submit" />
</form>
When I click submit it sends the form to the link which opens in a new tab. This is exactly what I want to happen. However, I would also like my page to refresh so I can run some PHP code. Simple enough, I add this to my submit input:
onclick="location.reload()"
This seems to work in any other case except when it's added to the submit button. How can I get this to work?
Within the form that is submitting to a new page, add onClick="reloadpage();". This works in all 5 browsers:
function reloadpage()
{
var returnURL = "this_pages_name.php?upd=" + Math.random() * 100;
setTimeout(function()
{
window.location=returnURL;
}, 50 );
}
You could try:
onsubmit="setTimeout(function () { window.location.reload(); }, 10)"
I use this for my forms and it works perfectly across all browsers :)
You could try;
$('#form_id').on("submit", function() {
location.reload();
});
This shouldn't prevent the default action of the form being submitted, but should capture the event and reload the page.
You will need to specify an ID on the form.
In your PHP before generating any output declare a header to move location to current file:
header('Location: .');
This will set header location to: '.' (current directory) and then look for your page again. It will also clear any form datasets preventing database spam

How do I make permanent changes to javascript variables or html elements inside of .click()?

For example:
$(document).ready(function(){
$('#submit').click(function(){
$('#rightAd').text("HELLO EVERYBODY");
});
});
This only changes the text in #rightAd for the moment the button is clicked. How do I make it remain, "HELLO EVERYBODY" after the click ends? Or am I thinking about this the wrong way?
changing via script will reflect until the page gets refreshed.
Try this:
HTML:
<div id="rightAd"> some text.....</div>
<button id="submit">Submit</button>
JQuery:
$('#submit').click(function(){
$('#rightAd').text("HELLO EVERYBODY");
});
If you are using <input type="submit"/> this will submit your page, so changes will be flashed as page gets refresh.
Use event.preventDefault() to prevent form from submission

onsubmit property fails to open new window

A quick question here regarding forms. I've searched the web and can't seem to figure out why what I've implemented isn't working.
The idea is simple. I have a form inside a JSP page. The form has an 'onsubmit' property defined to open a different jsp with some parameters. Inside the form I have a few buttons, one of which calls a JavaScript function, which in turn submits the form (under some conditions).
Here's the code:
JSP:
...
<form id='testForm' onsubmit="window.open('another.jsp')">
<input type="button" onclick="callJsFunction()" />
..
</form>
JavaScript:
function callJsFunction() {
if (launchNow == 1) {
var form = document.getElementById("testForm");
form.submit();
}
}
If I add target="_blank" to the form definition, a new window does open, but NOT the jsp I want to open. Ultimately, I want the form to perform a servlet action (using the action attribute) and then open the new jsp. Any ideas???
Thanks!
The solution to what I was looking for is found here: Javascript Post on Form Submit open a new window
Rather than setting target="_blank", I can set the target to the window I define and open. In my servlet, I redirect to the desired jsp, and it appears in the new pop-up window.
<form id='testForm' action='another.jsp' target='_blank'>
I might be wrong but is this what you are looking for?
Please see the working demo at this link: http://fiddle.jshell.net/vf6AC/show/light/ (don't work in the jsfiddle)
<form action="http://google.com" id="testForm">
<input type="submit" />
</form>​
<script type="text/javascript">
var testForm = document.getElementById("testForm");
testForm.onsubmit = function(e){
window.open("http://stackoverflow.com");
return true;
};​
</script>
See the jsfiddle here: http://jsfiddle.net/vf6AC/

Categories