There is a rather simple html application.
Changing text field will cause a submit, follow by a redraw.
Pressing button will cause a submit, too.
When changing a field and leave it by pressing a button, the browser run into a conflict.
The browser starts one submit, aborts it and do the next submit.
The result is unreliable.
Is there a simple solution to get one submit with button and field without switching to some AJAX approach (say GWT)?
You could cancel any other event handler when starting to submit the form. This is similar to disabling a submit after clicking it, to prevent the form being submitted twice by impatient users.
You can send a flag that will tell if submit function has called once, if submit already called then don't call submit for this user.
OR you can disable the submit button as soon as call the function from text field change, in this way user will not be able to click on the submit button.
Might help you
Related
I've never done this double input thing and I'm scratching my head trying to disable the submit button on the "main form" until the preliminary form's calculation is done.
This must be done to pass along the values I need for the next page:
<input type="button" value="Calculate" onClick="calcRoute();">
And at the bottom of the page I have a submit button that goes to the next page, in a seperate form like this:
<form method="post" name="sendvalues" action="confirm_p2p.php" onsubmit="$.post('confirm_p2p.php';">
....
<input type="submit" name="submit" onclick="setValue();"/>
The problem is that the first calculate button is two input fields so the user ALWAYS presses enter after the second field is filled out. I've tried putting a line that says "click this button before submitting" but even in my small user testing thing everyone pressed enter after the calculation form was complete.
Is it possible to disable the enter submission until the first calculate button has been pressed? I've tried other disable things I found on here but it messes with the ability of the calc form to get the number I need to pass.
To disable a form from submitting, you need to call event.preventDefault when its onsubmit event occurs. You want it initially disabled, then enabled after the first button is clicked.
On the form sendvalues, set
onsubmit="event.preventDefault(); return false;"`
to disable it.
On the Calculate button, set
onclick="calcRoute(); document.getElementsByName('sendvalues')[0].onsubmit='$.post(\'confirm_p2p.php\');';"
Which will enable your other form and also do your POST request (make sure it's synchronous, otherwise the browser will have navigated to the action page before it completes).
You should note that the AJAX request will not send the form data. I don't know what you're trying to do, but your current setup won't work as expected.
Sure, you could do as you are requesting by doing the form submit through JavaScript and writing validation code; however, a better solution might be to use your input's onblur event to do the calculation without pressing a button.
It is difficult to tell without your full code but if you can show more I can probably explain better.
I have a html form. After hitting the submit button, I want some kind of popup to appear where the user can enter what he has changed. And only after that has been done, ther form should be submitted to the web server.
It's for internal usage only, so design doesn't matter.
in spite of using submit button you just use <type="button" onclick="function1()">
in javascript section code:
function1(){
// here you can use a textbox or a prompt box to enter some value after which
// redirect to desired page using document.getElementById("myForm").submit();
}
I think this will solve your problem..
#user3077238, I can't comment yet, but Rupesh's answer will work.
You will want to call the original function that was in place when the user clicked submit within function1(){} after they provide input.
Now that function1(){} will be running before whatever code you had originally when the user clicked submit, you would just pass the input from the prompt to the original submit function.
I have a form whose submit "button" is actually a link. Is there a way to submit this form automatically on enter, other than attaching an event handler to check for Enter keypresses? It just seems a little wasteful to me.
I have tested in Chrome and Firefox, it appears that pressing enter in a form field will submit it, whether or not a submit button is present.
If you've found a browser where that isn't the case, you may want to try a submit button in a hidden div, or CSS positioned off-screen.
Or stick to conventions and use a submit button :P
Throw some jquery on there and submit the form with it:
$("form#formID").submit();
I have a couple fields in a form.
On the iphone, when people are filling out their stuff, there is a "GO" button on the keyboard. Accidentally click this will submit the form
How can I use JQuery to return false whenever the "GO" button is pushed, but instead only submit the form when the "submit" button is clicked?
You can remove the action tag from your <form> and then submit your form in your tap action.
Something like:
$('#submit').tap(function() {
$.post('formsubmit_url.html', $("#formID").serialize());
});
I'm not sure this is something you should try to do - it'll just be an arbitrary difference between your form and other web forms, and will frustrate some users. I couldn't find anything in the Apple documentation, so I suspect there's no way to do what you want.
Instead of changing the behaviour that your users expect to be there, how about you just add some validation to the form so it can't be submitted unless the proper fields have been filled out?
I have a form with an input field where a user enters a unique identifier. I then have some jQuery code that upon the user moving away from the input field (blur) goes out and fetches details about the part and populates some fields on the page. The problem is if the user clicks the submit button before moving out of the input field the jQuery code never has a chance to load in the data and populate the necessary fields. Whats the best way to go about doing this? I thought about maybe setting the focus to body and then having an infinite loop that keeps checking the page until all fields that should be filled in have been filled in but I feel like some sort of event based solution would be better than unpredictable infinite loops. Any ideas?
Give the form an onsubmit event.
Have that event return false unless all the form fields are populated correctly.
In jQuery:
$("#formname").submit(function()
{ if (condition_not_met) return false; });
This will block the form from submitting until everything is in place.
The blocking will not work with JavaScript disabled, but seeing as you're using Ajax to fetch the correct fields, that probably won't matter.
I'm guessing you are making an ajax call in the blur function?
Could you disable the submit button (either on page load or on blur), and then enable it in the ajax callback?