about html input tag - javascript

I know almost nothing about html and javascript. So pardon me if this is a silly question.
For a html input tag like this:
<input name="search1$btnSearch" id="search1_btnSearch" style="background-color: white;" type="submit" value="search"/>
What's gonna happen when this button is clicked?
I looked in all the .js files that are referenced by the page that contains this input tag, but I did not find any code that responds to it.
So how can I locate the code that responds to this button's click event?
By the way, I think the web site that contains this input tag is built with asp.net, because the pages have a .asxp extension.
Thanks.

This will likely submit a form to search something on the site.
Check the form tag in the html to see what file is referenced.
<form action="form_action.asp">
The action references the file.

It is used to submit a form created with the help of form tags and input elements.

What's gonna happen when this button is clicked?
Since it is a submit button, in the absence of any JS that overrides the normal functionality, it will submit the form.
I looked in all the .js files that are referenced by the page that contains this input tag, but I did not find any code that responds to it.
There might still be some.
So how can I locate the code that responds to this button's click event?
If it exists, it will likely show up if you turn on profiling in your JS debugger (make sure it is configured not to reset when you leave the page (which submitting the form will do)).

It submits the form it is in. This is HTML default and doesn't need Javascript.

Without being able to see the .js files associated with the code it is impossible to tell. But there are a few possibilities.
There is no JS attached and it simply submits the form to the server for processing.
There is JS attached to the input element itself, in which case you would look for code like $('#search1_btnSearch').click(function(){...
There is JS attached to the onsubmit event of the form itself, in which case you would just look for submit event handlers.
You can dig deeper into this code yourself by downloading the Firebug plugin for Firefox which allows you to easily browse and manipulate HTML, JS, CSS, and more.

Most probably (IF THERE IS ANY javascript) the JS event is binded to "search1_btnSearch". Use ctrl + f and search for "search1_btnSearch".
BTW: Why do you think that there is javascript involved ? what happens?
The standard behaviour without javascript is to submit the form, in which this submit button is embedded.

Nothing as far as I see
May be it is attached with a form that has some action defined and a method also. So that will decide about the action.

Related

Autoclick a form input?

I am trying to create an adhoc code that save me pressing a repetitive button on a webpage, I opened F12 developer and tried using getElementbyID(..).click(); however didn't quite work, this is part extract of the button, I wonder if someone can advise what code I can use to automatically submit the button? Any help will be greatly appreicated. Best regards, Jon
what code I can use to automatically submit the button
If this is for a regular form post without AJAX then you can select the form then use submit().
E.g.
/*
* The variable myform is previously determined such as by `document.forms[0]`
* or a similar DOM selector method
*/
myform.submit();
If this is for a non-form button then use the click() method as suggested in the comments above. However, be aware that for this method there would have to be an Event Listener attached for the button to do anything of value.

Stop form from submitting without javascript

The problem is quite simple to understand but quite hard to execute. I am currently facing some clients that turn off their browser Javascript by default and this screw up my website a bit. Since my website send ajax requests on form submit, stop the form submit using Javascript, turning JS off means the form will be sent through and that's unexpectedly.
What I am trying to ask and achieve is whether it is possible to just using html purely to stop a form from submitting?
I think the best answer is; to have the original form action point to an error page, asking the user to turn on javascript.
Then let your javascript code fill in the form action parameter, once the ajax state is complete.
Alternatively or additionally, you could use a <noscript> tag as suggested in the comments, to generate a message on the original page.
I think you can simply change your submit button tag to an input and style it to look like a button and remove the type="submit" that's all. with out ajax it will not respond.

How can I make modifications to an HTML form that is automatically generated?

I'm creating a webform using a marketing automation platform. I want to add a field that functions with jquery to do an autocomplete. Unfortunately, the forms are generated through a WYSIWYG editor in the software, and then generated and put into the page when it renders. The only code for the form that appears in the HTML for the page is a simple variable placeholder - %%FORM::DEFINITION%% - which is then replaced with the form code when you visit the URL. The software support team tells me that making the change I want to make is impossible, which I see as a challenge.
The only thing I need to be able to do is add an id="autocomplete-dynamic" attribute to the input on the form. I had two ideas how I could achieve this.
The first, and most preferable option, would be some script that runs at the bottom of the page that simply inserts the attribute into the input tag after the page renders out. This would only be a client-side change, but since all this does is make the text field capable of looking up values out of another table, it should be fine. If someone had a script blocker in place, they would not be prevented from typing into the text field normally, it's just that the auto-lookup wouldn't work. We're trying to make it easier to select an item from a list of thousands of possibilities, but if someone had to type in their own entry without the autocomplete, it would not be a disaster. This seems like a clean solution, but I am not sure if it can be done.
The other possibility is to get the form code out of the software and embed it in a separate HTML document, and make the change there. You can extract the raw HTML for the form for use on another page, but pasting this code right back into the landing page causes errors. So, the thought then was that if I have taken the code generated by the software and put it in an HTML page on a separate web server, I could modify it as needed, and then turn around and use an iframe to stick it right back in the landing page. The software shouldn't complain because the form is being used on an external site like it's supposed to be... I have just hidden that external site back inside the platform-hosted page.
Option 1 would still be much easier to implement, I think, provided it is actually possible.
Thanks in advance.
Your first solution seems completely appropriate.
$(function() {
$('#myForm input').attr('id', 'autocomplete-dynamic');
});
This can be added anywhere inside a script tag because it's wrapped in a shorthand document.ready function, which waits to run until the DOM is ready.

Submit/Trigger a form within a browser using firebug or chrome:debugger

I have come across a problem with my friends browser. On a website, a from which didnt allow me to check a checkbox and execute the form using the associated button.
I went into firebug/chrome:debugger(inspect element) and added the obvious checked="checked" to the input.
But how can I trigger the form, I can see the name, maybe call javascript from within the debugger?
Could i use this?:
document.forms["myform"].submit();
How can I do this?
Thanks

IE9 file input triggering using Javascript

I had a post here:
.change acting weird in IE9
However, I have run into a new incident regarding the form handling of file upload and was curious if anyone has run into this issue.
My original problem was that I could not get an onchange event to work and I thought perhaps it was an issue with my javascript, but I found that it has to do with the way that the form is being activated.
I have a file input
<input type="file" name="abc"/>
now I've done 2 things.
I've hidden the input and created a button (for better styling control) that activates the input.
<button id="mybutton">click to upload a pic</button>
<input type="file" name="abc"/>
and then the JS for the interaction between the two:
$("#mybutton").click(function() {
$("Input[type=file]").click()
};
and of course a submit for the form (i use parent in this example, but you in my actual code I use the form id).
$("input[type=file]").change(function() {
$(this).parent().submit();
});
When I click "mybutton" the expected result does occur my browse window opens and lets me choose a file from my computer. Also when I change the file in all browsers other than IE the onchange event is fired. Now if I unhide the form and manually click the "browse" button and choose a file the onchange event is fired. So basically the browser treats clicking the actual file button differently than doing a $("input[type=file]").click()
anyone know how to fix this?
As said before, IE is very strict when submitting form containing file inputs. File inputs must be triggered with a real mouse click to allow the form submission. Additionnaly, there seems to be a bug with IE9 and file inputs.
The good news is that there is a way to bypass the security restriction from IE using a label :
Create a regular label tag linked to your file input. The label will trigger the input file as it normally does.
Disguise the label as a button using CSS.
The file input must be displayed (for IE8), but can be hidden using "visibility: hidden". IE8 will accept this hack.
If I am not much mistaken you can't change this as this is (was originally) meant to protect the privacy of users avoiding anyway to upload files without explicit user permission/action.
make sure your code is in $("document").ready(function(){... here..});
seems file inputs when wired up with .live("change", function(){}); dont quite work well
the other styling stuff is something else but the CSS isn't all that complicated - beautiful file upload

Categories