Combobox losing properties when in form - javascript

I am using the combobox from this link: http://jqueryui.com/autocomplete/#combobox. When using this code on a normal page on my front-end, it works perfectly.
But when I try to integrate it into a form, it loses its properties, so it works only as a select, but I can't type anything.
The code looks somewhat like this:
<form>
...
<div style="float:left;margin-left:10px;">
<label for="nextdev1" style="color:white">Next Hop</label>
<div class="ui-widget">
<!-- rest of code here -->
</div>
</div>
</form>

Related

Laravel 5.4 - How to make #section yield before javascript loads

I'm using javascript to dynamically create a form that takes answers from a chat and adds it to a form. The form exists in a separate blade file register.blade.php. I yielded the form in the home page (index.blade.php) but the #section('registration-form') yields to the page before the js is read. For that reason, the answers from the chat never get input into the form.
register.blade.php holds the (custom) form #section('registration-form'). From there I'd like to create a route::get('/index', 'CustomAuthController') in routes/web.php to store the forms data in my database. Any ideas on how to make this work?
Very new to Laravel. Using Laravel 5.4.
THE CODE:
layouts/app.blade.php
#include('includes.head')
<body>
#include('includes.navbar')
<div class="container">
#yield('content')
</div>
#include('includes.footer')
</body>
index.blade.php
#extends('layouts.app')
#section('content')
<main>
<section class="row" >
<!------ a bunch of content here ----------->
<!----- form yielded here -------->
#yield('registration-form')
<!--- form end ----->
<!------ more content -------->
</section>
</main>
#endsection
register.blade.php
#section('registration-form')
<div class="padding-32" id="signup-two">
<h4>Review and submit your information</h4>
<form method="POST" action="{{ route('signup') }}">
{{ csrf_field() }}
<div class="form-group" id="fname">
<label></label>
<input name="fname"/>
</div>
<div class="form-group" id="email">
<label></label>
<input name="email"/>
</div>
<div class="form-group" id="password">
<label></label>
<input name="password"/>
</div>
<div class="form-group" id="BMI">
<label></label>
<input name="BMI"/>
</div>
<div class="form-group" id="height">
<label></label>
<input name="height"/>
</div>
<div class="form-group" id="weight">
<label></label>
<input name="weight"/>
</div>
</form>
#endsection
I tried yielding #section(registration-form) in app.blade.php the form still did not load. I also couldn't figure out how to create a route and a controller for this. The code looked like this:
layouts/app.blade.php
#include('includes.head')
<body>
#include('includes.navbar')
<div class="container">
#yield('content')
#yield('registration-form')
</div>
#include('includes.footer')
</body>
</html>
routes/web.php
Route::get('/index', function () {
return view('registration-form', [
'fname' => 'fname',
'BMI' => 'BMI',
'height' => 'height',
'weight' => 'weight'
]);
});
Javascript is usually loaded when dom is ready.
But you want to load script before that specific DOM ( #yield(form) ) element is ready.
So you have to do something like "laravel load view using ajax", there are already some practical example around. How can I return a view from an AJAX call in Laravel 5?
You want to create a router for Ajax call, controller function to return the partial view (hence #section('form')). Call the ajax after the necessary code is ready in your js. Then Append the view to desire location. There are not easy way around.
You might want to reconsider you design for whatever you are trying to accomplish right now.
For things like data manipulation, calculation, etc. If they can be done and validated by backend, simply send them to the backend. One common mistake is Frontend is trying to handle the Backend tasks.

serializeArray() does not work with dynamically loaded hidden fields

I have the following code which converts all field values of a form to a single object. However, it is not converting hidden fields that are dynamically loaded (but it would convert them if their values are hardcoded).
According to my research, serializeArray() should cover hidden fields as long as they have names. And mine do have names. So I can't figure out what's wrong here.
serializeArray():
var data = {};
$("#form1").serializeArray().forEach(function(x){
data[x.name] = x.value;
});
console.log(data);
Dynamic loading of hidden field values using JQuery
$("#field1").val("400"); //400 is just an example here
Form:
<form id="form1">
<!-- Not serialized -->
<input type="hidden" name="field-value.hidden.1" id="field1" value=""/>
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- Works fine -->
<textarea id="field2" name="field-value.show.1" rows="3" cols="10"></textarea>
</div>
</div>
</div>
</form>
Summary of issue:
serializeArray works if input looks like:
<input type="hidden" name="field-value.hidden.1" id="field1" value="400"/>
but not if it is:
<input type="hidden" name="field-value.hidden.1" id="field1" value=""/>
$("#field1").val("400");
One workout I just discovered from reading here:
(https://stackoverflow.com/a/25402639/4996722)
$("input[id=field1]").val("400"); would correctly put the value in there. However, this may be a JQuery bug as there is no good reason behind why $("#field1").val("400") does not work as they are the same thing.

Submit function within form

I am currently editing a script I had made for me some time back. I no longer have contacts for the original coder due to no longer using Yahoo messenger.
On my contact form it uses the onclick="$('#contact-form').submit()" function.
I am trying to get the contact form the submit but when I complete the form and click "Apply" it will not submit, My guess is down to the Javascript validating some of the fields that I have changed or deleted. Is there a way I can get round this? I have removed the onclick function however it will not submit when I try to complete the form.
Here is my form heading:
<div id="contact-form" class="box1 form css3" xmlns:pageScript="urn:pageScript">
<a name="loanform"></a>
<form action="thankyou.php" method="post" id="contact-form">
<fieldset class="loan">
<legend><span>1 - Your Details</span></legend>
<ol class="group" data-role="listview">
<li class="clearfix" id="ValItem">
<label for="Val" id="ValCheck">Amount</label>
And for the bottom of the form as the form has a fair few fields...
<fieldset class="submit" style="height:0;overflow:hidden">
<ol class="group" data-role="none">
<li></li>
</ol>
</fieldset>
<div id="warning-box">
<p>By pressing the APPLY button below you agree to our Terms and Conditions.</p>
</div>
<div class="full-width clearfix">
<div id="previousButton" class="prev-button"><img class="full-width prev-desktop" src="back-button.png" border="0"/><img class="full-width prev-mobile" src="back-button.png" border="0"/></div>
<div id="nextButton" class="next-button"><img class="full-width next-desktop" src="next-button.png" border="0"/><img class="full-width next-mobile" src="next-button.png" border="0"/></div>
<div id="SendEnquiry" name="SendEnquiry" onclick="$('#contact-form').submit()" class="apply-button"><img class="full-width apply-desktop" src="apply-button.png" border="0"/><img class="full-width apply-mobile" src="apply-button.png" border="0"/></div>
</div>
</form>
<button id="popButton" style="display:none">x</button>
</div>
I do not get any error messaged displayed, When you click the Apply button it does not seem to do anything. I have no objection as to how the form can be submit, I am really just looking for a way round it to make sure clients are able to submit there request.
As you said "I have no objection as to how the form can be submit, I am really just looking for a way round it to make sure clients are able to submit there request.", You can also sumbit as below.
Just write this line above </form> tag.
<input type="submit" value="SUBMIT"/>
This line will add new button in your page. You can replace it with your old button's css.
This way is very simple and you do not need to include jquery in your html page.

jQuery validate Engine Not Work with Bootstrap Select plugin

I work with jQuery Validate Engine Plugin and bootstrap. This Plugin Worked But when I change dropdown selectbox Style using bootstrap-select plugin, validate engine not work.
HTML:
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-header well" data-original-title>
<h2><i class="icon-picture"></i>Change Password</h2>
</div>
<div class="box-content">
<form action="#" id="fm">
<div class="control-group">
<label class="control-label" for="disabledInput">Email</label>
<div class="controls">
<select name="sport" id="sport" class="validate[required]">
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</div>
</div>
<input type="text" name="test" id="test" class="validate[required] text-input" />
<input type="submit" name="submit" />
</form>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
JS:
jQuery(document).ready(function () {
// binds form submission and fields to the validation engine
jQuery("#fm").validationEngine();
});
$('select').selectpicker();
DEMO HERE : http://jsfiddle.net/Sambora/84PVv/2/
In action When we select any value in selectbox jQuery Validation Engine Not Work and Show error Box.
How do fix this problem?
I got a solution without modifying the core js file. For this we need to use validationEngine "prettySelect","usePrefix" options, and we need to add "id" to cloned element and also need to removed the "validate[required]" class from this element. The full code look likes this.
var prefix = "selectBox_";
jQuery(document).ready(function() {
// for remove bootstrap-select validation and adding id to the element with prefix
$('select').each(function() {
$(this).next('div.bootstrap-select').attr("id", prefix + this.id).removeClass("validate[required]");
});
jQuery("#registration").validationEngine('attach',{
promptPosition: "bottomLeft",
autoHidePrompt:true,
prettySelect : true,
usePrefix: prefix
});
});
It works for me. DEMO HERE : http://www.scriptlodge.com/code_demos/validationEngine/
For detail, Please go to my blog link http://www.scriptlodge.com/jquery-validationengine-not-work-with-bootstrap-select-plugin/
When bootstrap-select creates a cloned element, it uses an addClass call that copies the validate[.*] class into the new div element, and validationEngine tries to validate that.
This can be remedied by modifying the setStyle function to strip that part of the class attribute out (around line 272 of bootstrap-select.js):
this.$newElement.addClass(this.$element.attr('class').replace(/selectpicker|mobile-device|validate\[.*\]/gi, ''));
Note the change is simply: |validate\[.*\] in the regular expression.
This keeps the new DIV element from being "validated" by the validationEngine script.
After adding this, validationEngine works with bootstrap-select.
I've submitted a pull request to fix this and it has been merged into the latest version on github.
You can download the updated script here:
https://raw.githubusercontent.com/silviomoreto/bootstrap-select/master/bootstrap-select.js

How do I post values obtained from an html form to an URL using javascript?

I'm new to html and JS and I have a form with a few fields that I need posted to a URL.
<form>
<div>
<label style="font-size:16px" for="title">Title:</label>
<input type="text" id="title" maxlength="128"/>
</div>
<div>
<label style="font-size:16px" for="description">Description:</label>
<textarea id="description" maxlength="1999"></textarea>
</div>
<div>
<label style="font-size:16px" for="idnumber">IDNumber:</label>
<input type="number" id="idnumber"/>
</div>
</form>
I need the values entered into this form to be posted to a URL that already knows how to process the input. I'm sure this is easy to do but I'm new and I'm having trouble finding a solution. Apologies for any incorrect terminology. Thanks!
You can use the action attribute:
<form action="some/url" method="post">
<!-- ... -->
<input type="submit" value="Submit" /> <!-- Submit button -->
</form>
You have to add an action to your form tag that points to a server side script.
<form action="myscript.php" method="post">
Alternatively, you can use JavaScript to post it as an AJAX request which submits the request without a page refresh.
I'd say you're on the right track. This would be perfectly easy using basic HTML: Add an action="mySubmitPage.php" to the form element. It sounds like you want to do it without refreshing/changing the page, though (at least, that's how it sounds by "with Javascript")
That will involve an "asynchronous" submit. The fancy term is "AJAX". That part can be a lot easier using some form of Javascript framework, especially if you want to support all browser quirks. Here's an example of doing it using JQuery, for instance:
jQuery - Send a form asynchronously

Categories

Resources