I am using Amazon survey form template to create a survey.
however i would like to use validation.
I saw this question however i don't want to use the web services to create the hit but use their template.
How can I prevent the form from being submitted?
I found a way to do it:
I added a function to the submit button:
<script type='text/javascript'>
window.onload = function() {document.getElementById('submitButton').setAttribute('onclick', 'return validateForm()'); }
function validateForm() {
if (validate)
return true;
else
return false;
}
</script>
Here's an example of doing the validation with jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#submitButton').click(function() {
if ($('input[name=myField]').val() == '') {
alert('myField is required.');
return false;
}
return true;
});
});
</script>
Related
I am developing an app for BigCommerce, which i have to inject a Script into Order Confirmation page.
In the script, I want to read the current order detail, so i try this
<script>
function getOrderDetail(orderId) {
return fetch("/api/storefront/order/" + orderId, {
credentials: "include",
}).then(function (response) {
return response.json();
});
}
let ORDER_ID=123;
getOrderDetail(ORDER_ID).then(data=>{
// do this ,do that,
})
</script>
I don't find any docs related to get current Order_ID, I have inspected the HTML code and tried
function getOrderId() {
const orderIdRegex = /\s+orderId:\s'(\d+)',/;
return document.body.innerHTML.match(orderIdRegex)[1];
}
I know the code may break if there is a change in UI.
In Shopify, there is a global variable window.Shopify,
I am wondering if there is a better solution, or something similar to Shopify.
Update with correct answer
Thanks #MattCoy
<script>
function getOrderDetail(){
return fetch("/api/storefront/order/{{checkout.order.id}}", {
credentials: "include",
}).then(function (response) {
return response.json();
});
}
getOrderDetail().then(data=>{
// do this ,do that,
})
</script>
If this is a script in the Script Manager, you should have access to all the Stencil theme objects via Handlebars. In this case, try {{checkout.order.id}}.
So I have an iFrame that displays a four page pdf on my SharePoint site. This iFrame is very handy for displaying the PDF, but I would like to make it so that clicking anywhere within the frame will open the PDF in browser. I have tried implementing some different strategies using and tags but have not found anything to accomplish this goal. The code I am using for the iFrame is below.
Any suggestions would be welcome.
<iframe width="500" height="550" src="URLtoPDF"></iframe>
You can use below jQuery code on document ready if both domains are same (iframe and where it is located)
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('iframe').load(function () {
$(this).contents().find("body").on('click', function (event) {
window.open($(this).attr("src"), "_blank");
});
});
});
</script>
Use below code in case of simple javascript without any js file reference
<script type="text/javascript">
window.onload = function () {
var frame = document.getElementById('iframe');
frame.onload = function () {
var body = frame.contentWindow.document.body;
body.onclick = function () {
var src = frame.getAttribute("src");
window.open(src, "_blank");
};
}
}
</script>
iframe is the id of the iframe element
I want to disable the image link of edit using jquery in webgrid
my code is as follows.
grid.Column("Edit", format: id => new HtmlString(Html.ActionLink("[Edit]", "myactionname", "mycontrollername", new { id = id.Id }, new { #class="edit"}).ToHtmlString().Replace("[Edit]", "<img src=\"/images/edit_icn.png\" ... />")))
my jquery code is
<script type="text/javascript">
$(document).ready(function () {
alert("inside function")
$('.edit').attr("disabled", true);
alert("outside function");``
});
But the link is not getting disabled.. Please help me out.
How is the correct way to disable an input type="image" using jquery?
you can check out this stack overflow link it is similar to your question,May be it can help you
Go it working!!....
replaced my jquery code and it worked.
<script type="text/javascript">
$(function () {
$(".edit").click(function () {
return false;
});
});
Is there any working solutions to prevent Facebook Like Box to not breaking his container or something ? Have set the async to TRUE but still gets out. As I can see on stackoverflow there are issues only for fb:login_button, however I receive the same warning to console:
fb:like_box failed to resize in 45s
To sum up, here is my code, perhaps I am missing something.
HTML Tag
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
FB Initialization
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: <?php echo $this->config['facebook']['appId']; ?>,
status: true,
cookie: true,
xfbml: true
});
/* All the events registered */
FB.Event.subscribe('auth.login', function (response) {
// do something with response
alert("login success");
});
FB.Event.subscribe('auth.logout', function (response) {
// do something with response
alert("logout success");
});
FB.getLoginStatus(function (response) {
if (response.session) {
// logged in and connected user, someone you know
alert("login success");
}
});
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
FB Like Box
<div class="facebook-plugin">
<div class="fb-like-box" data-href="https://www.facebook.com/****" data-width="346" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
</div>
This is it. Any help would be appreciated. Thanks in advance!
Accordingly to new Facebook API upgrade, they give up to Like Box, therefore this is no longer an issue.
With the release of Graph API v2.3, the Like Box plugin is deprecated. Please use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites.
If you do not manually upgrade to the Page Plugin, your Like Box plugin implementation will automatically fall back to the Page Plugin by June 23rd 2015.
Page Plugin link is https://developers.facebook.com/docs/plugins/page-plugin
I would like my webpage to render faster. Based on this article, I understand that the page renders when the 'load' event is fired.
When I look at the Network Tab of my Chrome browser, I see that the 'load' event is fired after an ajax call to a PHP script returns.
Webpage is live at http://www.99like.com/index.php
=> Is there any way to get the page to render before the PHP script is called?
Following is the extract of the code which I think is relevant for the question:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript">
var ajax_load = "<img class='loading' src='images/load.gif' alt='loading...' />";
var inputForm = "<div class='shadow'><form type='submit' onsubmit='displayChart(); return false'><input id='searchBox' type='text' size='30' value='search keyword' /></form></div>";
var chart = "<div id='chart' class='shadow'></div>";
var chartPage = inputForm + chart;
$(function ()
{
exampleChart();
});
function exampleChart() {
$('#searchBox').val("hotel"); // nice example
displayChart ();
}
function displayChart () {
var keyword = $('#searchBox').val();
var chart = new Highcharts.Chart({ ... });
chart.showLoading();
var phpFunctionURL = "getChartData.php";
var DataSeries;
$.ajax( {
url: phpFunctionURL,
dataType: 'json',
async: false,
data: { ... },
success: function(json) { DataSeries = json; }
} );
}
</script>
A few remarks:
Make sure all your JavaScript are at the bottom of the page, including JQuery and Google Analytics code
Your web-page is missing the end tag
If needed, you could wait for the onLoad event to launch your AJAX request instead of the DomReady event, this will speed up the page rendering.
Looks like your AJAX request is synchronous. Making it asynchronous will solve the problem.
$.ajax( {
url: phpFunctionURL,
dataType: 'json',
async: true, // Changed from false to true
data: { ... },
success: function(json) { DataSeries = json; }
} );