Menu
  • HOME
  • TAGS

Create two HTML Forms next to each other

Tag: html5,forms,twitter-bootstrap-3

I am new to HTML. I am wondering if you could have two forms setting next to each other in parallel in HTML. I have generated this sample GUI with Tkinter and I want to generate a HTML file for the GUi with Bootstrap style.

GUI

Best How To :

Something like this would do it: (The borders are just so you can see the effect.)

div
{
  border: 1px solid red;
}

#left
{
  float: left;
  width: 64%;
}

#right
{
  float: right;
  width: 35%;
}
<div id="left">Left Stuff</div>
<div id="right">Right Stuff</div>

javascript onblur onMouseOver calculate tax and autofill form input

javascript,php,html,html5,forms

First add an ID to your elements (this makes referencing the elements with JS easier). Ex <input name="cost" type="text"> becomes <input name="cost" ID="cost" type="text"> You need to add a script tag to house the JS code like this <script> var taxPerc = .19; document.getElementById("cost").onblur = function(){ document.getElementById("costplustax").value = parseFloat(document.getElementById("cost").value) *...

Having Users IP Address Showing In My Email Form [duplicate]

php,html,forms,joomla

You can't be sure of the real IP of the person using your email form because they could be behind a proxy or VPN, but this is a way to get the best candidate IP address at the time of the visit (ref): function getUserIP() { $client = @$_SERVER['HTTP_CLIENT_IP']; $forward...

Load javascript in consecutive order after browser load event

javascript,jquery,html,html5,browser

You're not the first to have this problem, thankfully. There's a lot of difficult solutions around this problem, including using a module loader as suggested in the comment (which I agree is the best long term solution, because they account for more browsers and flexibility, but it's a lot to...

Rails: get f.range_field to submit null or nil as default value

ruby-on-rails,forms

You can just add a hidden checkbox value to judge whether user select or not. = f.range_field :content, :value=> nil, :class=> "question-field percentage", :step => 10, :in => 0..101, :data => {:question => question.id = check_box_tag :range_clicked, true, false, style:'display:none;' and then add a js function to tell whether user...

Using Aria to make a div table accessible

html,html5,wai-aria

I don't know if this will actually work considering these roles are intended for real tables. Using an actual table would be a much better idea. Anyway, your roles could be improved. Looks like your columnheader context is wrong. The header row should use the row role: <div class="Heading" role="row">...

How can I make a DIV element Fixed but non-Scaleable?

html,css,html5

As it is fixed it will not react to the parent div. So to fix it make the wrapper fixed instead that way you can center it and your content will adjust around the parent i.e wrapper. I made a new wrapper inside of your wrapper and called it navWrapper;...

Saving image to localstorage - canvas

javascript,html5,html5-canvas

If the height or width of the canvas is 0, the string "data:," is returned. This is most likely the cause for some images to fail to receive a proper dataUrl. Check your img elements and/or scripts to obtain and set the width and height of the canvas. The...

Correct PHP contact form syntax? [duplicate]

php,forms,validation

The first time you load the form, $_POST will not have anything populated. Try changing if ($_POST["submit"]) { to if (isset($_POST["submit"])) { to determine if the form was in fact submitted and continue accordingly....

Javascript/jQuery form validation

javascript,jquery,forms,validation

Add an onchange event to your text inputs that will remove the error message. Rather than making a count of valid fields, I would also check for the existence of error messages. This will make it easier to add more fields to your form. function checkName(e) { //gather the calling...

PHP+HTML: file not loaded from form

php,html,forms

You must use enctype="multipart/form-data" <form name="item" method="post" enctype="multipart/form-data"> ...

validation of AngularJS direcrives

angularjs,html5,html-validation

data- prefix can be used by any directive and the underlying directive name normalization process takes care of matching the directive attribute declaration with the directive implementation. More details about the normalization process is available in the directive user guide under section "Matching Directives". Hence adding data- prefix to to...

Prevent bootstrap 3 tab from stacking when window is resized (made smaller)

html5,css3,twitter-bootstrap-3

Your tabs breakdown after the width is within 767px, so you can use the below CSS hack. @media (max-width: 767px) { .nav-tabs.nav-justified > li { float: left; width: 50%; } } Bootply...

Put form fields two per line in bootstrap form

html,forms,twitter-bootstrap-3

You have to include the rows in a div. <div class="rows">. <div class="col-md-10"> <div class="form-group"> <legend>1st sth</legend> <div class="row"> <div class="col-md-2"> <select class="form-control" id="select"> <option value="1">1</option> <option value="1">1</option> <option value="1">1</option> </select> </div> <div class="col-md-3"> <input type="text" class="form-control" id="inputName" placeholder="name"> </div>...

Teechart HTML5, line color and thickness

javascript,html5,teechart

Having a Line series: To modify the line thickness, change the series format.stroke.size property. Ie: Chart1.series.items[0].format.stroke.size=2; To modify the series color, change the series format.stroke.fill property. Ie: Chart1.series.items[0].format.stroke.fill="red"; ...

How can you drop an image from your desktop into an editor and move it around?

javascript,html5,contenteditable

You can set the caret from your mouse position. See Text selection in div(contenteditable) when double click Didn't try it on IE, but this seems to work on Chrome/Firefox: function userDidDrop(event) { event.preventDefault(); if (document.caretRangeFromPoint) { //Chrome range = document.caretRangeFromPoint(event.clientX, event.clientY); } else if (document.caretPositionFromPoint) {//Firefox rangePos = document.caretPositionFromPoint(event.clientX, event.clientY);...

how can I use 'localStorage' to store an entire page?

javascript,html5

Kinda crazy but you could do it like so: var htmlContents = document.documentElement.innerHTML; localStorage.setItem('myBook', JSON.stringify(htmlContents )); From there you can call it up whenever you like.. localStorage.getItem('myBook'); It would be better of course to get the actually book contents of course instead of the entire page! Also as for what...

Redraw text over clearRect HTML5 Canvas

jquery,html5,canvas

One possible solution is that you move all your clearRect()'s out from the else-statements to the top and clear it from the start. Then you add text in a second step. That way you can also group the if-statements together to form a if-else if relationship (crappy explanation, just look...

Form controls not showing

c#,forms,winforms,user-interface,user-controls

You're never calling your FrmLogin.Frm method. If you intend this to be a constructor, drop the void and rename it to FrmLogin, like so: public FrmLogin() { this.Size = new Size(400, 600); Button btn = new Button(); btn.Text = "Something"; btn.Size = new Size(10, 10); btn.Location = new Point(10, 10);...

JSON.parse parsing a string into string

javascript,html5

That's because JSON.parse is able to successfully parse that input, it will parse it as a string and a string is what the return result will be. Check out the documentation and look at the examples. This one specifically: JSON.parse('"foo"'); // "foo" And in regards to achieving your objective, you...

Retrive geolocation in real time (HTML5)

javascript,html5,google-maps,gps,geolocation

setInterval(function, delay) or (function(){ // do some stuff setTimeout(arguments.callee, 60000); })(); The second aproach guarantees, that the next call is not made before your code was executed. The final code will depends on the choosen aproach. could be var map; var geocoder; var delay = 1000; function initialize() { var...

change icon on collapse in Bootstrap 2.3 not in bootstrap 3

javascript,jquery,css,html5,twitter-bootstrap

Updated. Yes - the first pure CSS solution was not satisfactory. If you dare to add some javascript, you can do this : $('.accordion-group').on('show', function() { $(this).find('.accordion-toggle').removeClass('arrow-down').addClass('arrow-up'); }); $('.accordion-group').on('hide', function() { $(this).find('.accordion-toggle').removeClass('arrow-up').addClass('arrow-down'); }); It is using the bootstrap collapse hide / show events directly on the collapse sections. Still without...

Javascript: Resetting variable value created by form

javascript,forms,variables

your function resetForm(){ document.getElementById("form").reset(); } should be function resetForm(){ document.getElementById("form").reset(); msg.innerText=""; msg.className=""; } basically: you are not re-setting #message back to hidden which is where you start. And, I am also making sure that innerText is blank. ...

Angular submit not called when required fields not filled

javascript,angularjs,forms

You need to add novalidate to your form. The reason being, your browser is validating your form rather than letting your code do it. alternatively, do something like: <form ng-submit="submit()" name="form" novalidate> <ion-radio ng-repeat="item in items" ng-model="data.type" name="type" ng-value="item.value" ng-class="{'error' : form.type.$invalid && form.$submitted }" </form> form.$submitted will become true...

php form get parameters from url and store it until the final page

php,mysql,forms,get

It looks like - but I may be wrong so please clarify any incorrect assumptions - but it looks like there are potentially several issues here: Get and post are different. Use $_REQUEST['var'] to select GET or POST (I think POST overwrites GET values in this situation, if both are...

Multiple AJAX forms with the same ID on the same page

javascript,php,jquery,ajax,forms

Don't use the same ID for the top and bottom forms. An id must be unique in a document -- see MDN Docs. Instead have two separate id's and reference them both in the one jQuery call when you are binding to the submit event: $('#newsletter_top, #newsletter_bottom').on('submit', function(e) { //...

How secure are HTML5 forms?

html5

Yes, any HTML can be modified with a basic page inspector. You'll need to include server-side validation to make sure they're not messing with your page.

Regex not working in HTML5 pattern

regex,html5

The pattern attribute has to match the entire string. Assertions check for a match, but do not count towards the total match length. Changing the second assertion to \w+ will make the pattern match the entire string. You can also skip the implied ^, leaving you with just: <input pattern="(?!34)\w+"...

Show only the requested forms using JS

javascript,jquery,html,html5,forms

Keep both the forms hidden at first and give a ID to each <a> and also to the <form> Then $("#id-of-btn1").click(function(){ $("#form-1").toggle(); }); and $("#id-of-btn2").click(function(){ $("#form-2").toggle(); }); EDIT: This could be a solution to make it completely independent of ID/Classes. If you give a class to div containing all the...

Django add an attribute class form in __init__.py

python,django,forms,django-forms

You need to assign the field to form.fields, not just form. However this is not really the way to do this. Instead, you should make all your forms inherit from a shared parent class, which defines the captcha field....

Run AJAX function on form submit button after javascript confirm() cancel

javascript,jquery,ajax,wordpress,forms

Dont use one(it will fire ajax submit or button click only once) , use here var IsBusy to check user is not repeatedly pressing the form submit, Try below code, var isBusy = false; //first time, busy state is false $('#publish').on('click', function (e) { if(isBusy == true) return ; //if...

How to make my nav bar responsive

html5,css3,media-queries

This should work: @media only screen and (max-width: 600px) { (...) } Note that IE8 and below don't support media queries....

What is the semantic HTML tag to display for URLs that are not links?

html,html5,url,tags,semantics

If I understand you correctly, you want the url to be a link but also display as a url. To do this put the url in the a tag twice, like so: This can then be style as desired by the destination page. <style> a { color: blue; text-decoration: underline;...

Does localStorage.clear(); clear ALL from PC?

javascript,html5,local-storage

From the spec for clear: The clear() method must atomically cause the list associated with the object to be emptied of all key/value pairs, if there are any. If there are none, then the method must do nothing. In the above, "the object" in this context would be localStorage. What...

How to change my table based on screen size?

javascript,html,css,html5

No, definitely don't use Javascript for email sending, as most clients fully disable it. You wouldn't need Javascript at all even if you were designing your table for web browsers only. All your problems can be solved with well applied media queries, if you wanna spend a little time doing...

Javascript into HTML form

javascript,html,forms

Updated Fiddle... $('#region').css('display','none'); $('#state').on('change', function() { var state= $('#state').val(); if(state=="A"||state=="B"){ $('#region').css('display','block'); }else{ $('#region').css('display','none'); } }); Try this.....

Form not submitted using jquery

javascript,jquery,html,forms

Your code works fine for me. you can check with this $(document).ready(function() { $("#offer1").click(function(event) { event.preventDefault(); $("#offer1Form").submit(); //document.getElementById("offer1Form").submit(); alert('something'); }); }); ...

why i don't get return value javascript

javascript,jquery,html,json,html5

the first "A" in AJAX stands for "Asynchronous" that means, it is not executed right after it has been called. So you never get the value. Maybe you could first, get the os list and then output what you need, like this: function createCheckBoxPlatform(myDatas) { $.ajax({ url: "/QRCNew/GetOS", type: "post",...

CSS drop down navigation

css,html5,css3,drop-down-menu,navigation

You have to add a position:absolute to the selector .navigation li ul .navigation{ margin-right: auto; margin-left: auto; width: 100%; background-color: #0f9cde; position: absolute; display: block; margin-bottom: 15px; z-index: 1000; margin-left: -15px; } /*Strip the ul of padding and list styling*/ .navigation ul{ list-style-type: none; margin: 0 auto; padding: 0; position:...

Form with 2 submit buttons

javascript,html,forms,window.open

You can't get 'results' in the manner you're attempting. You'll need to try getting it via the ID reference, something like the following: <form name="myForm" onSubmit="return myfunction();"> <input type="text" id="firstfield" name="firstfield"/> ... repreated 7 more times... <input type="submit" value="Preview"/> <input type="submit" onClick="window.open(document.getElementById('firstField').value + '/' + document.getElementById('results').value);" value="Open"/> </form> /* Hidden...

Symfony 2 unable to pass entity repository to form

php,forms,symfony2,runtime-error

You have not included the Symfony EnityRepository class at the top of your form file so PHP is looking for it in the same directory as your form class. Hence the error message. Add this to your form class (or qualify EntityRepository inline): use Doctrine\ORM\EntityRepository; ...

Swap nav and div vertically uing CSS only

html,css,html5,css3

The suggested swap does work. You had some errors in your css. You need to remove the period "." before nav and #date in your css. .swapHack{ display:table; width: 100%; } #date { display: table-header-group; } nav { display: table-footer-group; } <div class="swapHack>" <header> <div id="logo"> <img src="images/logo.png" title="Site Name"...

Tagging values in HTML document for automated extraction

html,xml,html5

If you are using them as meta-documents and they are sent to the parser, then converted as HTML and as long as the converted HTMLs do not have any irrelevant tags, it is fine! So, if the following code: <requirement> THE REQUIREMENT HERE </requirement> Gets converted into something like: <!--...

How to read all video type in a video tag

javascript,php,html5,video,codec

Please note that by far very few codecs are supported by browsers. You should have at least 2 versions of each video: ogg and mp4; if you can get webm as well, that'll be a bonus. mkv are not normally supported by any browser, especially ac3 encoding. Now, provided you...

Sending input data to a javascript file

javascript,jquery,ajax,html5,send

You can "send" the input field value to main.js by passing the input field value as a parameter to a function in main.js. main.js: function mainjsfunction(inputFieldValue) { console.log(inputFieldValue); //do something with input field value } html: <form> <input class="inputField" type="text" required="required" pattern="[a-zA-Z]+" /> <input class="myButton" type="submit" value="Submit" /> </form> <script...

Codeigniter Form Validation Rule for match (password)

php,forms,codeigniter,validation

There is no need of putting old password has in hidden field. it's not even safe. you can create callback function for your own custom validation. Notice the comment i have did in following code. $config=array( array( 'field' => 'old_password', 'label' => 'oldpass', 'rules' => 'trim|required|callback_oldpassword_check' // Note: Notice added...

jQuery & CSS only load after many refreshes

jquery,css,html5,internet-explorer,internet-explorer-11

I only get the problem when IE pays attention to the X-UA tag in your header to force IE8 standards. A bunch of JavaScript fails to load and the rest of the page falls over. If I ignore this tag and render with Edge using F12 the page always works...

More modern image maps?

javascript,html,css,html5

Responsive SVG solution or classic image map After taking Paulie_D's comment about SVG into account, I wrote an alternative using SVG to the classic image map. Both work fine, but the SVG version clearly wins when it comes to responsiveness. Both versions have a connection between the anchors and the...

Entering data into mysql database using php

php,mysql,forms,mamp

This shoud work, if not then check your usename and password... <?php $servername = "localhost"; $username = ""; $password = ""; $dbname = "first_db"; $pathway = $_POST['username']; username - is the name of your input. // Create connection $conn = mysqli_connect($servername, $username, $password, $dbname); // Check connection if (!$conn) {...