Example: dev.alphenweer.nl
When someone clicks on a link, the form gets loaded, they fill out the form, and press a button to submit it. But when someone presses the button, nothing happends. Why is that? What is wrong with my code?
For example, click on "REQUEST API AGAIN", and then just fill SOMETHING in. Nothing happens. Why?
You need to use
live. Which will result in
$('#api_reg_submit').live('click', function(){...
This happens because the button, which you set click event on, is not in DOM at start aka when its ready, but its added later. If you had the button outside and loaded only inputs it would work like you have it now. Hope it makes sense :)
There's no <form> surrounding the input elements, so they're just a random textbox and button sitting on a webpage. There's no element with an id of api_req_submit on the page either, so the click function you're trying to add has nowhere to go.
Related
I've created a button in this context:
And I have a javascript function expecting the click to make a request to the server:
But something weird happens when I hit the button, the page reloads it all and don't take the action expected. Thank you all in advance, im gettin crazy with this.
When I put an alert to check if the button is triggered I get an error:
There is a chance that you get this behavior because of the form tag. Try to remove the form tag and try again.
Maybe this can also help you:
Stop form refreshing page on submit
Try insert: type="button" inside the button tag. Otherwise it will be a submit button (when inside a form tag).
I am facing an issue in my Struts2 application. Basically, on textfields, I have validations such as missing value, wrong value etc. There is then a button below these fields which submits the form when all validations are successful.
Suppose, I blur out of a textfield with a wrong value, the validation fires an error below this textfield. Now, when I supply a correct value and directly click on the upper half of the button, the validation clears and the page also submits along with it simultaneously. However, when I click on the lower half of the button, the validation just clears but the page does not submit at all. This behaviour is consistent across the application.
Now, the QA team has raised a defect for this as it could hamper user experience.
Could anyone suggest a possible fix for this other than calling the submit button click event on the mousedown event? We tried that but its causing side effects.
I cannot show the exact code as there are many collaborating CSS classes for this scenario which could cause confusion. If anyone could try to give a brief solution, it would be extremely helpful!
You need to perform the same function regardless of what part of the composite is invoked. If you click a submit button it should submit, if you click reset button it should reset. If you click cancel it should return to the previous page. Different functions of the same control mislead the user experience because it doesn't perform expected behavior of the button.
I have a form to let people submit news articles to my site (a company intranet). Sometimes the form submission takes a few seconds to resolve due to some actions I have in place on the relevant model save method. I wanted to replace the text on the form page with a message saying "Sending your article. This may take a few seconds, please do not refresh the page." as soon as someone hits submit. I've seen these on a number of websites when buying things online.
My first attempt at doing this was to add an onClick event to the form button. Submitting then successfully replaced the text but did not submit the form. I had a look at this answer on binding two events to one submit button but it doesn't seem to address my need as it looks PHP-specific. I'm certain javascript is the right tool for the job but I can't think of how to do this other that binding to clicking the submit button. Does anyone know the correct way to do this?
JavaScript is indeed the right way to do so. If you are using jQuery you can go ahead and use something like:
$('form#your-form-id').submit(function(){
$(this).hide().after('Loading, please wait...');
});
Where #your-form-id would be the id of the form. This function is hiding the form content and showing that text, you could do anything instead actually.
I'm working on this page:
How it works: the "Consultar" button searches for the code in the "Código" textbox and reloads the page. The "Salvar" button calls a routine to save what you have changed in that item.
Here's what I gotta do: if the "Código" textbox is focused and the user press Enter, the event of the "Consultar" button must be raised. If the "Código" textbox is not focused and the user press Enter, the event of the "Salvar" button must be raised.
I don't know how to do this, I tried to do this using SetDefault button but it won't work cause I need a different button to be default depending if the textbox is focused or not.
I wonder I that I'll probably have to use some javascript, but I have no clue about how to do it.
Can anyone help me?
Thank you.
Bind an event handler to the keypress event on your document and then check if the input field is focused. If so, you can submit your search form, otherwise you continue with your saving logic.
See this fiddle to see it in action: http://jsfiddle.net/KkJ2t/
I tried to hide elements in my html form by defining a javascript function at the beginning of my page and calling it through a button's onclick attribute. It seems like the browser (firefox 4.x) tries initially to hide the given element when I click the button, but then quickly reloads it. Without the script, obviously, no attempt is made by the browser to hide the element. Here is the pertinent code:
function showHide() {
document.getElementById('search').style.display = 'none';
}
<button onclick="showHide()">Advanced</button>
Does firefox default to what it finds in the css file instead of using the javascript modifications?
Edit #1:
First off, I am trying to get an text edit field to disappear. When I click on the "Advanced" button, it does disappear for a fraction of a second and then reappears. I tried returning false at the end of showHide(), but that did nothing, and I tried onclick="return showHide();" but that didn't work as well. I checked the css file, and there are no display: settings that could conflict with this. I'll see if I can't get this up on my server in a few minutes and post the link.
Edit #2: Thanks for the help. Changing the type attribute of the button fixed the issue by preventing the button from defaulting to "submit," as suggested below. This kept the form from being reloaded, which was causing the element to reappear every time it tried to go away. Not something a beginner like me would have known.
The html <button> element supports a type attribute. If omitted, it defaults to type="submit". This causes the button to work exactly like an <input type="submit" />.
So... if your button is located inside a form, then clicking the button causes the click handler to run (calling showHide()), but then it submits the form. It is the form submission that is causing the page reload.
To fix this, simply add the proper type to your button:
<button type="button" onclick="showHide()">Advanced</button>
There has to be something else going on in your page because the basic code works fine in Firefox and other browsers. You can try the demo for yourself here: http://jsfiddle.net/jfriend00/LpC36/.
I'd suggest you describe what else might be going on the page? Other code? CSS? Other objects and interactions? Form submission? Try showing us the HTML.
For example, if the button is a submit button, it could be submitting a form and reloading the page.
I suspect it has to do with scope. Try this out:
<button onclick="document.getElementById('search').style.display = 'none';">Advanced</button>
if it works you didn't declare your showHide() function in the right place. For example i can break #jfriend00 's example like this:
http://jsfiddle.net/NYZrX/1/
this is one of this reasons it is bad practice to mix javascript in html code, it all needs to be in the global scope...