I have one search form with search button and some field, when I put value in form field and click on search button then come back on form by clicking on link(modify search form) then form value does not reset...Please check it here(http://dev.viawebgroup.com/search/)
Thanks
Try this:
<script>
function test(){
var input = document.getElementById('search');
input.value = '';
};
</script>
Add onload to the body:
<button onclick="test()">Clear</button>
Add id to input field:
<input type="text" id="search">
Fatal flaw rests form befor data is sent
The simplest way I found is
onsubmit="this.reset()"
Just put this in the form tag and all's well, simple yet efective.
I someone wanted a button excluesivly for form reset I would use onclick and write the reset in a function like this.
function clform()
{
documentgetElementById('myform').reset();
}
The first is tried and true, the second I just wrote but should work.
The function works well used in a onbeforeunload event in the body.
I have been working on this problem my self because the page I wrote is dynamically updated and was keeping form data when back button of browser was used. I also used PHP to reload the page after submission and onfocus to reload the page when form is selected so input is on a fresh page and not the dynamically updated page.
Related
In polymer I'm trying to manually submit a form. My form looks like this:
<form id="myForm" on-submit="{{ submitForm }}">
<input class="text" value="{{ someValue}}">
<button type="submit">Submit</button>
</form>
And in the polymer object I have:
submitForm: function(e) {
e.preventDefault();
}
Whenever I try to do the following:
document.getElementById('myForm').submit();
the form totally ignores the on-submit attribute and posts the form to a new page.
I'm building a on-screen keyboard for anyone wondering why I would want to do this. I need to submit the form whenever someone hits the enter key on the on-screen keyboard.
Does anyone know why this happens?
A JSBin example to show you the exact problem (see the alerts): http://jsbin.com/wadihija/2/
From the MDN page about submit:
The form's onsubmit event handler will not be triggered when invoking this
method ... it is not guaranteed to be invoked by HTML user agents.
However, calling click on a submit type button seems to work. See here:
http://jsbin.com/tuxac/2/edit
Here is a modification of your jsbin that I believe does what you want:
http://jsbin.com/wadihija/6/edit
Is this along the lines of what you're trying to do? This is a result of a key feature of Shadow DOM: Encapsulation. The elements in your polymer-element's template are not in the main document, and as such, are not available via document.getElementById() and the like.
You could instead call this.shadowRoot.getElementById() and it would work because this inside of your polymer-element's prototype is linked to the host element. Or even better, take advantage of the amazing features Polymer gives you for free. Polymer exposes this.$ to polymer-elements, which contains a key for every element in your template that has an ID! No method call needed, just use this.$.myForm.submit(). Here's the final jsbin.
I am trying to implement a payment module in ember. I have created a form and on the form action have assigned the server address to which form will be submitted.
<form action="https://api.mondido.com/en/v1/transactions" id="payment_form">
In simple jquery I am supposed to do something like this
var onSuccess = function(transaction){
alert(transaction.id);
};
var onError = function(error){
alert(error.description);
}
$('#my_form').mondido({type:"ajax", success:onSuccess, error:onError});
But I want to wrap it around in some action in the controller. The problem is when I do something like this
<form action="https://api.mondido.com/en/v1/transactions" id="payment_form" action{{someFunction on="submit"}}>
the action is being called twice. I have to click on the submit button twice to get it going in the first attempt and then it is being submitted twice.
Any thoughts how to go around with it?
Its probably because you have two actions defined in your form. Try to remove
action="https://api.mondido.com/en/v1/transactions"
from your form tag, and handle the form submission in your controller.
in my form I have my button like this
<button id="mybutton" type="submit"></button>
I am using query submit to submit the form
$('#mybutton').click(function()
{
$('form#myform').submit();
}
It works for most besides when I hit enter it still submits the form totally by passing the click catch.
I changed button type to button
<button id="mybutton" type="button"></button>
but then it doesn't do anything when I hit enter.
I heard I could use bind or on but not sure how would that help me in this case. Any help will be appreciated
EDIT
If I change the button type from submit TO button, then it does not do anything when I press enter. then I have to manually click the button. If I leave the type to submit it submits my forms on enter by passing jquery net.
It won't do anything because it's an button type.
But you can try this to "simulate" it and do submit when pressing enter.
$(document).keypress(function(e) {
if(e.which == 13) {
$('form#myform').submit();
}
});
Just to add something, some people claims that you will write 2 times the code like this:
$(document).ready(function(){
$(this).keypress(function(e) {
if(e.which == 13) {
$('form#myform').submit();
}
});
$('#mybutton').click(function() {
$('form#myform').submit();
});
});
Isn't much but I will try to do a short way :-)
You should bind to the submit event of the form if you want it to be triggered when the form submits by either submit button or pressing enter on the last input.
the form:
<form id="myform">
... input fields here ...
<button type="submit">Submit</button>
</form>
js:
$("#myform").submit(function(){
alert("the form submit event happened!");
// here you can either prevent the form
// from submitting and do an ajax request,
// or do nothing and let it submit naturally.
});
try it as an input tag rather than button? Worth a try
are you trying to make this so if they hit enter it doesn't do anything? only if they actually click it?
to stop a default click:
.click(function(e){
e.preventDefault();
});
To stop the form from submitting inside the click() event, use return false; at the end of the callback.
I don't think the issue is live vs bind. It probably has more to do with the fact that you are only creating a handler for the click event.
I'm a beginner when it comes to zend framework.
I created a form with a submit button, using zend_form, and zend_form_element_submit. Upon clicking submit, the code performs data manipulation based on the input. If no input is keyed in, nothing happens.
When I click the submit button, it reloads my web page even though there are no changes.
Any way I can prevent that page load? Could I use a zend_form_element_button that would trigger an event? how would I capture it?
Any help will be mostly appreciated!
Thank you.
A submit button will always cause the form to submit which generally results in a page being reloaded whether or not the data in any of the form elements are "correct" or not.
Using Zend Framework, you could add a JavaScript onsubmit event to your form that could inspect the form elements and decide if the form should be submitted or not. Or you could use Ajax to submit the form which wouldn't result in the page being reloaded.
Here is an example of using onsubmit. You would create your form on the controller, assign it to the view, and then in your view, add the onsubmit attribute and relevant code.
view.phtml
<?php
$this->form->setAttrib('onsubmit', 'return checkForm()');
echo $this->form;
?>
<script type="text/javascript">
function checkForm()
{
if (form_passes_validation) {
return true; // form will submit
} else {
return false; // form will NOT submit (if javascript is enabled)
}
}
</script>
You will have to come up with the logic for form_passes_validation, but if onsubmit returns false, then the form will not be sent.
Keep in mind, PHP is all server side. You can't do any PHP processing to determine if the form should send, this all has to be client side, or you will have to live with your form reloading the page even if no data is entered.
Hi i have a few form fields i want the on click of button a the control to be sent to action 1 but
on click of button 2 it has to be sent to action 2. Currently i am using js to change the form action dynamically on click. but is there any other solution. I cant do the checking after submit in a same method thet have to be two different methods.
The 2 buttons in this case are view(html data needs to be displayed) and download(same data as csv file). I am using cakephp 1.2 but i feel this is more of a generic problem
One form can only have one action. This is a limitation of HTML. To work around it on the client-side, you need Javascript.
It sounds like the better idea would be to give each submit button a distinctive name and value. This will be submitted like other form elements, so you can detect in the Controller which button was clicked. From there it should only be a matter of switching some View logic in the controller between normal output and download.
I found out there are few solutions
Regular JavaScript to change th form action on click of the buttons
AJAX to send the data to two separate actions on click of separate buttons
As suggested by deceze to do the processing on server side(which was not easily possible in my case)
HTML5 has a formaction attribute for this
<form action="/url" id="myForm">
<input type="submit" value="save1" formAction="/url1" />
<input type="submit" value="save2" formAction="/url2" />
</form>
Here is a fallback if you need it.
if (!('formAction' in document.createElement('input'))){
$('form').on('click', 'input[type=submit]', function (e) {
var attr = this.getAttribute('formAction');
if (attr) {
this.action = attr; //Set the form's action to formAction
}
});
}