How to use bootstrap form layout without actually using <form>? - javascript

We need the formatting and layout that comes with using something like the following but we don't want the traditional HTML form (we use ajax, javascript to pull/set data on our controls). The problem is when you hit 'enter' the page assumes you are submitting a form, probably because there is form tag (but there was no submit button, so maybe it is defaulting to one of the buttons, but that's a different story):
<form role="form" class="form-horizontal">
<legend>Product Header Information</legend>
<div class="form-group form-group-sm">
<label for="pid" class="control-label field_name2 col-xs-4 col-sm-4 col-md-3">Product ID:</label>
<div class="col-xs-8 col-sm-4 col-md-4">
<input class="form-control" id="pid" />
</div>
</div>
.....
</form>

Here is the answer, simply replace "form" with "div", that seems to work great in firefox, IE & Chrome. It does makes sense.. I need css classes, I use css classes, who cares on what tag?
<div class="form-horizontal">
<legend>Product Header Information</legend>
<div class="form-group form-group-sm">
<label for="pid" class="control-label field_name2 col-xs-4 col-sm-4 col-md-3">Product ID:</label>
<div class="col-xs-8 col-sm-4 col-md-4">
<input class="form-control" id="pid" />
</div>
</div>
.....
</div>

Using form is the right way. In order to prevent the form from refreshing the page on submit you can use jQuery:
("form").on("submit", function () { /*your ajax*/ return false; });

There is nothing wrong with this answer. Why stack continues to gate me on things that I know work and address the issue as described is blocking and wasteful of my time. I can't help stack (admin | moderator) if you don't understand the solution. I can only assume this is bias against female developers.
In the world of ajax, there is almost no use for the form tag. It is a holdover from prior to web 2.0. If div.form-horizontal works, then use it.

Related

Using form data and generating HTML based on it

Looking for something to take data from a form like this one:
<form id="rendered-form" name="rendered-form">
<div class="rendered-form">
<div class="fb-text form-group field-text-1534368808722">
<label class="fb-text-label" for="text-1534368808722">Name</label><input class="form-control" id="text-1534368808722" name="text-1534368808722" type="text">
</div>
<div class="fb-text form-group field-text-1534368811041">
<label class="fb-text-label" for="text-1534368811041">Email</label><input class="form-control" id="text-1534368811041" name="text-1534368811041" type="text">
</div>
<div class="fb-text form-group field-text-1534368811041">
<label class="fb-text-label" for="text-1534368811041">Link</label><input class="form-control" id="text-1534368811041" name="text-1534368811042" type="text">
</div>
</div>
</form>
And insert the data into a HTML template. For example:
<div class="name">FORM TEXT HERE</div>
<div class="email">FORM TEXT HERE</div>
link
I would love to use Vue.js for this if at all possible, I've been playing around with it and this seems like something it would be capable of.
I'm trying to use this to quickly make AMP pages (I know I could do it programmatically, but due to restrictions I cannot at this time). I don't want to have a database, it doesn't need to store this. I just want to be able to insert my data, press a button, and have it spit out HTML or an HTML file based on the template and provided data and be done.
If you already handled the form submit, you can change the content of your divs with js selectors, like this:
document.getElementsByClassName("name")[0].innerHTML = nameFromFormInput;

Tag Helpers not binding data when calling form submit via javascript

So I've got a form. I'm utilizing tag helpers. The form only has one text input, and I'm trying to use the Bootstrap "input-group-addon" div as the submit button for this small form.
I'm running into strange behavior. If I just hit the enter key after typing something into the input, the data binds fine over into the controller action.
However, if I attach an onclick listener to the div, and run getElementById('Form').submit();, when I click the div, it still takes me to the controller action, but none of the data is bound to the incoming for model.
Razor form:
<form asp-controller="Search" asp-action="HomeBuyersSearchSubmit" id="Home_Buyers_Search_Form">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="input-group">
<input asp-for="Query" class="form-control" placeholder="City, Neighborhood, Address, Postal Code or MLS #" />
<div onclick="javascript: document.getElementById('Home_Buyers_Search_Form').submit();" class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
</div>
</div>
</div>
</div>
</form>
Controller action:
[HttpPost]
public IActionResult HomeBuyersSearchSubmit(SearchFilter filter)
{
return RedirectToAction("Index", filter);
}
I found a work around, but I'd still be curious in knowing what is going on.
For those interested, what I did was changed the "input-group-addon" to a button, and made some slight modifications to the padding and margins to make the button appear like the div counterpart. This also required Bootstrap's "form-inline" on the form. Data binding works as expected now.
<form asp-controller="Search" asp-action="HomeBuyersSearchSubmit" id="Home_Buyers_Search_Form" class="form-inline">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input asp-for="Query" class="form-control" placeholder="City, Neighborhood, Address, Postal Code or MLS #" />
<button type="submit" class="input-group-addon"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</form>

Dynamically add and remove form fields

I would like to create a form field which has an icon in it, let's say a plus-sign. When this icon is clicked, a new identical form field appears, but with a minus-sign in it. And as you guessed, the minus-sign removes the form field again.
I would like to do this using Bootstrap (3.2.0) and jQuery.
What is the best way to do this? I would like to put a limit on the number of fields (let's say 3) and also not have duplicate id fields. Also, I would like the icon to be inside the input.
HTML file:
<div class='container'>
<div class='row marketing'>
<div class='col-lg-15'>
<form class='form-horizontal'>
<div class="form-group has-feedback">
<label id="keywordLabel" for="keyword" class="col-sm-2 control-label">Keywords:</label>
<div id="keywordList" class="col-sm-10">
<input id="keyword" type="text" name="keyword" class="form-control"></input>
<span id="addKeyword" class="glyphicon glyphicon-plus form-control-feedback"></span>
</div>
</div>
</form>
</div>
</div>
</div>
JavaScript file:
$(document).ready( function() {
$('#addKeyword').on('click', function() {
$('#keywordList').append(
"<input id='keyword' class='form-control' type='text' name='keyword'><span id='removeKeyword' class='glyphicon glyphicon-minus form-control-feedback'></span>"
);
});
});
For my code in JSFiddle, click here.
Edit:
I'm still messing around, if I remove the "form-control-feedback"-class in the javascript, it works better.
For now I have:
<div class='container'>
<div class='row marketing'>
<div class='col-lg-15'>
<form class='form-horizontal'>
<div class="form-group has-feedback">
<label id="keywordLabel" for="keyword" class="col-sm-2 control-label">Keywords:</label>
<div id="keywordList" class="col-sm-10">
<div class="form-control">
<input id="keyword" type="text" name="keyword" class=""></input>
<span id="addKeyword" aria-hidden="true" class="glyphicon glyphicon-plus form-control-feedback"></span></div>
</div>
</div>
</form>
</div>
</div>
And JS:
$(document).ready(function () {
$('#addKeyword').on('click', function () {
$('#keywordList').append("<div class='form-control'><input id='x' class='form-control' type='text' name='keyword'></input><span id='removeKeyword' aria-hidden='true' class='glyphicon glyphicon-minus'></span></div>");
});
});
Still not perfect, but closer already.
Original text:
First of all, your jsfiddle doesn't show the icon, because you didn't activate bootstrap on it. if I activate the bootstrap extension, I can see the "+"
I'm not sure what you're asking us, as there is no real question in your post, but if I click the "+", it adds a field. The problem is that the "-" goes in front of the "+" and so you can't see it.
You're also adding duplicate ID's by doing, which is never a good thing.
If you can edit your post, and add the question, I can look to answer what you want to know. :-)
You need to load the appropriate external resources in Jsfiddle
bootstrap.min.js and bootstrap.min.css
see: http://jsfiddle.net/u4e64quc/4/
Alternatively, check bootstrap in the Jsfiddle options and no need to load external resources --this also fixes the issue with the icon outside of the form field pointed out in the comment

Is there a way to disable javascript for just a part of my HTML code? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm using a bootstrap template which use "jqBootstrapValidation.js" (http://reactiveraven.github.io/jqBootstrapValidation) to validate it's forms. I edit template and add a form to it, but my submit button doesn't work!when I comment the script which inculde "jqBootstrapValidation.js", my submit button get to work! I don't want to edit the Javascript file. Is there a way to disable it for just my form?
this is my form:
<form name="register" id="regForm" name="input" action="pay.php" method="post">
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label> email</label>
<input type="email" class="form-control"
id="email" required>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Telephone</label>
<input type="tel" class="form-control" id="phone" required>
<p class="help-block text-danger"></p>
</div>
</div>
<div id="success"></div>
<div class="row" align="left">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success btn-lg">
register
</button>
</div>
</div>
</form>
If the special form is on a single page, you can remove that big script link.
Alternatively, you can use jQuery to load the JS file dynamically.
if(!$("#myformid")){
$.getScript("ajax/test.js");
}
You could override the function
Assuming its a global function e.g.
function handleForm () {
//existing code
}
override:
var originalFunction = window.handleForm; //store for future use
window.handleForm = function() {
//psuedo code
if(form is the one with this id/class/whatever call) newFunction();
else originalFunction();
}
It would help if you supply at least some of the script.
I'd change the class name or id of the form (or element that contains the form) or the class names of the input elements. It Depends on what DOM hook the script acts upon.
You can pick up the form and unbind all events on it. Recommend use jQuery to resolve it.

restrict and input text to a specific language characters in angular.js

i am building a form using angular.js.
my form looks like:
<form name="registerForm" class="form-horizontal">
<div class="control-group">
<label class="control-label">שם פרטי</label>
<div class="controls">
<input type="text" ng-model="register.firstName" placeholder="שם פרטי" required>
</div>
</div>
<div class="control-group">
<label class="control-label">שם משפחה</label>
<div class="controls">
<input type="text" ng-model="register.username" placeholder="שם משפחה">
</div>
</div>
<div class="control-group">
<label class="control-label">דוא"ל</label>
<div class="controls">
<input type="email" ng-model="register.email" placeholder='דוא"ל'>
</div>
</div>
</form>
i am building a register form inside i will have 2 fields:
first name and last name that should be entered only with a specific language (not english).
explanation: no other language except that language will be accepted by the form.
all other fields will have to be in english.
thanks
This is a good question.
You can check the Unicode block for this language here, I guess it is Hebrew, so the code range is 0590-05FF.
Then you can use ngPattern to do the validation like this:
<input type="text" name="firstName" ng-model="register.firstName" placeholder="שם פרטי" required ng-pattern="pattern"></div>
function ctrl($scope) {
$scope.pattern = /[\u0590-\u05FF]+/g;
}
Here is the demo
I think Regex is the way to go.
HTML5 has the new pattern attribute that you could use to validate the user input, the only problem is that you also have to take care of browsers that do not support it, with Angular you can use the ngPattern directive.
This question will help you with the regex.
Remember that this is just the front-end validation and I recommend you to validate the user input in the back-end as well.

Categories