I would like to use one input field that is referenced by multiple forms on one page. or I would like to use <input form="form1,form2,form3,form4" type="text" name="name" required autocomplete="off"/><br> or call the input field every time i submit each of the forms
<table align="center">
<tr>
<td colspan="5" align="center">Group Name:
<input form="form1,form2,form3,form4" type="text" name="name" required autocomplete="off"/><br>
</td>
</tr>
<tr>
<td>
<form id="form1" action="plan.php" method="post">
<input type="hidden" name="number" value="0"><br>
<input type="hidden" name="priceplan" value="25"><br><br>
<input type="submit" value="10 PAX" style="width:100%; margin-top:0px;" class="button">
</form>
</td>
<td>
<form id="form2" action="plan.php" method="post">
<input type="hidden" name="number" value="0"><br>
<input type="hidden" name="priceplan" value="2"><br><br>
<input type="submit" value="10 People" style="width:100%; margin-top:0px;" class="button">
</form>
</td>
<td>
<form id="form3" action="plan.php" method="post">
<input type="hidden" name="number" value="0"><br>
<input type="hidden" name="priceplan" value="3"><br><br>
<input type="submit" value="20 People" style="width:100%; margin-top:0px;" class="button">
</form>
</td>
<td>
<form id="form4" action="plan.php" method="post">
<input type="hidden" name="number" value="0"><br>
<input type="hidden" name="priceplan" value="4"><br><br>
<input type="submit" value="30 People" style="width:100%; margin-top:0px;" class="button">
</form>
</td>
<td>
<form id="form5" action="plan.php" method="post">
<input type="hidden" name="number" value="0"><br>
<input type="hidden" name="priceplan" value="5"><br><br>
<input type="submit" value="40 People" style="width:100%; margin-top:0px;" class="button">
</form>
</td>
</tr>
</table>
I would like to use <input form="form1,form2,form3,form4" type="text" name="name" required autocomplete="off"/><br> or call the input field every time i submit each of the forms
You can achieve this using Javacsript here is an example using jQuery:
first you give ur unique input an ID (id="uniqueInput")
then on the submit you append it to the form
$('form').submit(function(e){
e.preventDefault();
$('<input>').attr({
type: 'hidden',
id: 'foo',
name: 'bar',
value: $('#uniqueInput').val()
}).appendTo($(this));
})
Related
I want to send the total value of this table to an email. I wrapped the mailto around the table but there was no success is doing that. Am I missing something here? I would like to embed this on a wix website.
<form action="mailto:someone#gmail.com" method="post" enctype="text/plain"> <tr>
<td>Patio Set/Workshop Table/Gun Cabinet</td>
<td>
<input type="text" value="" name="7QTY5" id="7QTY5" onKeyUp="multiply()" />
</td>
<td style=display:none;>
<input type="text" name="7PRICE5" id="7PRICE5" value="25" readonly/>
</td>
<td style=display:none;>
<input type="text" name="7TOTAL5" id="7TOTAL5" />
</td> <input type="button" name="Submit1" value="Calculate" onclick="javascript:add()"/><br> Total:
<input type="text" name="9TOTAL" id="9TOTAL" readonly/> <br>
<input type="button" name="Submit2" value="Calculate" onclick="javascript:calculate()"/><br>
<input id= "result" type= "text" value="0"/> Final Result<br/>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
Hello I'm pretty new to coding and while working on a project I tried to make a form with a submit and reset button, but when testing the form it doesn't work on the computer or mobile. Thank you for viewing this.
enter code here
<form id="form" action="contactform.php" method="post">
<label for="topic">Message Topic: </label>
<select name="topic">
<option value="Memberships">Memberships</option>
<option value="Careers">Careers</option>
<option value="Other">Other</option>
</select>
<br><br>
<label for="Name">Name: </label>
<br>
<input name="FName" id="firstname" type="text" placeholder="First" size="20" required>
<input name="LName" id="lastname" type="text" placeholder="Last" size="20" required>
<br><br>
<label for="email">Email: </label><br>
<input name="Email" id="email" type="email" size="25" required><br>
<label for="phone">Phone Number: </label><br>
<input name="Phone" id="phone" type="tel" size="12" required>
<br><br>
<label for="message">Enter a Message Here:</label>
<br>
<br><textarea name="messagebox" id="message"></textarea>
<br><br>
<input type="submit" id="submit" value="Submit"></button>
<input type="reset" id="clear" value="Clear"></button>
<br>
</form>
</div>
</body>
<script>
$(document).ready(function(){
$(#submit).on('click touch', function () {
alert("You are about to SUBMIT this form. Is that ok?");
});
});
</script>
The Problem is in your syntax. Change it to:
<button type="submit" id="submit">Submit</button>
<button type="reset" id="clear">Clear</button>
or
<input type="submit" id="submit" value="submit">
<input type="reset" id="clear" value="clear">
I just checked it. Seems like it works fine
Have a look at it:
https://codepen.io/kap1l/pen/gOYjjRZ?editors=1000
Thanks,
Also in submit and reset type you are using <input>
but closing is
</button>
Change both to either
<input></input>
or <button></button>
The problem is you didn't assign single quotes or double quotes in the $(#submit).
Change '#submit' to the id of the form and change 'click touch' to 'submit'.
<script>
$(document).ready(function(){
$('#form').on('submit', function () {
alert("You are about to SUBMIT this form. Is that ok?");
return true;
});
});
</script>
You have couple of issues in your code
Remove the closing tags </button>, firstly because you do not have corresponding opening tags for them, secondly you need not use them as you already achieved the same by using <input> elements.
JQuery issue, you need to enclose id within double quotes/single quotes
$(#submit) should be $("#submit")
Here is the working code JSFiddle
Do this
<button type="button" id="submit">Submit</button>
<button type="button" id="clear">Clear</button>
$("#submit").on('click', function () {
instead of
<input type="submit" id="submit" value="Submit"></button>
<input type="reset" id="clear" value="Clear"></button>
$(#submit).on('click touch', function () {
In your html, u did some mistakes like for submit buttons, you started with <input> and trying to close it with <button>
so replace it with
<input type="submit" id="submit" value="Submit"/>
<input type="reset" id="clear" value="Clear"/>
In script while using a selector please put the selector inside "" OR '' like $('#submit') insted of using it $(#submit)
$(document).ready(function(){
$('#submit').on('click', function () {
alert("You are about to SUBMIT this form. Is that ok?");
});
});
label{
font-size:20px;
margin-right:20px;
}
textarea
{
width:100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" action="contactform.php" method="post">
<table>
<tr>
<td> <label for="topic">Message Topic: </label></td>
<td>
<select name="topic">
<option value="Memberships">Memberships</option>
<option value="Careers">Careers</option>
<option value="Other">Other</option>
</select>
</td>
</tr>
<tr>
<td> <label for="Name">Name: </label></td>
<td>
<input name="FName" id="firstname" type="text" placeholder="First" size="20" required>
<input name="LName" id="lastname" type="text" placeholder="Last" size="20" required>
</td>
</tr>
<tr>
<td> <label for="email">Email: </label></td>
<td>
<input name="Email" id="email" type="email" required>
</td>
</tr>
<tr>
<td> <label for="phone">Phone Number: </label></td>
<td>
<input name="Phone" id="phone" type="number" required>
</td>
</tr>
<tr>
<td> <label for="message">Enter a Message Here:</label></td>
<td>
<textarea name="messagebox" rows=5 id="message"></textarea>
</td>
</tr>
<tr>
<td> <input type="submit" id="submit" value="Submit"/>
<input type="reset" id="clear" value="Clear"/>
</td>
</tr>
</table>
</form>
body --> div --> frame --> body --> form --> table. Need the values inside the tables.
I am using the childNode method but do not get any childNode beyond the frame.
<div class="navbar navbar-fixed-top">
<div id="content-loader-load" class="content-wrapper">
<h2 id="page-title-home-link" style="display:none">
<h1 id="page-title">Case Detail - 1186</h1>
<iframe id="iframe" frameborder="0" style="border: 0px none; width: 100%; height: 1280px; margin-top: 20px;" src="case_detail.php3?ticket_num=1186">
<html>
<head>
<body>
<iframe id="PopupNote_IFrameHostInfoNote" frameborder="0" src="/PopupNoteContents.php?sNote=&bNoteIsURL=0&sType=Info&sHeading=Note&bAllowMove=0&id=PopupNote_IFrameHostInfoNote" scrolling="no" style="display:none; padding : -1em; border: 0px outset #000000; z-index:9999;position:absolute;left:0px;top:0px;width:262px;">
<script type="text/javascript">
<table id="CSPageHeader" width="100%" border="0" style="display: none;">
<p> </p>
<form id="ticket_detail" method="post" name="ticket_detail">
<input type="hidden" value="0" name="deleteLock">
<input type="hidden" value="" name="mode">
<input type="hidden" value="desc" name="sort">
<input type="hidden" value="d6761ab1fbf9aafd71059ff046d74203" name="SessionKey">
<input id="include_files" type="hidden" value="0" name="include_files">
<input id="work_timer_flag" type="hidden" value="0">
<input id="ticket_num" type="hidden" value="1186" name="ticket_num">
<input id="1186_old_status" type="hidden" value="11" name="1186_old_status">
<input id="new_status" type="hidden" value="11" name="new_status">
<input id="1186_old_cause_code" type="hidden" value="" name="1186_old_cause_code">
<input id="new_cause_code" type="hidden" value="" name="new_cause_code">
<input type="hidden" value="on" name="old_notify_radio">
<input id="1186_old_case_severity_id" type="hidden" value="3" name="1186_old_case_severity_id">
<input id="new_case_severity_id" type="hidden" value="3" name="new_case_severity_id">
<input id="1186_old_priority" type="hidden" value="3" name="1186_old_priority">
<input id="new_priority" type="hidden" value="3" name="new_priority">
<input id="1186_old_category_str" type="hidden" value="1" name="1186_old_category_str">
<input id="category_str" type="hidden" value="1" name="category_str">
<input id="new_category_str" type="hidden" value="1" name="new_category_str">
<input id="1186_old_assigned" type="hidden" value="370" name="1186_old_assigned">
<input id="new_assigned" type="hidden" value="370" name="new_assigned">
<input id="1186_old_workflow" type="hidden" value="0" name="1186_old_workflow">
<input id="new_workflow" type="hidden" value="0" name="new_workflow">
<input id="1186_old_vendor_tkt" type="hidden" value="" name="1186_old_vendor_tkt">
<input id="new_vendor_tkt" type="hidden" value="" name="new_vendor_tkt">
<input id="1186_old_notify_value" type="hidden" value="on" name="1186_old_notify_value">
<input id="1186_old_visible_description" type="hidden" value="test case" name="1186_old_visible_description">
<input id="new_visible_description" type="hidden" value="test case" name="new_visible_description">
<input id="1186_old_ticket_type_id" type="hidden" value="1" name="1186_old_ticket_type_id">
<input id="new_ticket_type_id" type="hidden" value="1" name="new_ticket_type_id">
<input id="1186_old_netlog_tt_number" type="hidden" value="" name="1186_old_netlog_tt_number">
<input id="new_netlog_tt_number" type="hidden" value="" name="new_netlog_tt_number">
<input id="1186_old_netlog_carrier_id" type="hidden" value="0" name="1186_old_netlog_carrier_id">
<input id="new_netlog_carrier_id" type="hidden" value="0" name="new_netlog_carrier_id">
<input id="1186_old_netlog_carrier_ticket" type="hidden" value="" name="1186_old_netlog_carrier_ticket">
<input id="new_netlog_carrier_ticket" type="hidden" value="" name="new_netlog_carrier_ticket">
<input id="1186_old_netlog_resolution_id" type="hidden" value="0" name="1186_old_netlog_resolution_id">
<input id="new_netlog_resolution_id" type="hidden" value="0" name="new_netlog_resolution_id">
<input id="1186_old_remote_ticket_num" type="hidden" value="0" name="1186_old_remote_ticket_num">
<input id="new_remote_ticket_num" type="hidden" value="0" name="new_remote_ticket_num">
<input id="1186_old_remote_server_info_id" type="hidden" value="0" name="1186_old_remote_server_info_id">
<input id="new_remote_server_info_id" type="hidden" value="0" name="new_remote_server_info_id">
<input id="1186_old_responsible_party" type="hidden" value="" name="1186_old_responsible_party">
<input id="new_responsible_party" type="hidden" value="-1" name="new_responsible_party">
<input id="1186_old_resolution_code" type="hidden" value="" name="1186_old_resolution_code">
<input id="new_resolution_code" type="hidden" value="-1" name="new_resolution_code">
<table class="table" cellpadding="4" border="1">
<tbody>
<tr>
<td class="TableFormLabel">Name:</td>
<td class="TableFormInput" colspan="4">
<font face="arial,helvetica" size="+1">test case </font>
</td>
<td class="TableFormInput" align="center">
</tr>
<tr>
<tr>
<tr id="cause_code_row" style="display: none;">
pls help.
I have added the code above.
You need to run the script on the page that's loaded in the frame.
// #include YourPage
// #include IframedPage
if(window.location===IframedPage){
//Your code here...
}
If you need to pass info back and forth use GM_setValue or the equivalent.
Im trying to make a buy it now form with paypal. I cannot figure out how to widen a text input field.
This is my code currently:
<h1>Simply fill in the info below</h1>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="277G8E79U9AX6">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="One week of Animal Photos">
<input type="hidden" name="item_number" value="1">
<input type="hidden" name="amount" value="7.95">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHosted">
<table>
<tr><td><input style="width: 300px;" type="hidden" name="on0" value="Your Email">Your Email</td></tr><tr><td><input type="text" name="os0" maxlength="200"></td></tr>
<tr><td><input style="width: 600px; height = 200px;" type="hidden" name="on1" value="Address of Recipient">Address of Recipient</td></tr><tr><td><input type="text" name="os1" maxlength="300"></td></tr>
</table>
<tr><td><input style="width: 600px; height = 200px;" type="hidden" name="on2" value="Message">Message</td></tr><tr><td><input type="text" name="os2" maxlength="300"></td></tr>
</table>
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
I tried adding a style = "width:300px" or simply width: "300px" but it doesn't reflect it.
You are styling the wrong inputs, look for the ones that doesn't have:
type="hidden"
And go for the ones that has type="text". Here is a version of it I made from your code:
<h1>Simply fill in the info below</h1>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="277G8E79U9AX6">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="One week of Animal Photos">
<input type="hidden" name="item_number" value="1">
<input type="hidden" name="amount" value="7.95">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHosted">
<table>
<tr><td><input style="width: 300px;" type="hidden" name="on0" value="Your Email">Your Email</td></tr><tr><td><input type="text" name="os0" maxlength="200" style="width: 500px;"></td></tr>
<tr><td><input style="width: 600px; height = 200px;" type="hidden" name="on1" value="Address of Recipient">Address of Recipient</td></tr><tr><td><input type="text" name="os1" maxlength="300" style="width: 500px;"></td></tr>
</table>
<tr><td><input style="width: 600px; height = 200px;" type="hidden" name="on2" value="Message">Message</td></tr><tr><td><input type="text" name="os2" maxlength="300" style="width: 500px;"></td></tr>
</table>
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
I hope it help, just in case, here is a pen: Pen
Use this and do style width in input.
<style>
input:focus::placeholder {
color: transparent;
margin-bottom: 0px;
}
</style>
I'm using the MediaWiki:Secure_HTML extension, and trying to render a Google Checkout button I generated.
The button code is this:
<form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/XXXXXXXXX" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm" target="_top">
<table cellpadding="5" cellspacing="0" width="1%">
<tr>
<td align="right" width="1%">
<select name="item_selection_1">
<option value="1">$80.00 - Freeside Membership Dues (Standard)</option>
<option value="2">$40.00 - Freeside Membership Dues (Starving Hacker)</option>
<option value="3">$65.00 - Freeside Membership Dues (Joint-MIC)</option>
</select>
<input name="item_option_name_1" type="hidden" value="Freeside Membership Dues (Standard)"/>
<input name="item_option_price_1" type="hidden" value="80.0"/>
<input name="item_option_description_1" type="hidden" value=""/>
<input name="item_option_quantity_1" type="hidden" value="1"/>
<input name="item_option_currency_1" type="hidden" value="USD"/>
<input name="item_option_name_2" type="hidden" value="Freeside Membership Dues (Starving Hacker)"/>
<input name="item_option_price_2" type="hidden" value="40.0"/>
<input name="item_option_description_2" type="hidden" value=""/>
<input name="item_option_quantity_2" type="hidden" value="1"/>
<input name="item_option_currency_2" type="hidden" value="USD"/>
<input name="item_option_name_3" type="hidden" value="Freeside Membership Dues (Joint-MIC)"/>
<input name="item_option_price_3" type="hidden" value="65.0"/>
<input name="item_option_description_3" type="hidden" value=""/>
<input name="item_option_quantity_3" type="hidden" value="1"/>
<input name="item_option_currency_3" type="hidden" value="USD"/>
</td>
<td align="left" width="1%">
<input alt="" src="https://checkout.google.com/buttons/buy.gif?merchant_id=XXXXXXXXX&w=121&h=44&style=white&variant=text&loc=en_US" type="image"/>
</td>
</tr>
</table>
</form>
I am able to get the button to show up on my page edit just fine - however, the formatting is completely off. It appears that the <input type="hidden"> items for each of my drop-down options is being rendered, which is adding a lot of whitespace. The items aren't visible, but in the generated Secure HTML it appears like this, more or less:
I'm hoping to either use some CSS to correct the mess, or maybe there's another extension that's more appropriate or handles <input> better?
Turns out putting in whitespace may generate artifact <pre> tags via the Markdown, so there's some bugs with respect to formatting the code within the <shtml>. Removing a lot of the whitespace in code that gets hashed by the Secure_HTML resolves the problems.
Wrap the chunk of hidden inputs in a block element. To neaten up a bit you can move that block to the top of the form -above the table. Since the input tags will still be inside a block-level element (the fieldset tags) it will remain valid XHTML.
<form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/XXXXXXXXX" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm" target="_top">
<fieldset style=”display: none”>
<input name="item_option_name_1" type="hidden" value="Freeside Membership Dues (Standard)"/>
<input name="item_option_price_1" type="hidden" value="80.0"/>
<input name="item_option_description_1" type="hidden" value=""/>
<input name="item_option_quantity_1" type="hidden" value="1"/>
<input name="item_option_currency_1" type="hidden" value="USD"/>
<input name="item_option_name_2" type="hidden" value="Freeside Membership Dues (Starving Hacker)"/>
<input name="item_option_price_2" type="hidden" value="40.0"/>
<input name="item_option_description_2" type="hidden" value=""/>
<input name="item_option_quantity_2" type="hidden" value="1"/>
<input name="item_option_currency_2" type="hidden" value="USD"/>
<input name="item_option_name_3" type="hidden" value="Freeside Membership Dues (Joint-MIC)"/>
<input name="item_option_price_3" type="hidden" value="65.0"/>
<input name="item_option_description_3" type="hidden" value=""/>
<input name="item_option_quantity_3" type="hidden" value="1"/>
<input name="item_option_currency_3" type="hidden" value="USD"/>
</fieldset>
<table cellpadding="5" cellspacing="0" width="1%">
<tr>
<td align="right" width="1%">
<select name="item_selection_1">
<option value="1">$80.00 - Freeside Membership Dues (Standard)</option>
<option value="2">$40.00 - Freeside Membership Dues (Starving Hacker)</option>
<option value="3">$65.00 - Freeside Membership Dues (Joint-MIC)</option>
</select>
</td>
<td align="left" width="1%">
<input alt="" src="https://checkout.google.com/buttons/buy.gif?merchant_id=XXXXXXXXX&w=121&h=44&style=white&variant=text&loc=en_US" type="image"/>
</td>
</tr>
</table>