Sorry if I'm posting this code fence wrong. I am a senior citizen (noob) writing my first html.
I am writing a short script to control a ptz ip cam (192.168.1.247) for my raspberry pi.
The ptzLeftSubmit() and ptzRightSubmit() both work when I hit the buttons that call them.
The ptzloc1 and ptzloc2 do not work when I hit them.
The ptzloc1 and ptzloc2 html param.cgi call works in my browser window but not when I push the button.
Am I not allowed to pass the cmd parameter in a script? What am I doing wrong with ptzloc1 ptzloc2 etc?
function ptzLeftSubmit()
{
form1.action="http://192.168.1.247/web/cgi-bin/hi3510/ytleft.cgi";
form1.submit();
}
function ptzRightSubmit()
{
form1.action="http://192.168.1.247/web/cgi-bin/hi3510/ytright.cgi";
form1.submit();
}
function ptzloc1()
{
form1.action="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&-act=goto&-status=1&-number=0";
form1.submit();
}
function ptzloc2()
{
form1.action="http://192.168.1.247/web/cgi-bin/hi3510/param.cgi?cmd=preset&-act=goto&-status=1&-number=1";
form1.submit();
#then later I do this
<body onLoad="load()">
<form name="form1" method="get" target="test">
</form>
<div style = "position:absolute; left:80px; top:20px;">
<p>
<input type="button"; value="∧" name="B3" onClick="ptzUpSubmit()">
<input type="button" ; value="∨" name="B2" onClick="ptzDownSubmit()">
<input type="button" ; value="<" name="B1" onClick="ptzLeftSubmit()">
<input type="button" ; value=">" name="B0" onClick="ptzRightSubmit()">
<button type="button" ; name="B4" onClick="location.reload()"><script type="text/javascript">document.write("REFRESH");</script></button>
</p>
</div>
<div style = "position:absolute; left:400px; top:20px;">
<p>
<input type="button"; value="1" name="B4" onClick="ptzloc1()">
<input type="button"; value="2" name="B5" onClick="ptzloc2()">
#etc....
Related
Hello I'm trying to get my contact form to display a thank you message after the message has been sent.
I looked around but the stuff I find looks more complex than what I think i need.
I think it's something i'm missing about the event listener and how this form works.
Here's my code:
.thanks {
display: none;
}
<div class="form-wrap">
<form class="contact-form" action="https://getsimpleform.com/messages?form_api_token=aa0a1c58e87ea8816ba9ff7d7a71d0ef" method="post">
<!-- all your input fields here.... -->
<div class="name-email">
<input class="contact-field contactform-name" type='text' name='name' placeholder="Name" required/>
<input class="contact-field contact-form-email" type="email:" name="email" placeholder="e-mail" value="" required>
</div>
<textarea class="contact-field" name="message" rows="20" cols="80" placeholder="Your Message" required></textarea>
<input class="contact-field submit" type='submit' value='Send' />
</form>
</div>
<div class="thanks">
<h1>Thanks for the message!</h1>
</div>
<script>
function displayThanks() {
document.querySelector(".thanks").style.display = "block";
document.querySelector(".contact-form").style.display = "none";
}
document.querySelector(".submit").addEventListener("submit", displayThanks)
</script>
I could make it work on click, but that would mean that even if they don't send a message and just click submit they will get thank you (FOR WHAT!?)
Thanks!
M
You are mixing client side logic with server side logic. It's hard to answer your question because we don't know, what the action "action="https://getsimpleform.com/messages?form_api_token=aa0a1c58e87ea8816ba9ff7d7a71d0ef" in your form tag is doing.
It might be usefull to validate the form, before you consider to submit it. You can do this by using the click event of the submit button in combination with preventDefault like this (Just an Example, you could even use RegEx for emails and stuff):
document.querySelector(".submit").addEventListener('click', function(e) {
var userInputName = document.getElementsByName("name")[0].value,
userInputEmail = document.getElementsByName("email")[0].value,
userInputMessage = document.getElementsByName("message")[0].value;
if (userInputName.length > 0 && userInputEmail.length > 0 && userInputMessage.length > 0)
{
document.querySelector(".thanks").style.display = "block";
document.querySelector(".contact-form").style.display = "none";
}
else
{
e.preventDefault();
}
}, false);
I would recommend to use IDs instead of names though, because IDs are unique and don't require a node list or ambiguous jQuery. Than you can use something like this: userInputName = document.getElementById("name").value;
And don't forget to use the right CSS for your logic. Like:
.thanks {display: none;}
I am working on a project using symfony.I want to use Sonata Media bundle,in order to upload image.
Unfortunately I don't knwo how to use it or how to start.
I havethis form :
<form action="" method="POST" class="filePhotoForm form-inline" role="form">
<div class="form-group">
<input type="button" class="btn btn-start-order browse" value="Browse">
<input type="text" class="form-control file-name" readonly="readonly" placeholder="No file selected">
<input type="file" name="filePhoto" id="filePhoto" class="hidden file-upload">
</div><br/><br/>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
And the code in controller:
public function changePictureAction(Request $request)
{
return $this->render('MedAppBundle:Profile:change_picture.html.twig');
}
Can you help with the basics of uploading?
Thank you!
i have made a custom function for that
protected function saveImageMediaBundle($file,$context = 'default')
{
$mediaManager = $this->get('sonata.media.manager.media');
$media = new Media();
$media->setContext($context);
$media->setProviderName('sonata.media.provider.image');
$media->setBinaryContent($file);
$mediaManager->save($media);
return $media;
}
and get file by this
$file = $request->files->get('newsImage',null);
$media = $this->saveImageMediaBundle($file,'news');
I'm working with meteor#1.1.10 and twbs:bootstrap#3.3.5
I can get a modal window to spawn, close, and register a button has been clicked. I cannot get it to read any information from a form though. It just closes. I included a console message and it never shows up to either the browser or the command prompt.
Is there a way to do this without including another package? I've included my modal HTML template and Javascript. I'm hoping it's just something missed in the code.
Below is the HTML:
<template name="emodal">
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Spends Email Details</h4>
</div>
<div class="modal-body">
<form class="emailspends">
<label for="input">Recipient:</label>
<input type="text" name="emailto" required>
<label for="input">Character Name:</label>
<input type="text" name="charname" required>
<input type="submit" id="sendemail" class="email" value="Email Spends" data-dismiss="modal">
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</template>
Below is the Javascript:
Template.emodal.events({
"submit .emailspends": function (event) {
console.log(Meteor.user().emails[0].address);
// Prevent default browser form submit
event.preventDefault();
// Get value from form element
//var emailto = event.target.emailto.value;
var emailto = event.target.emailto.value;
var charname = event.target.charname.value;
var title = "Experience spends for " + charname;
Meteor.call('sendEmail', emailto,
'zbottorff#uwalumni.com', title,
'Yup, modal testies.');
// Clear form
event.target.emailto.value = "";
event.target.charname.value = "";
}
});
Update: Realized I should include this, but I did make sure I could get a submit-able template without it being in a modal window. Now I want to turn it into a modal and it's not submitting.
Bah! I found it just after I posted this.
I had too many parts to my submit button. I removed the "Class" and "id" parts, changed my Javascript to look for a 'submit form' event instead. Voala! Got the bugger to work.
I want to create a small count button but don't know how to make it in JavaScript...
Here's the code :
HTML
<div id="input_div">
<input type="text" size="25" value="0" id="count">
<input type="button" value="-" id="moins">
<input type="button" value="+" id="plus">
</div>
It must increase AND decrease the number in the input[type=text] when click on the -/+ button.
Can someone help me ?
You'd need two things.
Variables - which are the way to store information in JavaScript
Event handlers, which are the way to react to events in JavaScript
First, let's create a script tag, and put a JavaScript count variable in it, we'll put it in the bottom of our body tag:
<script>
var count = 0;
</script>
Now, we want to create a handler, that is something that executes whenever the plus and minus signs are clicked
<script>
var count = 0;
function plus(){
count++;
}
function minus(){
count--;
}
</script>
We've created two functions to call when the buttons are clicked, but we do not update the value in the HTML, or call them yet, let's update the value in the HTML.
We'll do so by document.getElementByID for the element to update and then change its value. Our script tag should look something liks this:
<script>
var count = 0;
var countEl = document.getElementById("count");
function plus(){
count++;
countEl.value = count;
}
function minus(){
count--;
countEl.value = count;
}
</script>
One last thing, we need to tell the elements in the DOM to execute those handlers.
<div id="input_div">
<input type="text" size="25" value="0" id="count">
<input type="button" value="-" id="moins" onclick="minus()">
<input type="button" value="+" id="plus" onclick="plus()">
</div>
We've added them as event handlers to the DOM reacting to a click on the buttons, completing the task.
Now, here are some things we can improve:
We can use addEventListener to avoid polluting our DOM, and create unobtrusive JavaScript.
We can use a more advanced tool like KnockoutJS to handle binding the value we have to the DOM element instead of updating it ourselves.
We can read Eloquent JavaScript and learn more about how the language works!
Good luck, happy JavaScripting, and happy learning :)
DEMO FIDDLE FOR JAVASCRIPT
code html -
<div id="input_div">
<input type="text" size="25" value="0" id="count" />
<input type="button" value="-" id="minus" onClick = "doMinus();" />
<input type="button" value="+" id="plus" onClick = "doPlus();" />
</div>
code javaScript -
function doMinus(){
document.getElementById("count").value = --document.getElementById("count").value;
}
function doPlus(){
document.getElementById("count").value = ++document.getElementById("count").value;
}
jQuery Version
DEMO FIDDLE FOR JQUERY
code html -
<div id="input_div">
<input type="text" size="25" value="0" id="count" />
<input type="button" value="-" id="minus" />
<input type="button" value="+" id="plus" />
</div>
code jQuery -
$('#minus').click(function(){
$("#count").val(parseInt($("#count").val())-1);
});
$('#plus').click(function(){
$("#count").val(parseInt($("#count").val())+1);
});
U can write some script as shown
<script>
function increase(){
var a = 1;
var textBox = document.getElementById("count");
textBox.value = a;
a++;
}
</script>
<body>
<button type="button" onclick="increase()">+</button>
<input type="text" id="text">
</body>
similarly u can do it for - decrease button
in this case, I use input type range that display a slider :
<input type="range" id="myInputRange" value="15" min="0" max="50" step="1" onchange="document.getElementById('output').textContent=value" ><span id="output">15</span>
(instead of input type number that is not supported by IE)
This seems pretty simple.
(function() {
var count = 0;
var minusButton = document.getElementById("moins");
var plusButton = document.getElementById("plus");
var countBox = document.getElementById("count");
minusButton.onclick = function(e) {
countBox.value = --count;
};
plusButton.onclick = function(e) {
countBox.value = ++count;
};
})();
I am starter with Play Framework. I got a problem when i passed parameters.
I want to pass a collection from view to controller. And i do not know how to do this. I always get "null" when i get a collection from view.
My code below:
Code in controller:
public static void create(List<Book> books) throws Exception {
for(Book book : books){
System.out.println(book.get(0).author) // i got null :(
}
}
Code in HTML
Book 1:
<input type="text" name="books.author" />
<input type="text" name="books.title" />
Book 2:
<input type="text" name="books.author" />
<input type="text" name="books.title" />
When i submit, i want to add 2 records into database include Book1 and Book2. Please support me
Thanks
You can make this work by simplying add the array indicator to your HTML code
Book 1:
<input type="text" name="books[0].author" />
<input type="text" name="books[0].title" />
Book 2:
<input type="text" name="books[1].author" />
<input type="text" name="books[1].title" />
I have tested this solution, and it works fine.
Also note that your println will not compile, as you are calling get(0) on the Book object, and not the List object. If you just println book.author, it outputs the author as required.
In case anyone needs an example of the Javascript for dyanmically adding and removing books (JQUERY needed):
<script type="text/javascript">
$(document).ready(function() {
var bookCount=0;
$('#btnAddBook').click(function() {
bookCount++;
//newElem = go up a to the parent div then grab the previous container
var newElem = $(this).parent().prev().clone().attr('id', 'book[' + bookCount + ']');
//for each input inside the div, change the index to the latest bookCount
$(newElem).find("input").each(function(){
var name = $(this).attr('name');
var leftBracket = name.indexOf("[");
var rightBracket = name.indexOf("]");
var beforeBracketString = name.substring(0,leftBracket+1);//+1 to include the bracket
var afterBracketString = name.substring(rightBracket);
$(this).attr('name', beforeBracketString + bookCount + afterBracketString);
});
//insert it at the end of the books
$(this).parent().prev().after(newElem);
$(newElem).find("input").each(function(){
$(this).attr('id', $(this).attr('id') + bookCount);
});
//enable the remove button
$('#btnRemovebook').removeAttr('disabled');
//If we are at 16 divs, disable the add button
if (bookCount == 15)
$(this).attr('disabled','disabled');
});
$('#btnRemoveBook').click(function() {
bookCount--;
//remove the last book div
$(this).parent().prev().remove();
//in case add was disabled, enable it
$('#btnAddbook').removeAttr('disabled');
//never let them remove the last book div
if (bookCount == 0)
$(this).attr('disabled','disabled');
});
});
</script>
<!-- HTML Snippet -->
<div id="book[0]">
<label> Book: </label>
<input type="text" name="books[0].author" value="Author" />
<input type="text" name="books[0].title" value="Title" />
</div>
<div>
<input type="button" id="btnAddbook" value="Add another book" />
<input type="button" id="btnRemovebook" value="Remove last book" disabled="disabled" />
</div>
<!-- REST of the HTML -->