Problem:
Pressing Enter does not submit the <form>. The <input> is hooked up to Google Places API, and submit works if it's a plain <input> field.
HTML:
<form>
<input type="text" name="query" id="geocode_query" />
<!-- Working without id attribute:
<input type="text" name="query" />
-->
<input type="submit" value="Submit" />
</form>
Backbone (event: "geocode:result #geocode_query": "doSomething"):
setLocation: (event, result) ->
#location = result
See anything wrong? Thanks so much!
Related
I have an HTML form like the following:
<form method="GET" name="search" action="/api">
Name: <input type="url" name="url" />
<input type="submit" value="Search"/>
</form>
If I input some value in the URL field like www.google.com?teste=a, I receive on my server-side the following value from the parameter www.google.com teste=a (notice the question mark disappeared).
Is it possible to fix this without using JavaScript to receive the question mark on the server-side?
Without changing the form method to POST you could possibly use Javascript to modify the value of the URL field just prior to submitting the form itself.
document.forms.search.bttn.addEventListener('click',function(e){
e.preventDefault();
this.previousElementSibling.value=encodeURIComponent(this.previousElementSibling.value);
this.parentNode.submit()
});
<form method="GET" name="search" action="/api">
Name: <input type="url" name="url" />
<input type="submit" name='bttn' value="Search" />
</form>
I got this form inside an iframe and want to know where the post actually goes. When I go to the network tab, it only shows the src of the iframe and not where the POST request was sent.
<iframe id="popupOverlay_iframe" name="popupOverlayWindow" src="/cgi-bin/admin/radio_contact.cgi?action=add&member_org_id=46757"></iframe>
The page inside this iframe contains the following:
<form name="add_member" method="post" onsubmit="return submitForm(this);" _lpchecked="1">
<label>
<input type="text" name="email.email" id="email.email" value="" class="init_focus" placeholder="Email:">
</label>
<input type="hidden" name="action" id="action" value="add">
<input type="hidden" name="step" id="step" value="email">
<input type="hidden" name="type" id="type" value="employee">
<input type="hidden" name="member_org_id" id="member_org_id" value="46757">
<input type="submit" name="submit" id="submit" value="Next">
<input type="hidden" name="redirect" id="redirect" value="https://stagemms.nationalmediacalls.com/cgi-bin/admin/radio_detail.cgi?action=show&id=46757">
</form>
On submit, the JavaScript function submitForm is called and its result is returned.
If submitForm and thus the snippet returns false, the form won't be submitted. (The JS might do it's own request.)
If submitForm and thus the snippet returns true, the form will be posted to the current page (/cgi-bin/admin/radio_contact.cgi?action=add&member_org_id=46757) because no action was specified.
In this situation, you should have seen something like this in your network tab:
(/foo.html is url of the outside page, and /foo.cgi?action=add&member_org_id=46757 is the url of the page in the iframe.)
I'm trying to set up an iframe-based payment gateway for a WooCommerce online store. The instructions I got from the bank say that I need to "generate a post action inside of the contained IFRAME on the page."
The result should be that when the checkout page loads, inside the iframe I should be seeing fields for the customer to enter their credit card information.
But I don't understand how to take the form below (from the documentation) and automatically post it to the iframe.
Payment Gateway Documentation:
To initiate a transaction, your system must generate a POST action inside of the contained IFRAME on the page.using the format below to the URL designated for your system. You will be provided with a URL for testing and live transaction processing by the processor when your merchant accounts have been configured.
Example:
<form ACTION="https://tranpage/demogwtxnif/txnif.aspx" METHOD="post">
<input type="hidden" NAME="MERCHKEY" VALUE="MYDEMOMERCHANTKEY" />
<input type=”hidden” NAME=”TRANTYPE” VALUE=”AUTH”/>
<input type=”hidden” NAME=”AMT” VALUE=”10.00” />
<input type=”hidden” NAME=”CURR” VALUE=”CAD” />
<input NAME=”invoice” VALUE=”DemoSale1” />
<input NAME=”tranid” VALUE=”123456789” />
<input NAME=”amt” VALUE=1.00 />
<input NAME=”curr” VALUE=”USD” />
<input NAME=”URLAPPROVED” VALUE=”http://www.webstore.com/cgishl/goodpayment.exe?res=#RC#&fres=#FC#&ac=#APP#&ref=#REF#&tran=#TRANID#&invoice=#INVOICE#&err=#EM#” />
<input NAME=”URLOTHER” VALUE=”http://www.webstore.com/cgishl/paymentincomplete.exe?res=#RC#&fres=#FC#&ac=#APP#&ref=#REF#&tran=#TRANID#&invoice=#INVOICE#&err=#EM#” />
<INPUT name=SUBMIT type=submit value="Pay Now">
</form>
Have the form's target attribute match the iframe's name attribute.
<form target="my-iframe" ACTION="https://tranpage/demogwtxnif/txnif.aspx" METHOD="post">
<input type="hidden" NAME="MERCHKEY" VALUE="MYDEMOMERCHANTKEY" />
<input type=”hidden” NAME=”TRANTYPE” VALUE=”AUTH”/>
...
</form>
<iframe name="my-iframe" src="https://tranpage/demogwtxnif/txnif.aspx"></iframe>
Source: https://css-tricks.com/snippets/html/post-data-to-an-iframe/
There is working example (you need to add a simple js line to submit your form):
var iframe = document.createElement('iframe');
var html = `<body>
<form id="form" action="http://example.com" method="post">
<input type="text" name="email" value="mail#example.com"/>
<input type="submit" />
</form>
<script>document.getElementById("form").submit();</script>
</body>`;
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);
In a page, for getting field values I didn't use form tag, instead used Anchor tag's click event to get the values and used AJAX call to pass it to server.
Later tried out the HTML 5 pattern validation, it didn't work out; after so much try added form tag and then modified "anchor" to "button", then it worked.
Old
<div id="div1">
<input type="text" id="message" pattern="[a-zA-Z]{3}" required title="Enter valid Station" />
<a id="add" onclick="addMessage();">Add</a>
</div>
New
<form id="addMessage">
<div id="div1">
<input type="text" id="message" pattern="[a-zA-Z]{3}" required title="Enter valid Station" />
<button id="add">Add</button>
</div>
</form>
Is using a form tag and form submission the only way to trigger Pattern validation or are there any workarounds?
There's a nice overview of constraint validation in HTML5 on HTML5Rocks.
You can manually validate fields by calling the checkValidity() method on the DOM element in JavaScript:
document.getElementById('add').addEventListener('click', function() {
if (document.getElementById('message').checkValidity()) {
window.alert('valid station name');
// addMessage();
} else {
window.alert('invalid station name!');
}
});
<div id="div1">
<label>
Station
<input type="text" id="message" pattern="[a-zA-Z]{3}" required title="Enter valid Station" maxlength="3">
</label>
<a id="add" role="button">Add</a>
</div>
And also for reference: HTMLInputElement
I need to add a path to a file to the form url before submitting. I created therefore a text field and want to add the text to the url without php.
can somebody help?
the existing code:
<form action="http://127.0.0.1:8080/WebService1/HTTPMethod_1?new_value=value" method="post">
<input type="text" value="" size="30" name="filename">
<input type="submit" name="submit" value="Submit" class="continue-button">
</form>
look into using hidden input fields. these allow you to send form data, but not necessarily show a form field.
for instance:
<script type="text/javascript">
function setFormAction() {
document.myForm.action = document.getElementById("url").value;
}
</script>
<form name="myForm" method="POST" action="default.php">
<input type="value" name="url" id="url" />
<input type="submit" name="submit" onclick="setFormAction();" />
</form>