Laravel - Javascript Work In Jsfiddle But Not In Blade
I am trying to build a form and output its values in JSON format which I intend to shoot off to my controller. I am using this script in JSFiddle and it works fine but not inside m
Solution 1:
Can you change app.blade.php to this code
<!DOCTYPE html><htmllang="{{ app()->getLocale() }}"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><!-- CSRF Token --><metaname="csrf-token"content="{{ csrf_token() }}"><title>{{ config('app.name', 'Laravel') }}</title><!-- Styles --><linkhref="{{ asset('css/app.css') }}"rel="stylesheet"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></head><body><divid="app"><navclass="navbar navbar-default navbar-static-top"><divclass="container"><divclass="navbar-header"><!-- Collapsed Hamburger --><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#app-navbar-collapse"><spanclass="sr-only">Toggle Navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><!-- Branding Image --><aclass="navbar-brand"href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a></div><divclass="collapse navbar-collapse"id="app-navbar-collapse"><!-- Left Side Of Navbar --><ulclass="nav navbar-nav">
@auth
<li><ahref="{{ route('leads') }}">Leads</a></li>
@endauth
</ul><!-- Right Side Of Navbar --><ulclass="nav navbar-nav navbar-right"><!-- Authentication Links -->
@guest
<li><ahref="{{ route('login') }}">Login</a></li><li><ahref="{{ route('register') }}">Register</a></li>
@else
<liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-expanded="false">
{{ Auth::user()->name }} <spanclass="caret"></span></a><ulclass="dropdown-menu"role="menu"><li><ahref="{{ route('logout') }}"onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a><formid="logout-form"action="{{ route('logout') }}"method="POST"style="display: none;">
{{ csrf_field() }}
</form></li></ul></li>
@endguest
</ul></div></div></nav>
@yield('content')
</div><!-- Scripts --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><scriptsrc="{{ asset('js/app.js') }}"></script>
@stack('scripts')
</body></html>And in your blade section you can add jQuery
@push('scripts')
<scripttype="text/javascript">
'use strict';
/**
* Checks that an element has a non-empty `name` and `value` property.
* @param {Element} element the element to check
* @return {Bool} true if the element is an input, false if not
*/var isValidElement = functionisValidElement(element) {
return element.name && element.value;
};
/**
* Checks if an element’s value can be saved (e.g. not an unselected checkbox).
* @param {Element} element the element to check
* @return {Boolean} true if the value should be added, false if not
*/var isValidValue = functionisValidValue(element) {
return !['checkbox', 'radio'].includes(element.type) || element.checked;
};
/**
* Checks if an input is a checkbox, because checkboxes allow multiple values.
* @param {Element} element the element to check
* @return {Boolean} true if the element is a checkbox, false if not
*/var isCheckbox = functionisCheckbox(element) {
return element.type === 'checkbox';
};
/**
* Checks if an input is a `select` with the `multiple` attribute.
* @param {Element} element the element to check
* @return {Boolean} true if the element is a multiselect, false if not
*/var isMultiSelect = functionisMultiSelect(element) {
return element.options && element.multiple;
};
/**
* Retrieves the selected options from a multi-select as an array.
* @param {HTMLOptionsCollection} options the options for the select
* @return {Array} an array of selected option values
*/var getSelectValues = functiongetSelectValues(options) {
return [].reduce.call(options, function (values, option) {
return option.selected ? values.concat(option.value) : values;
}, []);
};
/**
* A more verbose implementation of `formToJSON()` to explain how it works.
*
* NOTE: This function is unused, and is only here for the purpose of explaining how
* reducing form elements works.
*
* @param {HTMLFormControlsCollection} elements the form elements
* @return {Object} form data as an object literal
*/var formToJSON_deconstructed = functionformToJSON_deconstructed(elements) {
// This is the function that is called on each element of the array.var reducerFunction = functionreducerFunction(data, element) {
// Add the current field to the object.
data[element.name] = element.value;
// For the demo only: show each step in the reducer’s progress.console.log(JSON.stringify(data));
return data;
};
// This is used as the initial value of `data` in `reducerFunction()`.var reducerInitialValue = {};
// To help visualize what happens, log the inital value, which we know is `{}`.console.log('Initial `data` value:', JSON.stringify(reducerInitialValue));
// Now we reduce by `call`-ing `Array.prototype.reduce()` on `elements`.var formData = [].reduce.call(elements, reducerFunction, reducerInitialValue);
// The result is then returned for use elsewhere.return formData;
};
/**
* Retrieves input data from a form and returns it as a JSON object.
* @param {HTMLFormControlsCollection} elements the form elements
* @return {Object} form data as an object literal
*/var formToJSON = functionformToJSON(elements) {
return [].reduce.call(elements, function (data, element) {
// Make sure the element has the required properties and should be added.if (isValidElement(element) && isValidValue(element)) {
/*
* Some fields allow for more than one value, so we need to check if this
* is one of those fields and, if so, store the values as an array.
*/if (isCheckbox(element)) {
data[element.name] = (data[element.name] || []).concat(element.value);
} elseif (isMultiSelect(element)) {
data[element.name] = getSelectValues(element);
} else {
data[element.name] = element.value;
}
}
return data;
}, {});
};
/**
* A handler function to prevent default submission and run our custom script.
* @param {Event} event the submit event triggered by the user
* @return {void}
*/var handleFormSubmit = functionhandleFormSubmit(event) {
// Stop the form from submitting since we’re handling that with AJAX.
event.preventDefault();
// Call our function to get the form data.var data = formToJSON(form.elements);
// Demo only: print the form data onscreen as a formatted JSON object.var dataContainer = document.getElementsByClassName('results__display')[0];
// Use `JSON.stringify()` to make the output valid, human-readable JSON.
dataContainer.textContent = JSON.stringify(data, null, " ");
// ...this is where we’d actually do something with the form data...
};
/*
* This is where things actually get started. We find the form element using
* its class name, then attach the `handleFormSubmit()` function to the
* `submit` event.
*/var form = document.getElementsByClassName('contact-form')[0];
form.addEventListener('submit', handleFormSubmit);
</script>
@endpush
Post a Comment for "Laravel - Javascript Work In Jsfiddle But Not In Blade"