When the below content is loaded via Ajax its not working:
<form action="...." onsubmit="return confirm('Do you really want to cancel this plan?');">
The confirm dialog box does not appear. There are multiple form with same action. The binding using Jquery wouldn't work as there isn't a single id. Shall I bind using jquery on event using a class name?
You better use the onclick event of your submit button(s).
For example:
<form method='post'>
<input type='submit' name='undo' value='Undo' onclick="return confirm('Do you really want to cancel this plan?');"/>
</form>
Related
I am confused about some behaviour on my webpage where I use both submit action and onclick event on the Save-button in a form. It works fine for me, but it seems that some users have trouble to save the information in the form.
I have simplified the form here:
<div class="container">
<form id="myform" action="action.php">
<input "nameinput" type="text" name="name">
<button id="savebutton" type="submit" >Save</button>
</form>
</div>
Now... I have also added an jQuery section that shall hide the form when the save button is pressed:
$(".container").on("click", "#savebutton", function(){
$("#myform").slideUp("slow", function() {
$(this).remove();
});
});
So: When the user presses the Save-button it shall both send the name to action.php and trigger the click-event to close the form.
This works perfectly fine for me, but I wonder if this design can cause troubles on some browsers, especially older ones? I have got bug reports from users where the form is closed, but no data is saved (i.e. action.php isn't called). Is it possible that the form "dissapears" before the form can submit the data?
Here the default behavior of the submit button is to send the data to action.php. Definitely, it is going to load the page again when users click the submit button in that case your javascript code will not run.
I will recommend you to use JQUERY AJAX Documentation
I am new to javascript so it might be a simple question for many.
I have used form sumbit in thymeleaf and am trying to add a JS validation before the form is submitted to the spring mvc controller. I can perform these two actions separately (individual tasks). However I could not really make them work one after the other (js function and form submit). Submit action is triggered by a button inside the form.
<form th:action="#{/user/trigger}" th:object="${triggers}" method="post">
<input type="hidden" name="tradeDate" th:value="${trigger.id.tradeDate}">
<button type="submit" id="ignore" name="action" value="ignoreOrder" class="btn btn-primary btn-sm">Ignore</button>
</form>
The js function is like below:
$(".ignore").click(function() {
//do some processing;
return false;
});
So can someone can help me to rewrite this code which will first call the JS function and submit the form to the java spring mvc controller? Thanks in advance.
The issue with your approach is that after your java-script is validating the code, your html 'submit' button is submitting the form as they're executing one after another. You haven't done anything to prevent the form submission after the validation is getting failed.
To overcome this issue, what you can do is to submit the form through your JavaScript code manually only when your validation is successful.
So your code will look something like this -
1.) Changes in Html code, instead of creating the button type as 'submit', make it as a normal button and run your javascript validation function on its click -
<form th:action="#{/user/trigger}" th:object="${triggers}" id="myForm" method="post">
<input type="hidden" name="tradeDate" th:value="${trigger.id.tradeDate}">
<button type="button" id="ignore" name="action" onclick="myValidationFunction()" value="ignoreOrder" class="btn btn-primary btn-sm">Ignore</button>
</form>
2.) Changes in Javascript code, now after clicking on the above button your javascript validation function will execute and after the validation is successful submit the form manually using the form id, something like this -
function myValidationFunction(){
if( some_condition ){
//validation failed
return;
}
//validation success , when above mentioned if condition is false.
$("#myForm").submit(); // Submit the form
}
For more information about using submit in jquery, refer the official documentation -
https://api.jquery.com/submit/
for jquery, it return a list, so:
$('#search_form')[0].submit();
I have been building a chrome extension and I have been using content scripts to listen for the form submit event. I was testing my extension and it works pretty well, until I tested on a site that didn't work. The reason it didn't work is because the form button isn't really a form button with the submit action. It's actually an <a> tag with an href tag that links to "javascript:;", so the submit event doesn't trigger. The link is inside a form, it's just not a button tag with the submit action. How can I make sure that my content script triggers whenever a user tries to submit a form?
It seems simple at a glance, but there's no surefire way to achieve what you're asking.
Consider this:
document.getElementById('myform').addEventListener('submit', function(e) {
e.preventDefault();
console.log(document.getElementById('sometext').value);
console.log('form submitted');
});
document.getElementById('notasubmitbutton').addEventListener('click', function(e) {
console.log(document.getElementById('sometext').value);
});
<form id="myform">
<input type="text" id="sometext">
<input type="submit">
<button id="notasubmitbutton" type="button">Submit 2</button>
</form>
There's the regular submit button that will trigger the submit event. Then there's another button, that will just collect all the data from the form, but will not submit it in the traditional sense.
There's absolutely no way you could foresee all the possible ways someone could build their form, so what you're asking for can't be done.
I have two forms. I want to submit both forms with 1 button. Is there any method that can help me do it?
Example:
<form method="post" action="">
<input type="text" name="something">
</form>
<form method="post" action="">
<input type="text" name="something">
<input type="submit" value="submit" name="submit">
</form>
I want both forms to be submitted with 1 submit button. Any help would be appreciated.
The problem here is that when you submit a form, the current page is stopped. Any activity on the page is stopped. So, as soon as you click "submit" for a form or use JavaScript to submit the form, the page is history. You cannot continue to submit another page.
A simplistic solution is to keep the current page active by having the form's submission load in a new window or tab. When that happens, the current page remains active. So, you can easily have two forms, each opening in a window. This is done with the target attribute. Use something unique for each one:
<form action='' method='post' target='_blank1'>
The target is the window or tab to use. There shouldn't be one named "_blank1", so it will open in a new window. Now, you can use JavaScript to submit both forms. To do so, you need to give each a unique ID:
<form id='myform1' action='' method='post' target='_blank1'>
That is one form. The other needs another ID. You can make a submit button of type button (not submit) that fires off JavaScript on click:
<submit type='button' onclick="document.getElementById('myform1').submit();document.getElementById('myform2').submit();" value='Click to Submit Both Forms'>
When you click the button, JavaScript submits both forms. The results open in new windows. A bit annoying, but it does what you specifically asked for. I wouldn't do that at all. There are two better solutions.
The easiest is to make one form, not two:
<form action='' method='post'>
<input type='text' name='text1'>
<input type='text' name='text2'>
<input type='submit' value='Submit'>
</form>
You can place a lot of HTML between the form tags, so the input boxes don't need to be close together on the page.
The second, harder, solution is to use Ajax. The example is certainly more complicated than you are prepared to handle. So, I suggest simply using one form instead of two.
Note: After I submitted this, Nicholas D submitted an Ajax solution. If you simply cannot use one form, use his Ajax solution.
You have to do something like that :
button :
<div id="button1">
<button>My click text</button>
</div>
js
<script>
$('#button1').click(function(){
form1 = $('#idIFirstForm');
form2 = $('#idISecondForm');
$.ajax({
type: "POST",
url: form1.attr('action'),
data: form1.serialize(),
success: function( response ) {
console.log( response );
}
});
$.ajax({
type: "POST",
url: form2.attr('action'),
data: form2.serialize(),
success: function( response2 ) {
console.log( response2 );
}
});
});
</script>
You could create a pseudo form in the background. No time to write the code, jsut the theory. After clicking submit just stop propagation of all other events and gather all the informations you need into one other form you append to document (newly created via jquery) then you can submit the third form where all the necesary infos are.
Without getting into why you want to use only 1 button for 2 forms being submitted at the same time, these tools that will get the input data available for use elsewhere:
Option 1...
Instead of using <form> - collect the data with the usual Input syntax.
ex: <input type="text" name="dcity" placeholder="City" />
Instead of using the form as in this example:
<form class="contact" method="post" action="cheque.php" name="pp" id="pp">
<label for="invoice">Your Name</label>
<input type="text" id="invoice" name="invoice" />
<button class="button" type="submit" id="submit">Do It Now</button>
</form>
use:
<label for="invoice">Your Name</label>
<input type="text" id="invoice" name="invoice" />
<button type="button" onclick="CmpProc();" style="border:none;"><img src="yourimage.png"/> Do It Now</button>
Then code the function CmpProc() to handle the processing/submittion.
Inside that function use the Javascript form object with the submit() method as in...
<script type="text/javascript">
function submitform() {
document.xxxyourformname.submit();
}
</script>
Somehow I suspect making the two forms into one for the POST / GET is worth reconsidering.
Option 2...
Instead of POST to use the data to the next page consider using PHP's $_SESSION to store each of your entries for use across your multiple pages. (Remember to use the session_start(); at the start of each page you are storing or retrieving the variables from so the Global aspect is available on the page) Also less work.
Look man. This is not possible with only HTML. weither you gether the inputs in one form or else you use jquery to handle this for you.
I have the following piece of code:
<form name="ProjectButtonBar_deleteProject_LF_3" action="" method="post">
<a class="buttontext" href="javascript:document.ProjectButtonBar_deleteProject_LF_3.submit()">...</a>
As you can see, clicking the link causes "hard" submit of the form. Instead of this, I would like to trigger submit event. It is so, because in another file there is a code executed in reaction to submit event. With the code shown in this example, this code is being ignored. I can't change the href attribute by hand, beause whole "a" tag is generated by framework.
How should I do this using jQuery? I suppose I have to modify href somehow, but how? Or maybe there is another solution?
Instead of triggering the click event on the submit button, use jQuery to trigger the submit action on the form.
$('form').trigger('submit');
This will trigger any event that's been attached to the form via .on('submit')
Using jquery you can do it easily:
<form name="ProjectButtonBar_deleteProject_LF_3" id="form1" action="" method="post">
<input type="submit" id="btnSubmit"/>
</form>
<a class="buttontext">...</a>
$('.buttontext').on('click',function(e){
e.preventDefault();
$('input#btnSubmit').click();
});
or submit form programmatically:
$('.buttontext').on('click',function(e){
e.preventDefault();
$('form#form1').submit();
});