I have a website that is set up to be used on mobile devices. The user can draw on a canvas element and then click the "submitButton" button to save the canvas to a server. When the user clicks the button, the "submitButton" button disappears and a "submittingButton" button appears in it's place. All this is working correctly. In fact, the entire project is working correctly after I changed the "submittingButton" button to a type=button instead of type=submit.
My question is, however, when I change the style.display of the "submittingButton" button, if I set the style.display to block, the form is not submitted (which is what I want) but the button is displayed on a new line. However, if I set the style.display to inline or inline-block, the form is submitted, the page refreshed, and the drawing is cleared. Why does the form submit when the style.display is set to inline or inline-block but not submit when the style.display is set to block?
Here are the relevant parts of my code:
function sendImage(){
if(window.hasBeenDrawn){
document.getElementById("signError").style.display="none";
document.getElementById("submitButton").disabled=true;
document.getElementById("clearButton").disabled=true;
window.wasSent=true;
document.getElementById("submitButton").style.display="none";
document.getElementById("submittingButton").style.display="";
//document.getElementById("submittingButton").style.display="block";
saveImage();
}
And the HTML:
<form method="post" action="" class="sigPad">
<div id="receipt" style="text-align:center">
<div class="sig sigWrapper">
<canvas style="width:85%; height:95%; margin-top:25px" height="300" class="pad" id="myCanvas" />
<input type="hidden" name="output" class="output" />
</div>
<br />
</div>
<div id="clearSubButtons">
<button id="clearButton" onclick="redoSig(); return false;" > </button>
<button id="submitButton" type="submit" onclick="sendImage()"> </button>
<button id="submittingButton" style="display:none;"> </button>
</div>
</form>
PS. I have the code working as expected, by changing the "submittingButton" to type=button. I don't want the form to submit, the saveImage() function uses an ajax post to submit the image to the server.
I have no idea why changing the display value of the button causes it to submit the form, however I can offer the following.
By default, a button element in a form is a submit button, so if you have a button that you don't what to act as a submit button, give it a type of button (or use an input element with a type of button), so:
<button id="clearButton" onclick="redoSig(); return false;" > </button>
would be better as:
<button id="clearButton" type="button" onclick="redoSig();">Clear</button>
or
<input id="clearButton" type="button" onclick="redoSig();" value="Clear">
so there is no chance of the form submitting when it's clicked. Similarly for the submittingButton button, change it to a button then it can't submit the form.
Finally, all you seem to be doing is changing the label of the button. You can probably do that using something like:
<form onsubmit="return modifiedSubmit(this);" ...>
...
<input name="submitButton" type="submit" value="Submit signature">
</form>
and the function:
function modifiedSubmit(form) {
if (form.submitButton) {
form.submitButton.value = "Submitting...";
form.submitButton.disabled = true;
window.setTimeout(function(){form.submit();}, 10);
return false;
}
}
Untested of course, but hopefully you get the idea. The timeout is to ensure the button label changes before the form submits, otherwise browsers may decide that since they are in the process of navigating to another page, they won't do any DOM updates and so won't change the label.
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.
I am new to JQuery and need suggestions on following requirement.
I have a form with a submit button as below. Page accepts locale as an input parameter. Depending on the value of locale, on page load I am populating the labels of the input fields in respective language using jQuery.i18n.properties.js plug-in, but I could not update the display value of the button.
Please suggest solution or if there is another way to achieve this.
HTML code:
<input type="submit" data-inline="true" id="submit" value="Submit"/>
Have tried below jQuery options to update the button label:
$("#submit").val($.i18n.prop('submit'));
$("#submit").html($.i18n.prop('submit'));
$("#submit").prop('value',($.i18n.prop('submit')));
$("#submit").text($.i18n.prop('submit'));
None of them worked. But I see the value gets updated as below in Developer tools window, for this button.
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
Submit
<input type="submit" id="submit" value="New Text">
</div>
Try $("#submit")[0].value = $.i18n.prop('submit');. Does that work for you?
(Even though it's a JS workaround, not a JQuery solution)
If your button is an input tag, use the jQuery val:
function changeBtnText() {
$("#submit").val("My new button text");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" id="submit" value="My button">
<button type="button" onclick="changeBtnText()">Change button text</button>
If your button is a button tag, use the jQuery text (or html):
function changeBtnText() {
$("#submit").text("My new button text");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="submit">My button</button>
<button type="button" onclick="changeBtnText()">Change button text</button>
Note: I recommend giving your button an ID different from "submit" to avoid confusion.
I have simple HTML form with submit button. After hitting this button I would like to the see div#my_id which is not visible before.
<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">
<div id="my_id" style="display: none"> My text </div>
How can I make it work?
Is your HTML contained within the <form> tag? It is likely that your submit button is submitting the form and causing a page refresh before the JavaScript is executed.
If this is the case, try changing the input type to button to see the effect.
For example:
#my_id {
display: none;
}
<form>
<input type="button" name="xxx" value=" Show Text! " onclick="document.getElementById('my_id').style.display = 'block' ;" />
<div id="my_id"> My text </div>
</form>
It should work.
<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">
<div id="my_id" style="display: none"> My text </div>
Are you sure not any other HTML is 'ruining' your code? I have tested this on Firefox, Chrome and IE (all latest versions tho)
Your submit button will submit the form it is placed in using the defined action and method. Any arguments / fileds in the form will be included as query parameters.
The reason you are not seeing your div appear, is because the click results in the page being reloaded. After the reload the div will be hidden again.
I have used jquery wizard plugin to create this form.
The form get submitted when I use the ID = "next" submit button.
when I use the ID = "quick" button it will redirect to the Feedback.Form but it will not submitted properly. (I cant see the db has been updated properly.)
$j("#quick").click(function(){
$j('#feedbackForm').submit();
});
<form id="feedbackForm" method="post" action="<openmrs:contextPath/>/module/feedback/addFeedback.form" class="bbq" enctype="multipart/form-data" >
<div id="bottomNavigation">
<input id="back" value="Back" type="reset" />
<input id="next" value="Next" type="submit" />
<input id="quick" value="Just submit now with all the defaults!" type="button" />
</div>
Please can any one help me on this?
Thanks,
Harsha
Full source : https://gist.github.com/3227043
Convert the "next" button to normal button and add and if or switch selection into the jquery code. So both buttons were normal and Jquery will decide which ones takes to submit getting the name of the button who calls the click event. Or you can do it trough a javascript function, well, you can do it in any way as you want, but both buttons must be "button" type
I just found out that every time onclick event for my <button> placed inside <form> tag triggers, form submits it's data as if i clicked <input type='submit'>.
I don't want that. Buttons inside my form serve other task, form shouldn't submit data after i clicked one of them.
To be more clear, i want this code:
<form action="http://www.google.com" method="POST">
<button onclick="alert('hi!')">Button</button>
<br>
<input type="submit" value="submit"/>
</form>
to show alert "hi!" when i click on the Button and it shouldn't open Google after that. It should only show Google when i press "submit".
Specify type="button":
<button type="button" onclick="alert('hi!')">Button</button>
From the linked article:
This [submit] is the default if the attribute is not specified
Try this..
onclick="alert('hi!'); return false;"
With jQuery use a span rather than an input, put use the .button call and then set a click event.