Onclick event not working in IE - javascript

I am making a PHP webpage for database search using JavaScript (search suggest). I used div to show the search suggest items.When the user clicks on this a details page for that item opens. It seems to work fine in Firefox bt it doesnot work on IE.
HTML part:
<form method="post" name="searchform" id="searchform">
<table class="nostyle" width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="30%">Customer
<input type="text" name="search_customer" id="customer_name" class="input-text" onKeyUp="searchsuggest();" autocomplete="off"/>
<br /><div id="search_suggest" onclick="document.getElementById('searchform').submit();"> </div></td>
</tr>
</table>
</form>
Please help me, I'm a newbie!

You don't need an ONCLICK event. type=submit already does this for you, but the element needs to be an input, not a div.

Take a look at http://jsfiddle.net/LM4Sg/1/ you can click on the click here in ie and it works. If you look at http://jsfiddle.net/LM4Sg/ you can click around the screen and never hit the EMPTY div.
You need to put something in it to click.
<div id="search_suggest" type="submit" onclick="document.getElementById('searchform').submit();">Click Here</div>
If you just want to leave the space between the div tags use an & nbsp; instead, this also makes it so you can click in ie. See the fiddle - http://jsfiddle.net/LM4Sg/4/
<div id="search_suggest" onclick="alert('searchform');"> </div>
(changed to use an alert to simplify things.)

It works now... I changed my javascript
var search_suggest = document.getElementById(customer_name);
search_suggest.onclick = function(){ document.getElementById('searchform').submit();
Tried doing it with jQuery bt still did not work and don't know why IE did not work with my previous code.

Related

How can I add "tags" to a search field using Jquery

I have some tags (tagbutton) in a table, each tag has its own id, what I want to achieve is when the user clicks on the tag, a hidden input is created in the form with the value of the div (or tag) that has been clicked on. I also want the clicked div to be copied in the tagselected div.
I have no idea how to do that on jquery. Thank you very much in advance for your help.
<table> <tr>
<td> <div class="tagbutton" id="jazz"> Jazz </div> </td>
<td> <div class="tagbutton" id="classical"> Classical </div> </td>
<td> <div class="tagbutton" id="R&B"> R&B </div> </td>
</tr> </table>
<div id="tagselected"> </div>
<form> <input type="text"> <button ="submit"> Submit </button> </form>
Here is the javascript function that I have to copy the div, however when I clicked on it the entire table is copied
$('#jazz').click(function () {
$('.tagbutton').clone().insertAfter("#tagselected");
});
This code is wrong:
$('#jazz').click(function () {
$('.tagbutton').clone().insertAfter("#tagselected");
});
The problem with this code is that you are retrieving all the items with class tagbutton on the whole page. If your click function is on the item you want then you should be able to just use this to access the clicked item.
so something like :
$(this).clone().insertAfter("#tagselected");
This code is not tested and is just the simple change of the initial jQuery selector.
I assume the problem you have with the hidden fields is the same - that you were selcting all tags instead of just the one you clicked so hopefully this will solve that problem too.

jQuery Clone() not behaving as it should within asp.net page

I have a search box that needs to be within a form so that it can post to another page for a search functionality to work.
I originally had this working fine in Firefox by using an iFrame, but using the search box would simply refresh the when using Internet Explorer.
I found out that it worked fine if I simply created another form underneath the current one, however this obviously leaves it in the wrong place on the page.
I attempted to use the jQuery clone() method that I have succesfully used elsewhere on the site, but this is refusing to work.
I looked around and found another way of using the clone() method and I have it working fine within jsfiddle, but it will not work on my site.
This is the div that I want to populate:
<div id="CustomerSearch">
2
</div>
And this is the div that I want to be cloned:
<form name="frmCustomerList" action="../CustomerList/default.asp" method="post">
<div id="CustomerSearchClone">
1
Customer Search: <br />
<input type="text"id="txtSearch" name="txtSearch" class="Searchbox" />
<input type="submit" value="View" name="txtSearchSubmit" />
</div>
</form>
This is the script that I am using in an external file:
var CustomerSearch = jQuery('#CustomerSearch');
var CustomerSearchClone = jQuery('#CustomerSearchClone');
CustomerSearch.html(CustomerSearchClone.clone(true));
I have it working in JSFiddle here: http://jsfiddle.net/de9kc/92/
Any ideas?
Thanks guys
I'm not a .NET guy but the div you are pasting too is still within a form tag so I'm not certain that this wouldn't cause a hiccup for .NET at submission time (or postback, or whatever).
However, with respect to getting the cloned form elements where you wanted them per the layout you demonstrate in your question;
I modified the pre-result html like so:
//html
<form id="form1" runat="server">
<div id="CustomerSearch">2 Customer Search:</div>
</form>
<form name="frmCustomerList" action="../CustomerList/default.asp" method="post">
<div id="CustomerSearchClone">1 Customer Search:
<br />
<input type="text" id="txtSearch" name="txtSearch" class="Searchbox" />
<input type="submit" value="View" name="txtSearchSubmit" />
</div>
</form>
then i used this jQuery:
// the vars you already created
var CustomerSearch = jQuery('#CustomerSearch');
var CustomerSearchClone = jQuery('#CustomerSearchClone');
// using .clone(true, true) for deepWithDataAndEvents - not sure if you want this?
// will the .clone(true, true) retain input's link to original form id? I'm uncertain
// using .children() because clone's intended destination already has a div container
CustomerSearchClone.children().clone(true, true).appendTo(CustomerSearch);
// hide clone's source after cloning; no sense in having both search boxes visible
CustomerSearchClone.hide();
Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. (per http://api.jquery.com/clone/)
But you are appending the cloned elements into a different form tag, so maybe a non-issue.
I'm just learning jQuery myself, but I thought I would give the solution a shot ;-$
JSFiddle here: http://jsfiddle.net/de9kc/190/

javascript hide() and show() not hiding all content as it's supposed to

I have the following code which is supposed to first change the text if a checkbox is checked (which works fine) and second, SHOW a div with dropdown boxes. If the checkbox is unchecked then it should HIDE the div again.
The problem is that the div contains a javascript generated dropdown box which allows one to add/remove fields based on their need.
If you test it, you'll notice that when you check the checkbox and then click on "Add country", then uncheck the checkbox again, the "Add country" disappears but the dropdowns generated don't disappear.
Is there any way to also hide the dropdowns again if the checkbox is unchecked again?
Here is the code:
http://jsfiddle.net/shannont/GpNdS/1/
Your html is invalid. You have
<table>
<div>
...
</table>
A <table> cell can directly contain tr/tbody/thead tags only. A bare div inside a table will "leak" out of the table.
You also have two </table> closing tags below, but have only one <table> tag open.
Fix your html first. Clean it up so it's more legible - don't stuff script blocks into the middle of markup. It's confusing and hard to read.
Your browser is auto-correcting your syntactically invalid html. You can't put divs and images inside a table. You need to put in rows and cells first. The page then breaks because the javascript isn't targeting what you think it is targeting.
<table cellpadding="0" cellspacing="0" id="tblCountryCurrency">
<div id="detailedID" style="display: none;">
<img src="http://placehold.it/30x30" title="Add Row" border="0" onclick="addRowToCountryPrice('',''); return false;">
Add a Country
<input type="hidden" name="TotalLinesCountry" id="TotalLinesCountry">
Example Fix:
<table cellpadding="0" cellspacing="0" id="tblCountryCurrency">
<tr>
<td><div id="detailedID" style="display: none;"></td>
</tr>
</table>
You probably don't want to use a table here at all though. So I would recommend pulling that out and replacing it with a div. Then your code will probably work.
Well even if it's a mess, just put your
<div id="detailedID" style="display: none;">
Before the table.

innerHTML not updating properly

I'm trying to build some basic HTML form validation in Javascript. My form is held in a table and I've got an extra column to the right of each input with an ID of "ErrorX", which is initially populated with some text to show it's a required field.
<FORM NAME="ContactForm" METHOD=POST ACTION='Order3.php' onsubmit="return validateForm()">
<TABLE>
<TR>
<TD ALIGN=LEFT>Your name:</TD>
<TD ALIGN=RIGHT><INPUT TYPE=TEXT ID="Field1" NAME="Field1"></TD>
<TD ALIGN=LEFT ID="Error1">Required</TD>
</TR>
</TABLE>
<input type=submit value='Confirm ->'></FORM>
When the submit button is pressed, I've got the code validates the fields and attempts to change the right-most column text. The line of code that does this is:
document.getElementById("Error1").innerHTML = "ERROR";
The code executes and detects the error correctly, and the existing wording is removed, but the new text does not appear. If I query the value of document.getElementById("Error1").innerHTML, I get the correct text, but it's not appearing on the screen.
I'm using Safari v5.1.2 and it works with basic examples I've copied from the web, so I think it's my code rather than the browser.
innerHTML works for sure in safari. See this demo http://jsfiddle.net/zxMKM/
The obvious reason is that your html markup is invalid and the browser does its own error recovery and producing its own DOM in the process.
So please validate your html http://validator.w3.org/
Also please note that td.innerHTML is read only for IE8.
So, its more cross platform friendly to use td.innerText
I had similar issue on iPAD safari, it is not updating div value properly.
I have gone through lot of posts and tried out lot of options, but what works for me is text().
<td align="left"><div id="Error1">Required</div></td>

unable to get form elements by using form name in javascript

I am having an issue with accessing my form by it's name. When I use document.form[0].mylink.value it recognizes the value and outputs to the innerHTML that I specify. However, when I use document.myform.mylink.value it doesn't seem to recognize the form. I have tried this in chrome 6.0 and also firefox 3.6.3 and get the same result in both. I really need to be able to access my form values by using the form name (instead of document.form[0]), any ideas why document.myform.mylink.value doesn't work?
<form name="myform">
<table>
<tr><td valign="middle" align="center">
<div id="textResponse"></div>
</td></tr>
<tr><td height="30" valign="middle" align="center">
<input name="mylink" value="Enter a URL" size="31" />
</td></tr>
<tr><td valign="top" align="center">
Click
</td></tr>
</table>
</form>
<script type="text/javascript">
function submitForm2(){
//This one does NOT work:
my_link = document.myform.mylink.value;
//This one also does NOT work:
//my_link = document.forms['myform'].mylink.value;
//This one works:
//my_link = document.forms[0].mylink.value;
document.getElementById("textResponse").innerHTML="<p>"+my_link+"</p>";
}
</script>
Technically what you have should work ok... the full syntax below should also work:
var my_link = document.forms['myform'].elements['mylink'].value;
If by chance your variable in your "real" code is "mylink" not "my_link" you will get failures in IE as it will auto-reference the form element, not the value you are trying to extract.
That all said, your code as posted... works just fine in Firefox/IE (demo here: http://jsfiddle.net/Ymg8W/ )

Categories

Resources