Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
the below is a part of code in my project. I want the java script to display another php page after submitting the form to the database. for testing purpose i tried a simple alert box to be displayed on click of submit button of form. but the script shows no response`
<table width="100%" height="100%" border="0">
<tr>
<td height="31">
<form onsubmit="open()" action="addguestbook.php" method="post">
<font face="Verdana" size="2" >
Name:
</font>
</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>
<font face="Verdana"size="2">E-mail:</font>
</td>
<td>
<input type="text" name="email">
</td>
</tr>
<tr>
<td height="31">
<font face="Verdana" size="2">Comment:</font>
</td>
<td>
<textarea rows="4" name="comment" cols="23" wrap="hard"></textarea>
</td>
</tr>
<tr>
<td height="31"> </td>
<td>
<input type="submit" value="Submit">
<input type="Reset" value="Reset">
</form>
</td>
</tr>
</table>
<strong>
View Guestbook
</strong>
<script>
function open() {
alert("Welcome");
}
</script>
Some points:
<table>, <tr>, <td> and other tabular elements must be used only for tabular data. That's not your case. Consider using CSS tables instead.
<font> elements was deprecated in 4.01. Use CSS instead.
Avoid inline JS event listeners, add them using JS instead of HTML.
Avoid global functions, which can conflict with native ones: window.open.
Try this:
<form id="addGuest" action="addguestbook.php" method="post">
<label class="row">
<span>Name:</span>
<input type="text" name="name" />
</label>
<label class="row">
<span>E-mail:</span>
<input type="text" name="email" />
</label>
<label class="row">
<span>Comment:</span>
<textarea rows="4" name="comment" cols="23" wrap="hard"></textarea>
</label>
<span class="row push">
<input type="submit" value="Submit" />
<input type="Reset" value="Reset" />
</span>
</form>
#addGuest {
display: table;
width: 100%;
}
#addGuest > .row {
font-family: Verdana;
font-size: .8em;
display: table-row;
}
#addGuest > .row > span {
display: table-cell;
vertical-align: top;
}
#addGuest > .row.push:before {
content: '';
display: table-cell;
}
document.getElementById('addGuest').onsubmit = function() {
alert("Welcome");
};
Demo
Related
As I have almost no knowledge of HTML and I had no idea where to ask, I decided to come here. I am trying to edit HTML Weebly web editor generated and add a "contact us" form which will direct messages to my email. I found some source code on the web and tried to incorporate it with the form Weebly generated for me, however I have not had any success. My code is below:
<div>
<form enctype="multipart/form-data" name="contactform" method="post" action="" onsubmit="myFunction()">
<div id="466589977852666939-form-parent" class="wsite-form-container" style="margin-top:10px;">
<ul class="formlist" id="466589977852666939-form-list">
<h2 class="wsite-content-title" style="text-align:left;">SEND US AN EMAIL</h2>
<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
<label class="wsite-form-label" for="Email_Address">Email <span class="form-required">*</span></label>
<div class="wsite-form-input-container">
<input id="Email_Address" class="wsite-form-input wsite-input wsite-input-width-370px" type="text" name="Email_Address" maxlength="100" />
</div>
<div id="instructions-270584481949385592" class="wsite-form-instructions" style="display:none;"></div>
</div></div>
<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
<label class="wsite-form-label" for="Your_Message">Your Message <span class="form-required">*</span></label>
<div class="wsite-form-input-container">
<textarea id="Your_Message" class="wsite-form-input wsite-input wsite-input-width-370px" name="Your_Message" style="height: 200px"></textarea>
</div>
<div id="instructions-137987539423347553" class="wsite-form-instructions" style="display:none;"></div>
</div></div>
</ul>
</div>
<div style="text-align:left; margin-top:10px; margin-bottom:10px;">
<input type='submit' style='position:absolute;top:0;left:-9999px;width:1px;height:1px' /><a class='wsite-button' ><span class='wsite-button-inner'>Submit</span></a>
</div>
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
</div>
It obviously has something to do with the button click not being registered, so I made my own much simpler form to test it out.
<form name="contactform" method="post" action="" onsubmit="myFunction()">
<table width="400px" class="contactform">
<tr>
<td valign="top">
<label for="Email_Address" class="required">Email Address<span class="required_star"> * </span></label>
</td>
<td valign="top">
<input type="text" name="Email_Address" id="Email_Address" maxlength="100" style="width:230px">
</td>
</tr>
<tr>
<td valign="top">
<label for="Your_Message" class="required">Your Message<span class="required_star"> * </span></label>
</td>
<td valign="top">
<textarea style="width:230px;height:160px" name="Your_Message" id="Your_Message" maxlength="2000"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center" >
<br /><br />
<input type="submit" value=" Submit Form " style="width:200px;height:40px">
<br /><br />
</td>
</tr>
</table>
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
And in this case, the function actually fired! So now I am unsure as to what the difference is between my first example, and my second much simpler piece of code. Could anyone help me out?
You could add an onclick() to the submit <a> tag to submit the form.
Like so, change...
<a class='wsite-button' ><span class='wsite-button-inner'>Submit</span></a>
To...
<a class="wsite-button" onclick="document.contactform.submit(); return false;"><span class="wsite-button-inner">Submit</span></a>
This is because in your simplified example you used a Submit button.
Where as in you original form the button is moved out of the screen using CSS and only the text 'Submit' is left there. And your function triggers when the input is clicked, not the text.
This is the CSS style attributes that are hiding the button:
position: absolute;
top: 0;
left: -9999px;
width: 1px;
height: 1px;
Replace this:
<input type="submit" style="position:absolute;top:0;left:-9999px;width:1px;height:1px">
By this:
<input type="submit" />
The button will reappear and clicking on it will trigger your message box.
Here is the JSFiddle demo
Currently i have made two radio buttons, one displays input fields one the other doesn't. How would i modify my java script function to show different input fields when the other radio button is clicked.
<tr>
<td class="odd" width="20%" nowrap>
<bean:message key="editvarref.header.name"/>
</td>
<td class="odd" width="80%">
<div>
<html:radio styleId="users_name_type_0" property="user_type" value="Show" onclick="getResults(this)" />
<label for="user_name_type_0"><bean:message key="input.use.name"/> </label>
</div>
<div style="padding-top:5px; padding-bottom:5px;">
<html:radio styleId="email_name_type_1" property="user_type" value="Nothing" onclick="getResults(this)" />
<label for="email_name_type_1"><bean:message key="input.use.email"/></label>
</div>
<div class="text">
<p>First Name:
<input type="text" name="text1" id="text1" maxlength="30">
</p>
</div>
<div class="text">
<p>Last Name:
<input type="text" name="text1" id="text1" maxlength="30">
</p>
</div>
</td>
</tr>
the js function im using is getResults():
function getResults(elem) {
elem.checked && elem.value == "Show" ? $(".text").show() : $(".text").hide();
};
I've tried using an if statement but i got an error and when i tried it using getElementById only the one button worked. How would I modify the JavaScript function to show another div
<div class="email">
<p>Email:
<input type="text" name="email1" id="email1" maxlength="30">
</p>
</div>
Do I also have to add a control statement in the reset function as well?
(You need to be way more specific than "an if statement" for people to understand what you've already tried.) But try changing your onclick function to this:
function getResults(elem){
if (elem.value == "Show") {
$(".text").show();
$(".email").hide();
} else {
$(".email").show();
$(".text").hide();
}
}
I'm working on a website that includes Facebox to load content for a basket process.
When adding something to the basket and clicking the green wishlist button I'm having trouble with it loading in IE8, it works on all the modern browsers. Can anyone see why it won't load content in IE8 in the facebox?
I'm using this code on the wishlist button:
<div onclick="location.href='wishlist.php?basket=true'" rel="msgbox" id="mybasket">
Is it enough info to view source on the link to the site? If you need any more code then please ask.
On a Mac using Chrome - as you can see the facebox has opened fine when clicking on the green wishlist button.
On a PC using IE8 - when clicking on the green wishlist button the facebox opens but doesn't load the content.
This is a problem with the returned data, You have an extra </div> at the end.
<div id="msgbox_title">Your Wish List<div id="closeme" onclick="jQuery(document).trigger('close.facebox')">x</div></div>
<form method="post" action="wishlist.php">
<div id="msgbox_body" style="max-height:400px;min-height:100px;overflow-y:auto;overflow-x:hidden;">
<input type="hidden" name="updatebasket" value="1" />
<table border="0" cellpadding="0" cellspacing="5" align="center" style="min-width:390px;border-collapse:separate!IMPORTANT;">
<tr><td colspan="5" style="text-align: left;"><strong style="font-size:14px;">Rotunda Vulsellum Forceps</strong></td></tr> <tr>
<td style="width: 50px;"><span style="color: #aaa;">Quote:</span></td>
<td style="width: 50px;"><span style="color: #aaa;">Sample:</span></td>
<td style="width: 350px;"><span style="color: #aaa;">Description:</span></td>
<td style="width: 80px;"><span style="color: #aaa;">Pack size:</span></td>
<td style="width: 40px;"><span style="color: #aaa;">Remove</span></td>
</tr>
<tr>
<!-- <td style="padding:0px 2px;"><input type="textbox" class="textbox" value="3" name="54_59_131" /></td> -->
<td align="center" valign="middle" style="background-color:#C3DCCD;"><input checked="checked" style="margin:5px;" type="checkbox" name="products-quote[]" value="835" /></td>
<td align="center" valign="middle" style="background-color:#D3C4DF;"><input checked="checked" style="margin:5px;" type="checkbox" name="products-sample[]" value="835" /></td>
<td style="font-size:11px;background-color:#efefef;"><p style="margin:0px 0px 5px 0px;padding:5px;"><span style="color:#663399;font-weight:bold;">VFR1001</span> Sterile Single-use Rotunda Vulsellum Forceps, double packed</p></td>
<td style="font-size:11px;background-color:#efefef;"><p style="margin:0px 0px 5px 0px;padding:5px; font-weight:bold;">10 units</p></td>
<td align="center"><b>X</b></td>
</tr>
</table>
</div>
<script>
function quoteme() {
$("#msgbox_body").html('<div id="contactform" style="margin-left:20px;margin-right:20px;margin-top:10px;"><form class="form" method="POST" action="http://www.dtrmedical.com"><table border="0"><tbody><tr><td><p class="name"><label for="name">Your Name<span style="color:red;">*</span>:</label></p></td><td> </td><td><input type="text" name="name" id="name" /></td></tr><tr><td><p class="hospital"><label for="hospital">Hospital/Institution:</label></p></td><td> </td><td><input type="text" name="hospital" id="hospital" /></td></tr><tr><td><p class="department"><label for="department">Department:</label></p></td><td> </td><td><input type="text" name="department" id="department" /></td></tr><tr><td><p class="email"><label for="email">E-mail<span style="color:red;">*</span>:</label></p></td><td> </td><td><input type="text" name="email" id="email" /></td></tr><tr><td><p class="tel"><label for="tel">Telephone<span style="color:red;">*</span>:</label></p></td><td> </td><td><input type="text" name="tel" id="tel" /></td></tr><tr><td colspan="3" align="center"><p class="submit"><input style=\"margin-left:27px;cursor:pointer;\" onclick="jQuery.facebox({ ajax: (\'wishlist.php?emailme=true&name=\' + this.form.name.value + \'&email=\' + this.form.email.value + \'&tel=\' + this.form.tel.value + \'&hospital=\' + this.form.hospital.value + \'&department=\' + this.form.department.value) }); return false;" type="submit" value="Send enquiry" name="submit" /></p></td><td> </td><td> </td></tr></tbody></table></form></div>');
$("#msgbox_actions").html('<input onclick="jQuery.facebox({ ajax: \'wishlist.php?basket=true\' })" type="button" value="Back to Wishlist" />');
}
</script>
<div id="msgbox_actions"><input onclick="quoteme()" type="button" value="Request quote/sample" /> <a class="backtoproducts" href="http://www.dtrmedical.com/products" style="border-bottom-left-radius:5px 5px;border-bottom-right-radius:5px 5px;border-bottom-style:none;border-color:initial;border-left-style:none;border-right-style:none;border-top-left-radius:5px 5px;border-top-right-radius:5px 5px;border-top-style:none;border-width:initial;color:white;font-family:Arial;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;font-size:11px;">Back to products</a></div><!-- <input type="submit" value="Update" /> --><!-- <input onclick="jQuery.facebox({ ajax: 'wishlist.php?emailme=true' })" type="button" value="Save list for later" /> --> <!-- <input type="submit" value="Update Qty's" /> <input onclick="jQuery.facebox({ ajax: 'wishlist.php?basket=true&clearall=true' })" type="button" value="Clear list" /> --></div>
</form>
In the line of starting with <div id="msgbox_actions">, at the end of it after the comments, is the extra </div>
This is breaking your html, which IE doesn't know how to fix, yet other browsers are able to.
Probably not the problem but my FireBug console tells me this when I click on the button:
"NetworkError: 404 Not Found - http://dtrmedical.com/xfade2.css"
It is not finding your CSS file for some reason or another.
Your onclick event isn't binding properly to your shopping cart div. I'm not sure why, exactly; IE8 may be buggy about parsing complicated HTML attributes like that properly.
Instead of defining the event inline (right inside of the HTML tag), try doing it via jQuery, instead. Add the following code to the beginning of your $.ready body.
$('#mybasket').click(function(){location.href='wishlist.php?basket=true';});
As a side note, you should always avoid defining any event handling in your HTML, instead taking the approach I describe above. Doing so not only means that all of your "action" code will be in once place, but it also affords you greater cross-browser support (especially when you leverage a library like jQuery).
So I am making a Greasemonkey script for a mybb forum. What it does is that when you submit a post it adds code to the beginning and the end of the post. Well even though that is a bad explanation just look at the code, it explains itself
function form_submit(event) {
var form = event ? event.target : this;
var arTextareas = form.getElementsByTagName('textarea');
for (var i = arTextareas.length - 1; i >= 0; i--) {
var elmTextarea = arTextareas[i];
elmTextarea.value = "[font=Tahoma][color=white]" + elmTextarea.value + "[/color][/font]";
}
form._submit();
}
window.addEventListener('submit',form_submit, true);
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = form_submit;
Now it works everywhere I want it to except the quickreply post reply button. I am assuming this is because the quickreply button uses AJAX to submit the form and the page does not get reloaded.
So I am wondering how I can have it so that when I click the quickreply button it appends the text I want it to. I have searched around for a while and anything that i could find did not work
Also, here is the code for the button that uses ajax(The button that doesn't work with the above code)
<input id="quick_reply_submit" class="button" type="submit" accesskey="s" tabindex="2" value="Post Reply">
And here is where it is located
<!-- start: showthread_quickreply -->
<br />
<form method="post" action="newreply.php?tid=2023403&processed=1" name="quick_reply_form" id="quick_reply_form">
<input type="hidden" name="my_post_key" value="de77ee8401edd4fe176f2c6a3787d411" />
<input type="hidden" name="subject" value="*" />
<input type="hidden" name="action" value="do_newreply" />
<input type="hidden" name="posthash" value="a67ff7b68df0a0951770f7f4a24cce8f" id="posthash" />
<input type="hidden" name="quoted_ids" value="" id="quoted_ids" />
<input type="hidden" name="lastpid" id="lastpid" value="18370730" />
<input type="hidden" name="from_page" value="1" />
<input type="hidden" name="tid" value="2023403" />
<input type="hidden" name="method" value="quickreply" />
<table border="0" cellspacing="1" cellpadding="4" class="tborder">
<thead>
<tr>
<td class="thead" colspan="2">
<div class="expcolimage"><img src="http://cdn.myforums.net/images/blackreign/collapse.gif" id="quickreply_img" class="expander" alt="[-]" title="[-]" /></div>
<div><strong>Quick Reply</strong></div>
</td>
</tr>
</thead>
<tbody style="" id="quickreply_e">
<tr>
<td class="trow1" valign="top" width="22%">
<strong>Message</strong><br />
<span class="smalltext">Type your reply to this message here.<br /><br />
<label><input type="checkbox" class="checkbox" name="postoptions[signature]" value="1" checked="checked" /> <strong>Signature</strong></label><br />
<label><input type="checkbox" class="checkbox" name="postoptions[disablesmilies]" value="1" /> <strong>Disable Smilies</strong></label></span>
</td>
<td class="trow1">
<div style="width: 95%">
<textarea style="width: 100%; padding: 4px; margin: 0;" rows="8" cols="80" name="message" id="message" tabindex="1"></textarea>
</div>
<div class="editor_control_bar" style="width: 95%; padding: 4px; margin-top: 3px; display: none;" id="quickreply_multiquote">
<span class="smalltext">
You have selected one or more posts to quote. Quote these posts now or deselect them.
</span>
</div>
</td>
</tr>
<tr>
<td colspan="2" align="center" class="tfoot"><input type="submit" class="button" value="Post Reply" tabindex="2" accesskey="s" id="quick_reply_submit" /> <input type="submit" class="button" name="previewpost" value="Preview Post" tabindex="3" /></td>
</tr>
</tbody>
</table>
</form>
<!-- end: showthread_quickreply -->
You need to show us the javascript that associates itself to that button. If it's AJAX powered, that's the only way to know what it's doing.
That said, this code will probably work:
function form_submit (event) {
var form, bClickNotSubmit;
if (event && event.type == 'click') {
bClickNotSubmit = true;
form = document.getElementById ('quick_reply_form');
}
else {
bClickNotSubmit = false;
form = event ? event.target : this;
}
var arTextareas = form.getElementsByTagName ('textarea');
for (var i = arTextareas.length - 1; i >= 0; i--) {
var elmTextarea = arTextareas[i];
elmTextarea.value = "[font=Tahoma][color=white]" + elmTextarea.value + "[/color][/font]";
}
if ( ! bClickNotSubmit ) {
form._submit();
}
}
window.addEventListener ('submit', form_submit, true);
document.getElementById ('quick_reply_submit').addEventListener ('click', form_submit, true);
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = form_submit;
If it doesn't work, save the target page (complete HTML, JS, CSS) to a disk, zip the files together and share the zip -- so that we can see what is happening with that button.
i have one text box,if i press any alphabet it will display best match to that alphabet in div tag, problem is i have button which is exactly below to textbox when drop down comes button moves to the bottom,i dont want to move my button when list displays
can any body tell me how to achieve this
code:
<table border="0" width="300" cellspacing="0" cellpadding="0" datasrc="#Header">
<tr>
<td id="txt" >
<INPUT TYPE="text" name="text1" id="text1" size=36 maxlength=255 style="font-family: Arial; font-size: 13px; color: #808080"
value="Type your Search Here" onfocus="this.value= (this.value=='Type your Search Here') ? '' : this.value"
onKeyUp="doSuggest(this.value,event.keyCode);"/>
<div id = "theResults" style ="width:22em;border:0px black solid;padding-left:0px;padding-right:0px;visibility:hidden;"/>
</div>
<!-- inner html goes here -->
<input type="hidden" name="id1" id="id1"/>
</td>
</tr>
<!--<tr><td> <INPUT type="text" size="50" id="text1" name="text1" value="" onKeyUp="doSuggest(this.value,event.keyCode);"/></td></tr>-->
<tr>
<td>
<input type="button" name="btn" id="btn" value="show selected"
onclick='alert("selected values "+document.getElementById("text1").value+","+document.getElementById("id1").value);'/>
</td>
</tr>
</table>
Without seeing anything off your markup: try position: absolute in your CSS.