so I'm having a weird problem that I haven't encountered before. My code is the following:
<div class="row">
<div class="col-md-12">
<h4>Send message to seller</h4>
<div class="panel panel-default">
<div class="panel-body">
<form action="#" method="POST">
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" id="InputEmail" placeholder="Enter your email" >
</div>
<div class="form-group">
<label for="InputText">Your text</label>
<textarea class="form-control" id="InputText" name="message" placeholder="Type in your message" rows="5" style="margin-bottom:10px;"></textarea>
</div>
<button class="btn btn-info" type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
When I run it on the server, this is the result, and it is really annoying:
<div class="form-group">
<label for="InputEmail">Email address</label>
<div class="has-placeholder form-control"><label>Enter your email</label><input type="email" class="form-control" id="InputEmail"></div>
For the second code, I omitted the rest of the code. As you can see, it adds a new and a new with a class of place-holer.
I have 2 versions of this file. Full HTML, and one with PHP etc.. The HTML version is just fine, but this one, for some reason, has this result. Can anyone explain to my why this is happening.
I have looked in the js files that are being included and cannot find anything regarding that added class and what not.
Thanks.
Your this html code is just perfect. Probably you missed some tag in php file. Can you please post your php code so that we can sorted it out.
Thanks
Related
I have a problem setting up a form on my website.
I want to add two separate forms on my website, which i did, using some HTML & css.
Thoses forms need to send informations to a webhook -> it also works (since it's collected)
BUT as soon as i press submit, it redirect to the main page of the website, so no conversion (which is a shame) and a very bad input from me.
Please, lend me your intelligence, since i must be the best idiot there is.
<form name='myForm' data-form-id='IdFromWebhook' action='WebhookLink' method='post' onsubmit="return false">
<div class="row">
<div class="col-lg-12">
<div class="form-group text_box">
<label for='EMAIL_ADDRESS'>E-mail: </label><input id='insightly_email' name='email' type='text' required>
</div>
</div>
<div class="col-lg-6">
<div class="form-group text_box">
<label for='FIRST_NAME'>First name: </label><input id='insightly_firstName' name='firstName' type='text' required>
</div>
</div>
<div class="col-lg-6">
<div class="form-group text_box">
<label for='LAST_NAME'>Last Name: </label><input id='insightly_lastName' name='lastName' type='text' required>
</div>
</div>
<div class="col-lg-4">
<div class="form-group text_box">
<label for='Language__c'>Choose a language: </label>
<select id='insightly_language' name='language' required><option value='EN'>EN</option><option value='FR'>FR</option><option value='DE'>DE</option></select>
</div>
</div>
</div>
<!--Bouton d'envoi-->
<div style="display:flex;justify-content:center"><input class="btn_three" type='submit' value='Submit'></div></form>
Use event.preventDefault() this will stops redirect:
formReference.onsubmit = (event) => {
event.preventDefualt()
}
I stupidly found the right answer, i had to specify URLs for the success or error pages.
It was an insightly form.
Im using meteor JS and try to implement a summernote.
The problem is, when i try to open a summernote with my data, it work just sometimes.
when i charge the page for the first time, nothing appears in the summernote, but if i change something in my code and save it, the content will appear in the summernote.
please, help me :'(
<template name="consigneModif">
<div class="container">
<div class = "col text-center">
<h1>Modification de {{{this.Name}}}</h1>
</div>
<form class="formConsigne">
<div class="form-group">
<label for="Description"><h4>Nom :</h4></label>
<textarea class="summernote" id="Name" name="Name">{{{this.Name}}}</textarea>
</div>
<div class="form-group">
<label for="Description"><h4>Description :</h4></label>
<textarea class="summernote" id="Description" name="Description" rows="3">{{{this.Description}}}</textarea>
</div>
<div class="form-group">
<label for="Condition"><h4>Condition d'application de la consigne : </h4></label>
<textarea class="summernote" id="Condition" name = "Condition" rows="3">{{{this.Condition}}}</textarea>
</div>
<div class="form-group">
<label for="Mode"><h4>Mode opératoire :</h4></label>
<textarea class="summernote" id="Mode" name ="Mode" rows="3">{{{this.Mode}}}</textarea>
</div>
<div class="form-group">
<label for="Date"><p>Date effective :</p></label>
<input type="Date" id="Date" name = Date>
</div>
<div class="form-group">
<label for="DateFin"><p>Date de fin :</p></label>
<input type="Date" id="DateFin" name = DateFin>
</div>
<div>
<button type="submit" class ="btn btn-success" id="AddConsignButton">Modifier</button>
</div>
</form>
</div>
{{>footerNavbar}}
<script>
$('.summernote').summernote('code');
</script>
</template>
I think the issue is with the script tag you are using to activate the summernote. It should work if you use the onRender method of the template instead.
This may work:
Template.consigneModif.onRendered(function () {
this.$('.summernote').summernote('code');
});
I am trying to find a way to change the color of text in a form as a result of passing a validation by another JavaScript function. Is there an easy way to do this?
Example of the element I want to update the color for:
<form name="contact" method="post" action="send_form_email.php" novalidate>
<div class="row">
<div class="col">
<label for="nameInput">Name:*</label>
<input name="name" type="text" class="form-control" id="nameInput" placeholder="E.g. Alan Turing" oninput="bootstrapValidate('#nameInput', 'required:Please fill out this field')">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="emailInput">Email:*</label>
<input name="email" type="email" class="form-control" id="emailInput" placeholder="E.g. name#domain.com" oninput="bootstrapValidate('#emailInput', 'email:Enter a valid E-Mail!|required:Please fill out this field')">
</div>
<div class="col-sm-12 col-md-6">
<label for="telInput">Telephone:</label>
<input name="tel" type="tel" class="form-control" id="telInput" placeholder="E.g. (01452) 714 xxx">
</div>
</div>
<div class="form-group">
<label for="msgInput">Message:*</label>
<textarea name="msg" class="form-control" id="msgInput" placeholder="E.g. Hello world!" oninput="bootstrapValidate('#msgInput', 'required:Please fill out this field')"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
For example document. GetElementById('msgInput').style.color='#ABC666';
Another way is to toglle a class containing a rule like so:
JS: document. GetElementById('msgInput').classList.add('valid');
CSS: .valid { color: #ABC666; }
Aforementioned JS code has to be placed in the event listener.
You can add CSS class to your element:
// styles.css
.warning {
color: red;
}
// scripts.js
document.getElementById('msgInput').classList.add('warning');
I am trying to make a contact me from with Angular. Right now, I have some input fields, a button, and an angular app as a script in the page to try and make things as simple as possible. I was trying to make sure things are talking to each other so I just put a console.log in my angular controller which I think should print to the console when I click the button. However, it just reloads the page every time.
Below is the code that is showing this issue
HTML:
<body ng-app="contactApp">
<div class="container">
<div class="row">
<div class="col-sm-8 blog-main">
<!-- Input Fields for contact form -->
<form ng-controller="ContactCtrl" class="form-horizontal" role="form" ng-submit="submit(name, email, message)">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input class="form-control" type="text" placeholder="Name" ng-model="info.name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-4">
<input class="form-control" type="email" placeholder="Email" ng-model="info.email">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Message</label>
<div class="col-sm-4">
<input class="form-control" type="text" placeholder="Place Message Here" ng-model="info.text">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-success" type="submit">Contact Me</button>
</div>
</div>
</form>
</div><!-- /.blog-main -->
</div><!-- /.row -->
</div><!-- /.container -->
JS:
var contactApp = angular.module('contactApp', [])
.controller('ContactCtrl', function ($scope, $http){
$scope.submit = function (name, email, message){
console.log('contact with controller')
}
})
Most code is just creating the HTML form, see angular app at the bottom.
ooo so close ;) you've got a little typo in there ng-controller="contactCtrl" != .controller('ContactCtrl') check out your first letter.
I was using Firefox as my browser and I was looking for the output in their developer console. It was appearing in the firebug console. I still don't know why it doesn't appear in the regular console, but I will check firebug as well in the future. I accepted btm1's answer because he pointed out my typo and that made everything work when I started up firebug.
I am working on a webpage and I have this form that will execute a script once the submit button is pressed. I plan to add AJAX in to push data to a PHP script, but for now I can't even get the javascript code block to run. Am i doing something wrong? In addition, I do have the includes for jQuery.
Below are snippets of my code.
<!--Scripts -->
<script src="js/jquery.min.js"></script>
<!--Legacy jQuery support for quicksand plugin-->
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<div class="col-md-6">
<form id="contact-form" role="form">
<div class="form-group">
<label class="sr-only" for="contact-name">Name</label>
<input type="text" name="name" class="form-control" id="contact-name" placeholder="Name">
</div>
<div class="form-group">
<label class="sr-only" for="contact-email">Email</label>
<input type="email" name="email" class="form-control" id="contact-email" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="contact-message">Message</label>
<textarea rows="12" name="message" class="form-control" id="contact-message" placeholder="Message"></textarea>
</div>
<input type="submit" class="btn btn-primary" value="Send Message">
</form>
<!-- Function To Submit Contact Us Form-->
<script type="text/javascript">
$("#contact-form").submit(function(event) {
alert("Dammit");
});
</script>
</div>
When clicking submit the Web Browser URL shows the fields and content from the form, however the alert is not being executed. I appreciate any assistance in advanced.
$("#contact-form").submit(function(event) {
alert("Dammit");
});
You need the # character when querying for an element by ID. Your code is currently looking for a tag named contact-form