I want the browse button class same as Upload button: className='button-normal', what should i do
<form name="uploadForm">
<input name='uploadFile' id='uploadFile' type='file' style={{marginTop: '1%'}} onChange={this.check}/>
<br/>
<input type="button" value="Upload" style={{marginTop: '1%'}} className='button-normal' onClick={this.upload}/>
</form>
I did it by using <label htmlFor=[fileInputID] ....> to pretend and control Browse Button, hid the real Browse Button, and added a new disabled input to show the uploaded file name.
However, though I made the label looks like button, it's still not quite like a button, I hope the type of input is "button" but can still work the same as htmlFor, grateful if you have any idea to share.
check: function() {
document.getElementById("name").placeholder = document.getElementById("uploadFile").files[0].name;
},
///
<form>
<input name='uploadFile' id='uploadFile' type='file' style={{marginTop: '8px', fontSize:'17px', float: 'left'}} onChange={this.check} display= 'none' />
<label className='button-normal' style={{margin: '5px 5px 5px 5px', float: 'left'}} htmlFor='uploadFile'>Browse</label>
<input id="name" placeholder="No file selected" style={{fontSize: '17px', marginTop:'7px'}} disabled="disabled"/>
<input type="button" value="Upload" styles={{marginTop: '1%', float: 'left'}} className='button-normal' onClick=={this.upload}/>
</form>
Related
I am trying to test a form in Vue, using the forms from the Bootstrap-Vue library.
I have made a an event for the form (submit) and I added a function to this event (addText).
Then I made a method for this function, telling it to log my input data to the console, but when I press the "save" button and go into the console nothing has been logged.
This used to work with Materialize, so I am wondering if the error lies somewhere with the Bootstrap forms.
Any help will be much appreciated.
<template>
<b-container fluid>
<h2>Add or edit content for this section</h2>
<b-form-group #submit="addText">
<div class="fieldHeadline">
<label for="headline">Add headline</label>
<b-form-input type="text" name="headline" v-model="headline"></b-form-input>
</div>
<div class="fieldSecodnaryHeadline">
<label for="secondaryHeadline">Add secondary headline</label>
<b-form-input type="text" name="secondaryHeadline" v-model="secondaryHeadline"></b-form-input>
</div>
<div class="fieldText">
<label for="text">add text</label>
<b-form-input type="text" name="text" v-model="text"></b-form-input>
</div>
<b-button variant="success">Save</b-button>
</b-form-group>
</b-container>
</template>
<script>
export default {
name: 'NewsSectionCreate',
data() {
return {
headline: null,
secondaryHeadline: null,
text: null
}
},
methods: {
addText(){
console.log(this.headline, this.secondaryHeadline, this.text)
}
}
}
</script>
b-form-group is not a form it's layout that structures the label and inputs, in order to submit that inputs you should wrap the b-form-group tags with a b-form component which has #submit event:
<b-form #submit="addText">
<b-form-group >
<div class="fieldHeadline">
<label for="headline">Add headline</label>
<b-form-input type="text" name="headline" v-model="headline"></b-form-input>
</div>
<div class="fieldSecodnaryHeadline">
<label for="secondaryHeadline">Add secondary headline</label>
<b-form-input type="text" name="secondaryHeadline" v-model="secondaryHeadline"></b-form-input>
</div>
<div class="fieldText">
<label for="text">add text</label>
<b-form-input type="text" name="text" v-model="text"></b-form-input>
</div>
<b-button type="submit" variant="success">Save</b-button>
</b-form-group>
</b-form->
don't forget to add type="submit" to the b-button component.
I have tried autocomplete="off", autocomplete="none" , autocomplete="/" ,autocomplete="new-text"
but still it shows autocomplete
browser autocomplete overlaps typehead autocomplete popup
I don't Know how to remove this autocomplete
Thank you in advance!!
<form name="clientForm" class="kt-form kt-form--label-right" novalidate role="form" autocomplete="new-text">
<div class="form-group row">
<div class="col-lg-3 col-sm-6 col-xs-12 typeahead">
<label for="country">Country <span style="color:red">*</span></label><br />
<input id="add-c-country" class="form-control" name="country" type="text" dir="ltr" placeholder="Enter Country" autocomplete="new-text" />
<div class="form-text text-muted" ng-show="clientForm.country.$touched || clientForm.$submitted"
ng-messages="clientForm.country.$error" role="alert">
<div class="req-red" ng-message="required">Please Select Country</div>
</div>
</div>
</div>
</form>
I am using typeahead.js for auto complete
function applyAutocomplete(id, array,namE) {
$('input#' + id).typeahead({
hint: true,
highlight: true,
minLength: 1,
accent: true,
offset: true
}, {
name: namE,
limit: 100,
source: substringMatcher(array)
});
}
applyAutocomplete('add-c-country', $ctrl.countryNameList,'country');
Could you try just completely removing the autocomplete parameter?
Like this:
<input id="add-c-country" class="form-control" name="country" type="text" dir="ltr" placeholder="Enter Country" />
Edit after reading your edited question:
You can not disable browser autocomplete in your own code. That is a browser specific setting.
For chrome you can do the following:
Click the Chrome menu icon. (Three lines at the top right of the screen.)
Click on Settings.
At the bottom of the page, click 'Show advanced Settings'
In the Passwords and Forms section, uncheck 'Enable Autofill to fill out web forms in a single click'.
Hope this solves your problem.
Best regards.
I am trying to create a custom register view/form and have it work with auth.register(), but so far I've had no luck. I mainly have two problems.
If I don't include response.view = 'register.html' in my controller the link register.html defaults to web2py's default register page (which works, but I don't want to use).
If I removed the response.view = 'register.html' from my controller func, then my custom form/view appears, but doesn't submit/validate. It just keeps popping the on-fail message "Oops something went wrong submitting the form"
Every thread I've read about this just says to specify the form=auth.register() in the controller and use the {{=form.custom.end}} in the view, but that doesn't seem to work. Am I missing something?
I also tried specifying the callback action for the form to action="{{=URL('default', 'register')}}, but if I add this the page won't do anything on submit either.
Here's my code:
Controller: (In default.py)
def register():
response.view = 'register.html'
db.auth_user.first_name.readable = db.auth_user.first_name.writable = False
db.auth_user.last_name.readable = db.auth_user.last_name.writable = False
return dict(form=auth.register())
View (default/register.html)
<body class="body-4">
<div class="form-block w-form">
<form id="email-form" name="email-form" data-name="Email Form">
<h1 class="heading-5">Register</h1>
<input type="email" class="text-field w-input" maxlength4="256" name="Email" data-name="Email" placeholder="Enter your email" id="Email" required="">
<input type="password" class="text-field w-input" maxlength="256" name="Password" data-name="Password" placeholder="Enter your password" id="Password" required="">
<input type="password" class="text-field w-input" maxlength="256" name="Password-2" data-name="Password 2" placeholder="Confirm your password" id="Password-2" required="">
<input type="submit" value="Register" data-wait="Please wait..." class="submit-button w-button">
{{=form.custom.end}}
<div class="w-form-done">
<div>Thank you! Your submission has been received!</div>
</div>
<div class="w-form-fail">
<div>Oops! Something went wrong while submitting the form.</div>
</div>
</div>
<script src="{{=URL('static','js/webflow.js')}}" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
You need to put the viewer code into the file default/register.html instead of register.html .
Then it works for me. You can see the resulting entry in the database.
How can I change dynamically where it says 40,95€/mes to the option selected in the radio buttons using AMP?
<form id="myform" method="get" action-xhr="#" target="_top">
<amp-selector class="radio-selector" layout="container" name="my-selector">
<div class="background_gris_0" option="b">
<label>
<div class="clm1 left center_input">
<input name="answer1"
value="Value 1"
type="radio"
on="change:myform.submit">
</div>
<div class="clm8 left">Antes 10GB* / AHORA 20GB / Llamadas ilimitadas / 19,95€/mes</div>
</label>
</div>
<div class="background_gris_1" option="c">
<label>
<div class="clm1 left center_input"><input name="answer1"
value="Value 2"
type="radio"
on="change:myform.submit"></div>
<div class="clm8 left">Antes 20GB* / AHORA 50GB / Llamadas ilimitadas / 24,95€/mes</div>
</label>
</div>
</amp-selector>
</form>
<div class="center">
<h1> 40,95€/mes</h1>
</div>
JS Fiddle
This can be achieved by using the amp-bind component.
First of all, I would like to suggest you to remove all change events from radio buttons in amp-selector. Shift that 'myForm.submit' action to amp-select's 'select' event.
Create a state variable called 'currentPrice'. This will be null in the beginning. But when a radio input is selected, this will have a value and update the text in the h1 element.
So, in radio buttons add this (change the value of currentPrice accordingly):
on="tap:AMP.setState({currentPrice: '19,95€/mes'})"
Then, in the h1 element do this:
[text]="currentPrice"
So whenever the radio button is tapped, the text at the bottom will be updated with price.
You can see the jsfiddle here:
Js Fiddle
I have removed form submit event for simplicity.
I have 1 main search form with a submit button and several secondary search forms with submit buttons.
What I would like to do is when I enter text and click on the submit button of the main search form, the same text gets copied in all of the secondary search forms and all the submit buttons of the secondary search forms get automatically hit.
The HTML code for the mains earch form is shown below:
<form action="query.php" method="get">
Search: <input type="text" name="item" size="30">
<input type="submit" value="send">
</form>
One of the several secondary search forms is shown below:
<FORM action="http://www.dpbolvw.net/interactive" method="GET" target="_blank">
<div style="float: left; padding: 0 3px 0 0;">
<INPUT type="text" name="src" size="9"
value="<?php
$input = $_GET['item'];
echo $input;?>" style="width: 110px; height: 22px;margin:0; padding: 0; font-size:140%;">
</div>
<div style="float: left; padding: 0 3px 0 0;">
<input type="image" name="submit" value="GO" src="http://images.guitarcenter.com/Content/GC/banner/go.gif"
alt="Search" style="font-size:140%">
/div>
<input type="hidden" name="aid" value="1234"/>
<input type="hidden" name="pid" value="1234"/>
<input type="hidden" name="url" value="http://www.guitarcenter.com/Search/Default.aspx"/>
</form>
Notice the php code that I put in the "value" field of the secondary search form:
<?php
$input = $_GET['item'];
echo $input;?>
This automatically copies the text that I entered in the main search form into the secondary search form. I thus figured out how to do that.
The problem is to "simulate" an "Enter" keystroke or a click on the "GO" button with the mouse on the secondary search form when the user hits the Enter key or hits the "SEND" button with the mouse on the main search form.
Thank you for your insight!
I'm not sure what the point of that would be, It looks like all of these are search forms all pointing to different sites. Web browsers won't allow that. They can navigate to one page at a time. When you post a form to a page you are navigating to that page. Therefore, you are trying to navigate to several pages at once. It's like trying to be in Paris and London at the same time. I don't see how your plan will work the way you're describing it.
That said, You can use client-side javascript to call
document.forms[0].submit();
so if you can come up with a plan that does not involve trying to have the user see all the different search results in one window, you could try this on your first form...
<form action="query.php" method="get" onSubmit="document.forms(1).Submit();">
You should use AJAX (JQuery) as Brandon Suggested. Read http://docs.jquery.com/Events/submit
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function() {
//Do you stuff here like triggering other submits
//Like:
$("input#submit2").click();
$("input#submit3").click();
return false;
});
});
</script>
</head>
<body>
<form action="javascript:alert('success!');">
<div>
<input type="text" />
<input type="submit" id="submit" />
</div>
</form>
<form >
<div>
<input type="text" />
<input type="submit" id="submit2" />
</div>
</form>
<form >
<div>
<input type="text" />
<input type="submit" id="submit3" />
</div>
</form>
</body>
</html>
Take a look at the submit() event in jQuery. That is going to be your key.
I am assuming that you are planning on submitting via ajax? Otherwise it is futile.
So you could do something like this-
Give all of your forms a certain class, let's call it 'ajax_search_forms'. So now you can actually hook into the submit event.
$('.ajax_search_forms').submit(function(){
var search_string = $('input[name=src]').val();
$('.ajax_search_forms').each(function(){
$.ajax({
url : $(this).attr('action'),
data : 'search_string=' + search_string,
success : function(html){
// Do something with the result
}
});
});
// Return false is VERY important so that the form submission does not continue
return false;
});