I have a form which basically looks like this:
<form #submit.prevent="onSubmitted">
Email<input type="email" /> <br />Content<input type="text" />
<CancelSave #cancel="onCanceled" />
</form>
There are input fields for an email and content and there is a custom component which emits submit and cancel events. I want the submit event to be automatically caught by the form and not by the button group.
Note that I explicitly want to use the html <form> element to get the features of html validation which I can't have (without any validation libraries at least) if i just wrap all the inputs in a div and listen to the submit or cancel events.
All works fine except that when I press cancel it is also caught as a submit and the form gets submitted.
Here's a sample of my code:
https://codesandbox.io/embed/62lo86rprr
EDIT: FYI Apparently when pressing the cancel button, cancel AND submit are caught
The cancel button in your form does not have a type attribute. By default, buttons within forms are assumed to be of type submit. Add a type="reset" to the cancel button to avoid the submission.
See MDN docs
Related
I have to execute a div like this. When the user clicks on the card, it will be redirected to a different page, but when the user clicks on the button inside the card, it will be redirected to another page.
<v-ons-card
#click="goToPage1()"
>
<div>
// content
</div>
<div class="card-btn">
<v-ons-button
#click="gotopage2()"
>
View
</v-ons-button>
</div>
</v-ons-card>
In this implementation, when I click the button, it also triggers the card click event and then triggers the button click event. Is there any way I can prevent this?
Yes you can use Event Modifier for that. In your case you are searching for #click.stop.
So you can do as follow:
<v-ons-button #click.stop="gotopage2()">
How do I make an AJAX call or submit form in ATG. Here's the code I'm using:
document.getElementById("myP").style.visibility = "hidden";
Will this work in the sense of ATG?
For ajax calls, in applications like spring and standard J2EE, you do a GET or POST call using AJAX for the form's action URL.
In ATG, you dont have action URLs. Rather, you have bean references, somewhat like
<dsp:form id="myForm">
<dsp:input type="myField1" bean="ABCFormHandler.myField1" />
<dsp:input type="myField2" bean="ABCFormHandler.myField2" />
<dsp:input type="submit" bean="ABCFormHandler.myProcess" style="display:none"/>
<dsp:input type="button" id="formSubmitter" value="Submit"/>
</dsp:form>
Here, we have defined a method called handleMyProcess in the ABCFormHandler, which also contains the properties myField1 and myField2.
Notice that the form tag has the id "myForm".
Next, there are two fields viz. "myField1" and "myField2".
There is a submit button which is hidden, by setting the style to "display:none"
Lastly, we have a normal button, for which we have simply set an id called "formSubmitter".
Now, we will use this normal button to submit the form with id "myForm".
We just need to call the form's submit() method using jQuery, which can be done simply as:
$('#formSubmitter').on('click', function(){
$form = $('#myForm');
$form.submit();
});
Hope this helps!
What happened: I have a page where user has to click on a button and selection is displayed in modal. When they clicked on what ever they wanted div element on the page is updated, via AJAX, which shows what they have selected and has an option "view item".
I have defined that "view item" should open up another modal view which will have all the information on the item, and now, referring to the above paragraph, rather then opening modal view user is being transferred to that page?
Question:
Is their a walk around for modal to be activated on the elements that were loaded after document load stage?
Example code: On initial load user is presented with following code, at this example item was set prior to load:
<div id="dynamic-area">
Item 1
view selection
</div>
<input type="radio" name="selection" id="selection" value="" data-toggle="modal" data-remote="/selection/search/1" />Change selection
When user have picked a different item after clicking on "change selection" #dynamic-area was fully updated with a data that was fetched via AJAX on the selected item.
So lets say, if user have picked item 3, we would have code below:
<div id="dynamic-area">
Item 3
view selection
</div>
<input type="radio" name="selection" id="selection" value="" data-toggle="modal" data-remote="/selection/search/1" />Change selection
Now if user to click on the "view selection", user is being to the page 'selection/view/3' when user should see modal.
After extending this function action worked as it should
MS Visual Web Developer 2010-VB.Net
When button is double clicked ,i want to show some controls.How to add codes in double click event.
Thanks
Based on the fact that you're using Visual Studio Web Developer, I'll assume you're doing something with a browser. If you're not, comment on the answer and I'll delete it.
ASP.Net doesn't distinguish between single and double clicks. You'll have to use Javascript for this. To do what you're trying to accomplish, you'll have to make a client-side button whose ondblclick event calls the .click() function of the server-side button's rendered <input> element. Here's what I mean:
<asp:Button Id="Button" OnClick="Some_Method()" />
<!-- This renders to something like this: -->
<input type="submit" onclick="..." name="Button" id="Button" />
Knowing this (you can check this in your rendered document), you can do this:
<input type="button" ondblclick="document.getElementById('Button').click()" ... />
Of course, you probably only want one button visible. To do this, simply set Visible to false in the ASP.Net server control.
Again, this question could be for non-ASP.Net stuff, in which case this answer is worthless. If so, comment telling me so, and I'll delete the answer.
You can do this purely in client side.
Add client-side button that has "ondblclick" event to your ASPX/HTML page:
<button ondblclick="showControls()">Show Controls</button>
Add a DIV with display style set to none. Place your controls inside of that DIV:
<div id="myControls" style="display:none">
My<br>
Control<br>
are<br>
placed<br>
here<br>
</div>
Add client-side code that unhides that DIV:
<script>
function showControls(){
document.getElementById("myControls").style.display=""
}
</script>
Live demo: http://jsfiddle.net/5haxS/
Presently because of "onchange" the editor contents are submitted only if the contents of editor change. How do I make sure that the dojo editor contents are submitted everytime a form a submitted irrespective of whether a change has occurred or not?
Code snippet:
<td>
<input type="hidden" name="editorContent" id='editorContent' value="replaced by dijit.Editor content onsubmit" />
<div dojoType="dijit.Editor" id="content" onChange="dojo.byId('editorContent').value = this.getValue();" plugins="['foreColor','|','bold','italic','underline','|','createLink', 'unlink']" extraPlugins="['dijit._editor.plugins.AlwaysShowToolbar']">
</div>
</td>
You could write a simple onSubmit handler to do this, though the way you have the code structured, initializing the hidden field to the loaded value should accomplish the same thing.