I have been doing some searching and most of what I find relates to the html <input type="submit"> buttons or connecting to a button by the ID tag. What I am trying to do is attach to every html5 <button> based off the NAME tag.
I have tried the following but when the button is clicked it submits and I don't get any alerts before it does.
$("button[name=Submit]").click(function ()
{
var error;
alert("test1");
if ($("#SelectedProjectCodes").val() == "") { alert("test"); }
return false;
});
Also tried
$("input[name=Submit]").click(function ()
{
var error;
alert("test1");
if ($("#SelectedProjectCodes").val() == "") { alert("test"); }
return false;
});
Here is the HTML for one of the submit buttons:
<button formnovalidate="formnovalidate" type="submit" name="Submit" value="Add Time">Add Time</button>
So how am I supposed to attach to all my html5 buttons?
Note: The JS in in an external file with about a dozen other functions which all work so I do know the JS file is being loaded properly and working. And all the code is in a $(document).ready(function ()
You need to prevent the default behaviour:
$("button[name=Submit]").click(function(event) {
event.preventDefault();
// other code
});
You must put the id in the button like below
<button formnovalidate="formnovalidate" id="id1" type="submit" name="Submit" value="Add Time">Add Time</button>
And also you jquery code sometime like this (call via button id)
$( "#id1" ).click(function() {
var error;
alert("test1");
if ($("#SelectedProjectCodes").val() == "") { alert("test"); }
return false;});
Hope it helps you...
Related
I like to have this button.
When you click on it the button text should change to "Updating...".
Then two seconds later it should change to "Updated!" and the button shouldn't be clickable after that.
Current Html Button script:
<a class="btn-primary-md" id="buyButton" onclick="text = 'Updated!'">Update</a>
So to sum up, you have a button/link and onclick you'll want:
The text of that element to change.
The element to be disabled.
After two seconds the value to change again to another
value.
You can do this by extracting the JavaScript from the HTML for readability and maintainability like this:
var button = document.getElementById("btn");
button.addEventListener("click", function () {
button.disabled = true;
button.innerHTML = "Waiting...";
setTimeout(function () {
button.innerHTML = "Thank you!";
button.disabled = false;
}, 2000);
});
<button id="btn" type="button">
Click me
</button>
<input onclick="change()" type="button" value="Updated" id="buyButton" />
Javascript:
function changeBtnTxt()
{
document.getElementById("buyButton").value="Update";
}
Maybe...
<input onclick="changeBtnTxt()" type="button" value="Update" id="buyButton" />
function changeBtnTxt()
{
document.getElementById("buyButton").value="Updated";
}
This is the correct one! Sorry!
I have a multi-step form, each step having a btn-link to move to the next step. I achieve this with angular routes in this way:
<button ui-sref="next.step" class="btn btn-link"></button>
In one of the steps in the middle of the whole form I need to submit the data, so I need the already described button to submit the form as well and only if the form could be submitted then move to the next step.
I tried doing this but it is not working because it redirects to the next step without taking care about the form
<button ui-sref="next.step2" type="submit" class="btn btn-link"></button>
How can I achieve this using angular?
you don't need to use ui-sref for your next button instead use $state service from your controller as shown below
HTML Code
<form ng-submit="onFormSubmission($event)">
<button type="submit" class="btn btn-link"></button>
</form>
Controller
var successCallback = function(response) {
//process response
$state.go("next.step2");
}
$scope.onFormSubmission = function($event) {
var data = getFormData();
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
}
Use ng-submit to submit the form and show some loading message as form is getting saved, use $http to post the data and on-success take user to next route using $state.go.
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', '$state', function($scope, $state) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function() {
$http.get('/aveData', config).then(function(response){
$state.go('next.step2')
}, function(){
alert('error saving data');
});
};
}]);
</script>
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
</form>
I have created a form with a submit button, the submit button is outside the actual form but its targeting the form using the form attribute for example.
<form id="myform">
</form>
<button form="myform"></button>
I apologize for the week example. This is working accross all browsers except IE 11. IE 8-10 is working 100%. Any ideas on how I can fix this. I prefer not writing scripts. I can do this with jQuery but I prefer to just keep it clean if possible
This is a solution with just a click event and a line of css. ( Minimal )
If your button has to be outside the form due to User Interface design.
I would suggest you add an input submit/button inside the form:
<form id="myform">
<input type="button" value="Submit" class="myButton" />
</form>
<button id="outerBtn">Submit</button>
Hide the input:
.myButton {display:none;} OR {visibility:none;}
Use jQuery to trigger click the input button inside the form:
$('#outerBtn').on('click', function(e){
e.preventDefault();
$('.myButton').trigger('click');
});
Just some quick answer. Should be alright.
If you do not want to write script, I would suggest you just keep your input button/submit inside the form.
<form id="form-any-name">
<input type="button" value="Submit" class="myButton" />
</form>
<button type="submit">Submit</button>
<script type="text/javascript">
$(document).ready(function() {
$('button[type=\'submit\']').on('click', function() {
$("form[id*='form-']").submit();
});
});
</script>
Simply include document on ready submit catcher you can place that code in main js file since we catching dinamicaly form id starting with form- so in other pages you can have the different foms:)
I would like to post my answer as this post helped me a lot and I came with an idea that works if you want to add the "button outside the form" functionality on older browsers.
I use JQuery but I dont think I would be a major problem to use pure JS as it's not complicated code.
Just create a class just as some of the answers suggested here
.hiddenSubmitButton {
display: none;
}
$("body").on("click", "button[form]", function () {
/*This will get the clicks when make on buttons with form attribute
* it's useful as we commonly use this property when we place buttons that submit forms outside the form itself
*/
let form, formProperty, formAttribute, code, newButtonID;
formProperty = $(this).prop("form");
if (!(formProperty === null || formProperty === "")) {//Most browsers that don't wsupport form property will return null others ""
return; //Browsers that support the form property won't continue
}
formAttribute = $(this).attr("form");
form = $("#" + formAttribute);
newButtonID = formAttribute + "_hiddenButton";
if (document.getElementById(newButtonID) !== null) {
$("#" + newButtonID).click();
return;
}
code = '<input id="' + newButtonID + '" class="hiddenSubmitButton" type="submit" value="Submit" />';
$(form).append(code);
setTimeout(function () {
$("#" + newButtonID).click();
}, 50);
});
One thing I like about creating buttons outside the form is that they allow us to custom the design more easily and we can use this code and it will work on old browsers and also, the browser will use its HTML form validator.
IE understands 'for', you can use "label for=''".
<label for="form_one_submit">Button one</label>
<form action="" id="form_one">
<span></span>
<input type="submit" id="form_one_submit" style="visibility:hidden;">
</form>
I'm trying to use HTML form validation when using Google Apps Script's HTML Service. As another user asked, according to the documentation example, you must use a button input instead of a submit input. Using a submit button seems to do the validation, but the server function is called anyway. The answer given to that user didn't work for me. Also, I want to call two functions when submitting the form and this can make it more complex.
This is what I'm trying to do: The user fills a form and I generate a Google Doc and give him the URL. When he clicks the submit button, I show him a jQuery UI dialog saying "Your document is being created" with a nice spinner. Then, when the document is generated, I give him the link. I use the success handler to show the result when the Google Doc stuff is finished, but meanwhile I need a function to show the spinner. I don't know if there is a better way to do that than adding another function to the onclick event and maybe it can be damaging the process in some way. Is there a way not to call any of these functions if the form is not valid (using HTML validation)?
This is a simplified version of my code:
Code.gs
function generateDocument(formObject) {
var doc = DocumentApp.create("Document name");
...
return doc.getUrl();
}
Page.html
<main>
<form id="myForm">
...
<input type="button" value="Generate document"
onclick="showProgress();
google.script.run
.withSuccessHandler(openDocument)
.generateDocument(this.parentNode);"/>
</form>
<div id="dialog-confirm" title="Your document">
<div id="dialog-confirm-text"></div>
</div>
Javascript.html
$( "#dialog-confirm" ).dialog({ autoOpen: false, resizable: false, modal: true });
function showProgress() {
$( "#dialog-confirm" ).dialog({ buttons: [ { text: "Cancel", click: function() { $( this ).dialog( "close" ); } } ] });
$( "#dialog-confirm" ).dialog( "open" );
$( "#dialog-confirm-text" ).html( "<br />Wait a second, your document is being generated...<br /><br /><img src='http://i.stack.imgur.com/FhHRx.gif' alt='Spinner'></img>" );
return false;
}
function openDocument(url) {
$( "#dialog-confirm" ).dialog({ autoOpen: false, resizable: false, width: 400, buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] });
$( "#dialog-confirm-text" ).html( '<br />Click here to open and print your document!' );
return false;
}
All three HTML docs are joined together (and working with its respective tags) with the include function as recommended in the documentation.
The Cancel button in the dialog will close it but won't stop the doc being created. Is it possible to stop this process?
Here's a solution that I found:
"<input type='submit' onclick='if(verifyForm(this.parentNode)===true){google.script.run.withSuccessHandler(YOUROUTPUT).YOURFUNCTION(this.parentNode); return false;}' value='Submit'></form>";
JavaScript side
function verifyForm(){
var elements = document.getElementById("myForm").elements;
for (var i = 0, element; element = elements[i++];) {
if (element.hasAttribute("required") && element.value === ""){
resetInputs();
return false;
}
if (element.hasAttribute("pattern")){
var value = element.value;
if(value.match(element.pattern)){
}else{
resetInputs();
return false;
}
}
}
return true;
}
Calling the window has issues in iOS sometimes, which is why I investigated this further.
Move the function call to the <form> element; remove any function call from the submit input element; and put intermediary JavaScript code into a <script> tag:
<input tabindex="9" type="submit" value="Save Input" id='idInputBtn'>
<form id="myInputForm" name="input" onsubmit="fncWriteInput(this)">
<script>
window.fncWriteInput= function(argTheInfo) {
// Do additional checks here if you want
var everythingIsOk = . . . . . . . ;
if (everythingIsOk) {
google.script.run
.withSuccessHandler(openDocument)
.generateDocument(argTheInfo);
};
};
Notice that this.parentNode gets removed to the arg of the function call, and just use this in the function argument because the function is getting called from the <form> element, which is the parent.
If there are any errors, the form will not be submitted, and the user will get a msg that something was wrong. No code will run.
This is pseudo code, but I do use a set up like this in my application. But use developer tools and you can put a break point right in your browser and step through every line to test it without needing to put in console.log statements.
I am learning web development using Django and have some problems in where to put the code taking chage of whether to submit the request in the HTML code.
Eg. There is webpage containing a form(a blog) to be filled by the user, and upon click on the Save button,there is a pop up asking whether you want to confirm or not. If click on confirm, then the request is sent.
I searched and find this javascript code.
<script type="text/javascript">
function clicked() {
alert('clicked');
}
<input type="submit" onclick="clicked();" value="Button" />
But I guess this is not the correct function as it seems to me that whenever you click on the Button, the request will be submitted. So How can I delay the submit request until user has confirm the submit?
The most compact version:
<input type="submit" onclick="return confirm('Are you sure?')" />
The key thing to note is the return
-
Because there are many ways to skin a cat, here is another alternate method:
HTML:
<input type="submit" onclick="clicked(event)" />
Javascript:
<script>
function clicked(e)
{
if(!confirm('Are you sure?')) {
e.preventDefault();
}
}
</script>
I believe you want to use confirm()
<script type="text/javascript">
function clicked() {
if (confirm('Do you want to submit?')) {
yourformelement.submit();
} else {
return false;
}
}
</script>
Use window.confirm() instead of window.alert().
HTML:
<input type="submit" onclick="return clicked();" value="Button" />
JavaScript:
function clicked() {
return confirm('clicked');
}
<script type='text/javascript'>
function foo() {
var user_choice = window.confirm('Would you like to continue?');
if(user_choice==true) {
window.location='your url'; // you can also use element.submit() if your input type='submit'
} else {
return false;
}
}
</script>
<input type="button" onClick="foo()" value="save">
For a Django form, you can add the confirmation dialog inside the form tag:
<form action="{% url 'delete' %}" method="POST" onsubmit="return confirm ('Are you sure?')">
Another option that you can use is:
onclick="if(confirm('Do you have sure ?')){}else{return false;};"
using this function on submit button you will get what you expect.