Develop Reference

How to add <p> after table? (php / JS / wordpress)

I would like to add p tage or line break after table, so that contents in table and div can display in two lines.
At the moment they display in one line which is very messy (i.imgur.com/7cnQhou.jpg).
Would you please let me know how to do it using php or JS?
<div class="woocommerce-variation">
<input type="hidden" id="thwepof_product_fields" name="thwepof_product_fields" value="test2">
<table class="thwepo-extra-options thwepo_variable" cellspacing="0">
<tbody><tr class=""><td class="label leftside"></td>
<td class="value leftside">
<input type="text" id="test2" class="thwepof-input-field">
</td></tr>
</tbody>
</table>
<div class="quantity">
<input type="number" id="quantity_60" class="input-text qty" inputmode="numeric">
</div>
<button type="submit" class="single_add_to_cart_button">Add to cart</button>
</div>
Thank you.

table and div tag are both block level element. They display in two lines in default.
Below is the result of running your code.

onsubmit Function Issues

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

unresponsive javascript, on clicking submit [closed]

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

Jquery cancel button input placeholder text

I asked this question earlier, but asked without the proper info, here it goes again. What i need to happen is for the cancel button "list_btn_cancel" to close the popup activity and to replace what was imputed with the inputs placeholder.
This table is the input.
<table width="100%" style="line-height:0px" >
<tr>
<td><p>1.</p></td>
<td><input name="activities_thoughts_1" id="activities_thoughts_1" type="text" style="width:345px;" placeholder="Type or click list button >" /></td>
<td><input type="button" id="thoughts_1" class="list_btn ext_thoughts" value="List >" /></td>
</tr>
</table>
**this table is the popup**
<div id="popup_activity" class="box_list">
<div id="list_question_btn"></div></div>
</div>
<div id="activity_area_content" style="padding-bottom:5px;" >
<form name="form1">
<table class="style2" width="100%">
<tr><br />
<td width="8%" align="right"><input name="thoughts_list" id="thoughts_list_0" class="thoughts_list" type="radio" value="It is just terrible that my child will not be a normal kid" /></td>
</table>
</form>
</div>
</div>
<div><table><td><a style="margin-left:290px" onclick="closeDialog('popup_activity');"><input type="button" id="thoughts_cancel" class="list_btn list_btn_cancel" value="Cancel >" placeholder="Type or click list button >" /></a></td> <td><a onclick="closeDialog('popup_activity');"><input style="margin-left:10px" type="button" id="close_thoughts" class="list_btn list_btn_close" value="Close >" /></a></td></table></div></div>
**Here is the script**
$('.list_btn').button();
$('#popup_activity').css("display","none");
$('#list_help').css("display","none");
$('.ext_thoughts').click(function(){
openDialog('popup_activity');
btn_id= $(this).attr('id');
});
$('.thoughts_list').click(function(){
( $(this).attr('id'));
$("#activities_" +btn_id).val($(this).val());
});

Okay don't quite understand what you want but here is what i think you want:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$('.ext_thoughts').click(function(){
$("#popup_activity").toggle();
});
$('.list_btn_cancel').click(function(){
$("#popup_activity").hide();
$("#activities_thoughts_1").val('');
});
});
</script>
</head>
<body>
<input name="activities_thoughts_1" id="activities_thoughts_1" type="text" style="width:345px;" placeholder="Type or click list button " />
<br>
<input type="button" id="thoughts_1" class="list_btn ext_thoughts" value="Show/Hide List" />
<input type="button" id="thoughts_cancel" class="list_btn list_btn_cancel" value="Cancel" />
<br>
<div id="popup_activity" class="box_list" style="display:none;">
This is the pop up division
</div>
</body>
</html>
FIDDLE HERE

It's hard to figure out exactly what you're trying to do from your question but if all you want is for the text input to revert to its placeholder text simply set its value to blank.
$("#activities_thoughts_1").val('');
Here's an example http://jsfiddle.net/arG5f/

Onclick with facebox not working in IE8

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).