Javascript templates
<script type="text/x-jsrender" id="questionTmpl">
<li class="question">
<input type="text" name="survey[question]" />
<button class="add_answer">Add Answer</button>
<ul></ul>
</li>
</script>
<script type="text/x-jsrender" id="answerTmpl">
<li class="answer">
<input type="text" name="survey[answer]" />
</li>
</script>
Jquery
$(document).ready(function () {
$("#add_question").click(function(e) {
e.preventDefault();
$("#questionForm ol").append($.templates("#questionTmpl").render())
});
$("#questionForm").on('click', '.add_answer', function(e) {
e.preventDefault();
console.log()
$(this).parent().find("ul").append($.templates("#answerTmpl").render())
});
});
erb
<div class="container">
<br>
<form action="/surveys" method="post" id="questionForm">
<input type="text" name="title" placeholder="survey name">
<button id="add_question"> Add a question </button>
<ol></ol>
<input type="submit" value="create" id="submit_form">
</form>
</div>
I am making a survey application in sinatra. The way I currently have it set up is to using jsrender, render templates for adding questions and adding answers. My question is regarding the names of the input text fields in the javascript templates. Basically I was wondering if there is a way to set up the parameter names so that sinatra will collect them all as a hash, using the survey[question] as a key, and an array of the survey[answer] parameters as an array of values for said key.
If you POST a form, then Sinatra automatically gets all of the values from the post in a variable params.
Try this and you should see what is going on:
get '/surveys' do
puts params.inspect
end
Related
I want to pull data using JavaScript and show it in console. I don't know what I did wrong.
main.js
// ADD TO CART
$("#addToCartBtn").on('click',function(){
var _qty=$("#productQty").val();
var _productId=$(".product-id").val();
var _productName=$(".product-name").val();
console.log(_productId,_productName,_qty);
});
I am using django framework to write backend
detail.html
<div class="product-btns">
<div class="qty-input">
<span class="text-uppercase">Ədəd: </span>
<input class="input" type="number" value="1" id="productQty">
</div>
<input type="hidden" class="product-id" value="{{product.id}}">
<input type="hidden" class="product-name" value="{{product.name}}">
<button class="primary-btn add-to-cart"><i class="fa fa-shopping-cart" id="addToCartBtn"></i> Səbətə at</button>
</div>
The problem is probably that the element that has id="addToCartBtn" is not really the button but the <i> element - which has no content and therefore no width. So it is never clickable.
{%extends "layout.html"%}
{%block content%}
<form action="{{ url_for("plot")}}" method="post">
<label for="CompanyCode">Stock Symbol:</label>
<input type="text" id="CompanyCode" name="ccode" placeholder="Stock Symbol">
<label for="start_date">Start Date: </label>
<input type="date" id="start_date" name="start_date">
<label for="end_date">End Date:</label>
<input type="date" id="end_date" name="end_date">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<script type="text/javascript" src="{{cdn_js | safe}}" integrity="sha384-T2yuo9Oe71Cz/I4X9Ac5+gpEa5a8PpJCDlqKYO0CfAuEszu1JrXLl8YugMqYe3sM" crossorigin="anonymous"></script>
<div class = "plot">
<h1> This is the plot page </h1>
</div>
</script>
{{script1 | safe}}
{{div1 | safe}}
1) <div data-include="C:/Users/saiyyam/Stocks_site/Demo/template/plotdata.html"></div>
2) <div class="xyz">
</div>
{%endblock%}
<script type="text/javascript">
$(function(){
$(class="xyz").load("plotdata.html");
});
</script>
I have tried using 2 methods but none of them worked would appreciate if you can help me out. The code above the two methods is plotting some graphs so that is no way related to importing files in HTML. And yes i hav used both the methods separately but they didn't work
If you want to just move to a new html page, then using javascript, you can add an onclick attribute to your button <button onclick="window.location.href='./layout.html'" type="submit">Submit</button> it might work im not sure just proposing another way :)
It works but not with this setup.. thank you CORS >:{
Check out my repl for an example since it only loads pages with same origin as it
function htmlLoader(path,element){
var xhr=new XMLHttpRequest()
xhr.open('GET',path,true)
xhr.send()
xhr.onload=function(){
element.innerHTML=xhr.response
console.log("Page Successfully Loaded from",path)
}
xhr.onerror=function(err){console.error("Either due to this being a sandbox(meaning CORS blocked) or the path itself is invalid/rejects returning the call, the request has FAILED")}
}
<input id="addPath" />
<button onclick="htmlLoader(document.getElementById('addPath').value,document.getElementById('placeHTML'))">Add HTML from Path</button>
<div id="placeHTML"></div>
This is my Index.cshtml file (I'm learning MVC .NET), and when I click on the Add button to add a new user, this user is not added when I go and check my Api.
I know that both the route (api/users) and the Json object are correct, and the script is being rendered.
I'am using Visual Studio 2017 for Mac and my Api service is Service Stack.
#model dynamic
#{
ViewBag.Title = "Protein Tracker";
Layout = "../Shared/_Layout.cshtml";
}
#section scripts
{
<script type="text/javascript">
function AddNewUser(){
var goal = $('#goal').val();
var name = $('#name ').val();
$.post("api/users", { 'Name' : name, 'Goal' : goal });
}
</script>
}
<h2>Protein Tracker</h2>
<div>
<label for="select-user">Select a user</label>
<select id="select-uder"></select>
</div>
<hr /> <!-- horizontal rule -->
<div>
<h2>Add new user</h2>
<label for="name">Name</label>
<input id="name" type="text" /><br />
<label for="goal">Goal</label>
<input id="goal" type="text" /><br />
<input id="add-new-user-button" type="button" value="Add" onclick="AddNewUser()" />
</div>
Thank you for the help guys, I tried everything everyone suggested, but when I used the Chrome WebInspector (like #mythz suggested) I discovered that "$" was not defined, so I understood that my code was not being recognized as JQuery or something like that. And when I added the following line of code it worked as expected:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
I have a form that I have two buttons on. One button should take the user to one php script and the other button would take the user two a different php script. However for some reason the buttons aren't doing anything. Here is the code.
<script language="Javascript">
function OnButton1()
{
document.contactform.action = "../scripts/email-info.php"
// document.Form1.target = "_blank"; // Open in a new window
document.contactform.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.contactform.action = "../scripts/email-info2.php"
//document.contactform.target = "_blank"; // Open in a new window
document.contactform.submit(); // Submit the page
return true;
}
</script
Then here is the actual form code:
<form id="contact-form" name="contactform" method="post">
<fieldset>
<div id="holder">
<div id="formLeft">
<div class="txtlabel">Name* </div><div class="input-bg"><input type="text"
name="name" id="name" required></div>
</div>
</div>
<div id="msgbox">
<div class="txtlabel">Tell Us About Your Business Needs</div>
<div class="message-bg">
<textarea name="message" id="message" rows="9" cols="56" required></textarea><input
name="formpage" type="hidden" value="<?=$pagename;?>" />
</div></div><div style="clear:both"></div><br /><br />
<input src="/submitbtn.jpg"
name="submit" value="View Now" class="submit-button" onclick="OnButton1();"/>
<input src="/submitbtn.jpg"
name="submit" value="Download Now" class="submit-button2" onclick="OnButton2();" />
</fieldset>
</form>
I've removed some of the submission fields to make it more easily viewable. But I get nothing when I click either button...Any thoughts??
problem is in input:
<input src="/submitbtn.jpg"
name="submit" value="View Now" class="submit-button" onclick="OnButton1();"/>
When you have a form:
document.contactform.submit
Javascript returns the input with name submit, not the submit function.
You could change the name of the input:
<input src="/submitbtn.jpg"
name="yourName" value="View Now" class="submit-button" onclick="OnButton1();"/>
Also, your inputs are not buttons, check this.
Update
This question mentions HTML5 formaction attribute:
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
I'm surprised no one mentioned formaction. It is a legal attribute (in HTML5) for the input and button tag in submit/image state and can be used to send form data to a different action page. http://mdn.beonex.com/en/HTML/Element/input.html (it is also valid in button too).
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
In case you need to support IE9-, you simply can polyfill this, using webshims.
<script src="webshims/polyfiller.js"></script>
<script>
webshims.polyfill('forms');
</script>
<!-- now it also works with IE8/9 and other legacy browsers -->
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
The reference to your form is
document.forms.contactform
and not
document.contactform
So, for example, the submit button should be:
document.forms.contactform.submit();
// ^^^^^
The same correction should be applied to other references.
When I have a form with two radio buttons in Meteor, the first value is always returned in the .val() call. What is the correct way to access which radio button is checked?
Here is my sample code:
testRadioButtons.html:
<template name="testRadioButtons">
<form class="main">
<div class="control-group">
<div class="controls">
<input name="insuranceDecision" type="radio" value="NoInsurance"/>   Don't Buy Insurance<br><br>
<input name="insuranceDecision" type="radio" value="BuyInsurance"/>   Buy Insurance<br><br>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
</form>
</template>
testRadioButtons.js
Template.testRadioButtons.events({
'submit form': function(e) {
e.preventDefault();
console.log('running form submit')
decision = $(e.target).find('[name=insuranceDecision]').val();
// console.log($(e.target).find('[name=insuranceDecision]'));
console.log("decision: " + decision); // ZZZZZ Why is NoInsurance always displaying, even when the other radio button is checked.?
Meteor.Router.to('happyPage');
}
});
And the following are needed to make what I wrote run but do not do anything important.
main.html
<head>
<title>testRadioButtons</title>
</head>
<body>
{{renderPage}}
</body>
router.js
Meteor.Router.add({
'/': 'testRadioButtons',
'/happyPage' : 'happyPage'
})
happyPage.html
<template name="happyPage">
<p> Happy page </p>
<p><a href={{testRadioButtonsPath}}>Test Radio Buttons Again</a></p>
</template>
I think this is the answer:
https://stackoverflow.com/a/4196937/233382
I have to loop over the individual elements and find the one that is "checked".