I would like to create a form where the user can put a number in like "12345" and when the submit button is clicked have the result be http://www.URL.com/12345
Do you need that data to be posted somewhere, or do you just want to jump to that location?
You could try without a form:
<label for="number">Number: </label>
<input type="text" id="number" /><br />
<input type="button"
onclick="window.location='http://www.URL.com/'+document.getElementById('number').value;" />
Here's the jQuery version separating the events from the markup. Demo can be seen here
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>
var url="http://www.url.com/";
$(document).ready(function(){$("#go").click(function(){
url+=$("#parameter").val()
window.location=url;
});
});
</script>
</head>
<body>
<input type="text" id="parameter"/>
<button id="go">Go</button>
</body>
Related
This combination of an open mailto window with a post form to test.php on one click does not work. Any suggestions?
<form id="myForm" action="test.php" method="post">
<input type="hidden" name="someName" value="helloworld" />
<a href="mailto:..."
onclick="document.getElementById('myForm').submit();">
Submit
</a>
</form>
Check below solution to ignore href attribute and focus on using onclick only to do what you need
function submit() {
window.open('mailto:mail#example.org', '_blank');
document.getElementById('myForm').submit();
return true;
}
<form id="myForm" action="test.php" method="post">
<input type="hidden" name="someName" value="helloworld" />
<a href="#" onclick="return submit();">
Submit
</a>
</form>
And if you need to use both href and onclick check below alternative solution
function submit() {
document.getElementById('myForm').submit();
return true;
}
<form id="myForm" action="test.php" method="post" onsubmit="alert('Ok')">
<input type="hidden" name="someName" value="helloworld" />
<a href="mailto:mail#example.org" target="_blank" onclick="return submit();">
Submit
</a>
</form>
#Wael: Thanks. The second solution is equivalent to this.
<form id="myForm2" action="test.php" method="post">
<input type="hidden" name="someName" value="helloworld" />
Submit 2
</form>
The missing target attribute was the issue.
In Firefox it works as required. In Chrome it leads to
1. Opens the mail client
2. Posts to test.php
3. Opens a new browser tab with url mailto:mail#example.org (and focus)
With your first solution it is the same. How to avoid 3.?
I am trying to use an embedded form from Mailchimp in my code, specifically the 'horizontal' style. I've had to edit the code a little in order to make it compatible with ES6, as I'm using GatsbyJS. The problem is that the form show up fine on my browser, but I can't type into the input field... why is this? and how could I fix this?
here is my code for the form:
<div className='row bottom-margin-small'>
<div className='newssub-wrapper col-sm-10 offset-sm-1'>
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css" />
<div id="mc_embed_signup">
<form action="https://fruitcakeblog.us17.list-manage.com/subscribe/post?u=d57c0ac89b6b66e99eb7cb07c&id=daea937c97" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" className="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll" style={{background: '#fff', clear: 'left', fontSize: '14px', width: '100%'}}>
<label for="mce-EMAIL">Subscribe to our mailing list</label>
<input type="email" value="" name="EMAIL" className="email" id="mce-EMAIL" placeholder="email address" required />
<div style={{position: 'absolute', left: '-5000px'}} aria-hidden="true">
<input type="text" name="b_d57c0ac89b6b66e99eb7cb07c_daea937c97" tabindex="-1" value="" />
</div>
<div className="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" className="button" />
</div>
</div>
</form>
</div>
</div>
</div>
I'm having the same issue and it turns out the Gatsby team is working on implementing support. There is a small React library from Julien Bouquillon called React Mailchimp Subscribe that might allow you to implement a form by building it using JSX instead of HTML that you copy/paste from the Mailchimp Form Builder.
I have a client that uses hubspot for their tracking and thank you pages. I have created a landing page using bootstrap and within the page I have two forms. Both forms are the same and I want them to go to the same thank you page. The client has provided me with an embedd code but I am not sure how I can bridge the gap. Below I have listed my form code and the embed code. I basically want the user fields to be submitted into hubspot and for it to trigger the thank you page but I am not entirely sure this is possible. Any help would be appreciated.
<div class="col-lg-12 contact-form">
<div class="container">
<div class="formContainer">
<form role="form">
<div class="form-group">
<div class="col-sm-6 left-field">
<input type="text" class="bottom-form" id="firstname" placeholder="First Name">
</div>
<div class="col-sm-6 right-field">
<input type="text" class="bottom-form right-field" id="lastname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="bottom-form email" id="email" placeholder="email">
</div>
<div class="col-sm-12">
<button type="submit" class="submit bottom-submit">Download Now</button>
</div>
</div>
</form>
</div>
</div>
</div>
Here is the hubspot embedd code.
<!--[if lte IE 8]>
hbspt.forms.create({
css: '',
portalId: '2030148',
formId: 'd9005302-a859-4a39-9d47-74d8a1d25fb0'
});
Are you just looking to set the redirect with the embed code? If so, here is the addition to the embed code:
portalId: 'xxxxxx',
redirectUrl: 'url goes here',
formId: 'd9005302-a859-4a39-9d47-74d8a1d25fb0'
I actually figured out a proper solution without having to do any redirects or hairy coding.
First I setup a local host, which was my biggest issue, this helps with getting the actual hubspot form to show within my page (using a local show the embedd code does not appear, although obvious to others, it took me a sec). Oh, I should mention that the code is not necessary.
Once you have it showing you basically inspect the element and then add to the classes that hubspot spits out get it to look that way you want too.
I'm trying to get the example shown here to work:
https://developer.paypal.com/webapps/developer/docs/classic/adaptive-payments/ht_ap-embeddedPayment-curl-etc/
However, I always get the error Payment can't be completed. This feature is currently unavailable.
This is the code, taken directly from PayPal's documentation (where {{PAY-KEY}} is a pay key you obtain from PayPal):
<html>
<head>
<script src="https://www.paypalobjects.com/js/external/apdg.js" type="text/javascript"></script>
</head>
<body>
<form action="https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/pay" target="PPDGFrame" class="standard">
<label for="buy">Buy Now:</label>
<input type="image" id="submitBtn" value="Pay with PayPal" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif">
<input id="type" type="hidden" name="expType" value="mini">
<input id="paykey" type="hidden" name="paykey" value="{{PAY-KEY}}">
</form>
<script type="text/javascript" charset="utf-8">
var dgFlowMini = new PAYPAL.apps.DGFlowMini({trigger: 'submitBtn'});
</script>
</body>
</html>
The same error occurs when you try to use this for Preapproval ([...]/flow/preapproval, request variable preapprovalKey), and also with the LightBox code sample.
What am I missing here ?
Contacted PayPal support and they apparently fixed it (again...).
After Im using jquery mobile to submit a form,
but after submition, and going back to form, all fields are not in default value any more. they showing data previously submitted.
(if I press f5, form will reset and works fine for another round only)
Im guessing something remain in browser cache.
Any Idea?
<!DOCTYPE html>
<html>
<head>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="./scripts/jquery.mobile-1.3.0.js"></script>
<link rel="stylesheet" href="./style/jquery.mobile-1.3.0.min.css" />
</head>
<body>
<?php if(!(isset($_GET["submit"]))){ ?>
<form action="thisPage.PHP?submit=yes" method="get" >
<input type="text" value="0" />
<input type="submit" value="Submit" />
</form>
<?php }else{ ?>
<a href="thisPage.PHP" > FINISHED</a>
<?php } ?>
</body>
</html>
Finally I found the simple and easy answer:
add following line into form tag:
data-ajax="false"
so it should be like this:
<form action="thisPage.PHP?submit=yes" method="get" data-ajax="false" >