I'm having some trouble whenever I want to add some text to my div tag, here's my code:
<html>
<body>
<div id="comments">
</div>
<form name="forma">
<textarea name="commentUser" id="commentUser" cols="40" rows="5">
Comments here...
</textarea><br>
<input type="submit" value="Ready!" onClick="writeComment()" />
</form>
<script type="text/javascript" >
function writeComment()
{
var comment = document.forma.commentUser.value;
alert(comment);
document.getElementById('comments').innerHTML=comment;
}
</script>
</body>
</html>
It does what it has to do correctly, but then it switches back to the text box only and the comment I just wrote disappears. Any idea of what's going on here?
Thank you so much for your time.
It is because you are submitting the form.
Quick fix:
<input type="submit" value="Ready!" onClick="writeComment()" />
to
<input type="button" value="Ready!" onClick="writeComment()" />
In addition, you are able to prevent the default action of an input. Basically telling the browser the you are going to handle the action with preventDefault:
function writeComment(e) {
var comment = document.forma.commentUser.value;
alert(comment);
document.getElementById('comments').innerHTML = comment;
e.preventDefault();
return false;
}
What's happening is your form is submitting, the page is refreshing, and the div is going back to its pre-JavaScript-set content.
Try swapping the type='submit' to 'button' on the button.
When you click on the submit button the form is submitted, causing the whole page to reload. You need to return false from the onclick of the submit button to prevent it:
<input type="submit" value="Ready!" onclick="writeComment(); return false;" />
Or, if you don't want the button to ever submit the form change type="submit" to type="button".
PS. It's bad practice to use the onclick attribute. Instead bind a handler to the click event using pure JS.
This is because you use not just a regular button but a submit button which by default submits the form to the server. You can see that your comment is submitted via URL as you didn't specify the method(GET and POST and GET is default).
Simply write:
onclick="writeComment();return false;"
Returning FALSE prevents from default behaviour - submitting the form.
Its making another request to the server, which is causing the page to be rendered again.
Just return false from writeComment.
You'll have to prevent your form from submitting:
<input type="submit" value="Ready!" onClick="writeComment(); return false;" />
change this
<input type="submit" value="Ready!" onClick="writeComment()" />
to this:
<input type="submit" value="Ready!" onClick="writeComment(); return false;" />
try <input type="button" value="Ready!" onClick="writeComment()" />
you should switch
<input type="submit" value="Ready!" onClick="writeComment()" />
for
<input type="button" value="Ready!" onClick="writeComment()" />
Or another option is to convert your submit into a button and take it out of the form, buttons can now exist outside of forms and from the code you pasted I don't see why you have to use a form, this will mean that your page isn't reloaded when you click on the "Ready" button.
Related
I have two different buttons like this :
<input type="button" name="but1" id="but1" value="page1" onclick="f('WebForm1')" />
<input type="button" name="but2" id="but2" value="page2" onclick="f('WebForm2')" />
and obviously two other webforms ("WebForm1" and "WebForm2").
using JavaScript, how can I submit the information from the default webform (which I have the buttons in it) to the page that is the value of its button?
(I mean when I click the first button, it should go to WebForm1 and submit data and when I click the second button, it should go to WebForm2 and submit the data)
I've never tried this before so in JavaScript I wrote
function f(t){
var a;
a = document.getElementById['form1'];
a.submit(t); }
but its not working.
Are all these functionalities to be implemented on the same page?
How I see it, you can make the two input buttons the submit buttons of the two different forms.
<form action = "WebForm1">
<input type= submit name="but1" id="but1" value="page1" />
</form>
<form action = "WebForm2">
<input type= submit name="but2" id="but2" value="page2" />
</form>
Also, I'm not sure if anything like a.submit(t) even works.
In HTML5 you can use <button> with form attribute:
<button type="submit" form="form1" value="Submit">Submit</button>
with form attribute you can specify the form element the <button> element belongs to.
Then, in your form:
<form action="WebForm1" method="get" id="form1">
...
</form>
hope this will help. t is the name of the form.
function f(t){
// <form name="WebForm1">
// t is the name of the form
document.t.submit();
}
this work only if the two form are in the same page as where the button are.
Here's my HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="test" method="get" action="">
<input type="hidden" name="var1" value="true" />
<input type="submit" name="var2" value="submit" />
</form>
<script>
$("#test").submit();
</script>
The resultant request that that makes has var1 in it but not var2. My question is why and what can I do to get var2?
Here's a live demo:
http://www.frostjedi.com/terra/dev/submit.php
try: method="post" in form or use <button type="submit"></button>
A form should submit the value of a submit button only if it's clicked to submit the form (see HTML5 4.10.22.4 Constructing the form data set). Calling the submit method doesn't click the button, so it doesn't submit the value.
The code you've posted will endlessly submit the form, thanks.
You can call the click method of the button, but that may not work (i.e. submit the button's value) everywhere:
<form id="test" method="get" action="">
<input type="hidden" name="var1" value="true">
<input type="submit" name="var2" value="submit">
</form>
<button onclick="$('#test')[0].var2.click()">submit form</button>
Or, as user3701524 suggests, use method=post if that suits.
The value on button will only be submitted when u actually CLICK that button. To make it all work nice, I recommend binding to
$('form').on('submit', function(e) {
// here you have the button value if it was clicked.
e.preventDefault(); // optional this prevent default submission.
});
either way, calling $('form').submit() will NOT send the button value because is not triggered by the button itself.
Hope it helps!
So I have a form that when submitted requires confirmation. I am using Javascript confirm to prompt for this. However, I do not want it to refresh if someone hits cancel. I thought putting an empty else statement would do so, however it appears I was wrong.
Not sure what I need to be doing to make sure it does NOT refresh if someone presses cancel on the popup.
the JS confirm code
function postConfirm() {
if (confirm('You will not have another chance after submitting to view your post. Please make sure it is exactly how you want it before continuing. ')) {
yourformelement.submit();
} else {
}
}
the form that uses this JS function (if needed)
<div id="uploadForm">
<center>
<form enctype="multipart/form-data" action="functions/post_upload.php" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="99999999" />
<div><textarea id="text" cols="70" rows="15" name="entry"></textarea></div>
<p> Attach an image to this memory!</p>
<input name="userfile" type="file"><br>
<input type="submit" value="Submit" class="blueButton" onclick="postConfirm()"/></div>
</form></center>
</div>
Change:
onclick="postConfirm()"
to
onclick="return postConfirm()"
and in your function, make the else:
else {
return false;
}
jsFiddle example
try adding
return false;
to the else part of your if statement.
Edit:
Also modify your call to the function so that the return false is passed back to the submit action (which is fired when the button is clicked).
<input type="submit" value="Submit" class="blueButton" onclick="return postConfirm()"/></div>
You can prevent form submission using the preventDefault() method of event object and manually submit the form upon confirmation using the submit() method of form elements.
Change your HTML to:
<input type="submit" value="Submit" class="blueButton" onclick="postConfirm(event)"/></div>
function postConfirm(e) {
e.preventDefault();
if(confirm('You will not have another chance after submitting to view your post. Please make sure it is exactly how you want it before continuing. '))
yourformelement.submit();
}
However, it is better to avoid inline javascript since it is considered a bad practice. Instead you can do:
var button = document.getElementsByClassName("blueButton")[0];
button.addEventListener("click",function(e) {
e.preventDefault();
if(confirm('You will not have another chance after submitting to view your post. Please make sure it is exactly how you want it before continuing. '))
yourformelement.submit();
});
try
<input type="button" value="Submit" class="blueButton" onclick="postConfirm()"/></div>
instead of
<input type="submit" value="Submit" class="blueButton" onclick="postConfirm()"/></div>
Ive got several buttons, passing different params to the same function. That function will eventually do lots of client side processing but first it needs to validate. Validation is working fine, but upon success, I need to reset the form. In my fiddle below, you can see that the .resetForm() call does nothing, and if I manually clear the field, it throws validation errors like I was trying to submit.
see my fiddle: http://jsfiddle.net/uT6pw/10/
html:
<form id="frm" method="post" onsubmit="return false;">
<input type="text" id="FName" class="required">
<span class="field-validation-valid" data-valmsg-for="FName" data-valmsg-replace="true"></span>
<button id="btn1" onclick="addContact('1')">1</button>
<button id="btn2" onclick="addContact('2')">2</button>
<button id="btn3" onclick="addContact('3')">3</button>
</form>
javascript:
function addContact(num){
var v = $("#frm").validate()
if (v.form())
{
v.resetForm();
//$("#frm").validate().resetForm()
$("#FName").val('');
}
}
Thanks!
I have not heard about resetForm, try this:
form.reset();
Update: You have button tags that post form, this is the reason form gets validated when you click them. Instead change <button> to <input type="button"/>
See fiddle
i am trying to create a link that submits a form. I use this and works fine :
<a name="submit" href="javascript:document.theForm.submit();" class="rollover-button gray small"><span>Send Message</span></a>
However, i have a problem. My previous submit button was :
<input type="submit" name="submit" value="Send Message" />
When this was clicked, i was getting a $_POST['submit'] value that i was checking with isset in my php script, to see whether the form is submitted or not. However, this does not work with my submit link. Does anybody know how i can do that ?
EDIT:
I tried that, as suggested :
<form action="." name="theForm" class="contactForm" method="post">
<input type="hidden" name="submit" value="Send Message" />
</form>
<a name="submit" href="javascript:document.theForm.submit();" class="rollover-button gray small"><span>Send Message</span></a>
But still does not work.
You can create input type of hidden and check for its existence:
if (isset($_POST['hiddenName'])) {....}
You can use a hidden field instead. So when the form is submitted, you can check if the hidden element exists.
Like this:
<input type="hidden" name="submit" value="Send Message" />
This way, you can check for $_POST['submit'] when you submit the form. Just make sure the hidden <input> is inside the <form> element, so it will POST with the rest of the form.
add a hidden input.
<input type="hidden" name="submit" value="Send Message" />
it will not be visible to the user, but it will be send with the form contents.
You can always hide the submit button (with css display: none) and click it with JavaScript:
document.forms.theForm.elements.submit.click();