I have a popup displayed using ajax. This popup contains a form, this is how it looks like.
<form id="edit_tailored_form" name="thisisthename" method="post" action="/edittailored">
<h4>Country</h4>
<p>Show only records from this country.</p>
<ul>
<li><label>Country:</label>
<select class="inpt1" name="country">
<option value="0">ALL_COUNTRIES</option>
<option value="1">United States</option>
<option value="2">France</option>
</select>
</li>
</ul>
<h4>Hashtags</h4>
<div class="clr" style="height:10px;"></div>
<p>Show only records under these hashtags.</p>
<ul>
<li><label>Hashtags:</label><input type="text" name="hashtags_select" class="hashtags_select inpt1">
+
<input type="hidden" class="cid" value="" />
<div class="hashtags_list"></div></li>
<li><label> </label>
<div class="hashtags_display">
<ul>
<!-- display here the added hashtags--->
</ul>
</div>
<input type="hidden" name="hashtags" class="hashtags_hdn" value="1,3,13">
</ul>
<div class="clr" style="height:0px;"></div>
<h4>Save and quit</h4>
Save the modification and quit.
<ul>
<li><label class="control_label"> </label> <input type="button" id="edit_tailored_btn" class="btn1" value="Save" /></li>
</ul>
</form>
And in the javascript file, I added this action:
$('#edit_tailored_btn').live('click', function(event) {
event.preventDefault();
event.stopPropagation();
var data = $('#edit_tailored_form').serialize();
$.ajax({
url: '/edittailored',
data: data + '&ajx=2',
type: 'post',
success: function(data) {
$('#add_record_wrapper').html(data);
}
});
})
With edit_tailored_btn standing for the Id of the "save" button in the form.
as you can see, I serialize the form to get the data of its inputs so I can send them using ajax (again).
My problem is that the serialize like doesn't work in chrome (it works in firefox). A inspected that and found that it's not actually serialize which is not working, but my form is not recognized, as for alert($('#edit_tailored_form').attr('name')); displaying null.
Any idea?
I found the solution to the problem, When the popup loads, it loads actually in a <div> which is contained in an html form (the form which triggers the event displaying the popup)...
This results in two html forms, one inside the other, so Chrome ignores the child... I didn't pay attention to this problem.
As for Firefox, it doesn't ignore none of them. It gives priority to the form whose submit button is the clicked one.
Thank you for your help
Related
I can't submit the form even though I used preventDefault, (page refreshed and doesn't take any action) My form inputs are filled dynamically here is my code.
HTML
<div class="modal-body">
<form id="update_form">
<!-- loaded below -->
</form>
</div>
another request that fill my form data
#csrf
<div class="form-row">
<div class="form-group col-md-6">
<input type="hidden" name="request_type" value="{{RegisterTypesNames::Faculty}}">
<label>University</label>
<select name="university" class="custom-select" id="university{{$action}}">
<option selected value="1">University of Cansas</option>
</select>
</div>
<div class="form-group col-md-6">
<label>Faculty</label>
<input type="text" class="form-control" name="faculty" id="faculties{{$action}}">
</div>
<div class="form-group col-md-6">
<label>Init</label>
<input type="text" class="form-control" name="short_name" id="short_names{{$action}}">
</div>
</div>
<button type="submit" class="btn btn-primary"><span class="fa fa-save"></span> Save</button>
And jquery code
$('#update_form').submit(function (e) {
$.ajax({
url: '/update_data',
type: "POST",
data: $('#update_form').serialize(),
dataType: "json",
success: function (data) {
console.log(data.result);
}
});
e.preventDefault();
});
Note: I use multiple partial forms like this all others works fine
I can't submit the form even though I used preventDefault, (page refreshed and doesn't take any action)
Interpretation: the statements "page refreshed" and "used preventDefault" indicate that the problem is that the code inside the $("#id").submit( is not firing and the page's default submit is kicking in hence the "page refreshed".
As the jquery event is not firing, it likely means that the HTML does not exist when the script runs. This can usually be handled by putting in a doc.ready; OP indicates that it's already in doc.ready.
The alternative is to use event delegation. Though it's not clear if the code is running before the HTML is generated or if the HTML is added after (subtle difference).
The solution for event delegation is to use:
$(document).on("submit", "#update_form", function(e) {
e.preventDefault();
$.ajax({...
});
First of all I already saw this: Don't include empty parameters when submitting form
But in form you can have not only input but also select for example and what if someone have Javascript disabled? Isn't there a better way to hide empty parameters?
Let's say I have a form like this:
<form asp-controller="Vehicles" asp-action="Index" method="get" >
<p>
<select asp-for="Length" asp-items="Model.Lengths">
<option value="">All</option>
</select>
Brand: <input type="text" asp-for="Search">
<input type="submit" value="Filter" />
</p>
</form>
Now if I picked length from select box and clicked filter, I have this url in the browser window:
https://localhost:44358/Vehicles?Length=15&Search=
but I want this:
https://localhost:44358/Vehicles?Length=15
or if I only searched brand without picking length I want to have this:
https://localhost:44358/Vehicles?Search=Mercedes
Is there some helper tag like adding to form hide-empty="true" or something like that? Any ready to use element or just simple solution for this simple problem?
If you insisit on achieving this requirement, you could try to disable the input which is empty. For disabled field, it will not generate the query string.
Try something like :
<form asp-controller="Vehicles" asp-action="Index" method="get">
<p>
Brand: <input type="text" id="Search" name="Search">
<input type="submit" value="Filter" onclick="return DisableNullFields();"/>
</p>
</form>
#section Scripts{
<script type="text/javascript">
function DisableNullFields() {
$('input').each(function(i) {
var $input = $(this);
if ($input.val() == '')
$input.attr('disabled', 'disabled');
});
}
</script>
}
jsfiddle demo: https://jsfiddle.net/zpufky7u/1/
I have many forms on the site, which was working fine, but just suddenly angular is binding all the forms with class="ng-pristine ng-valid"
Is this a setting or what can cause angular to auto-bind forms?
I'm using angular version: angular#1.4.7
Following is my form, as you can see there is no model inside form
<form name="app_bundle_notification_type" method="post">
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<div class="checkbox">
<label class="required">
<input type="checkbox" id="app_bundle_notification_type_isNewsletter" name="app_bundle_notification_type[isNewsletter]" required="required" value="1" checked="checked">
Yes, I would like to receive email newsletter for new deals, coupons and news.
</label>
</div>
</div>
</div>
</div>
<div class="row m-y-1">
<div class="col-sm-12">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
<input type="hidden" id="app_bundle_notification_type__token" name="app_bundle_notification_type[_token]" class="form-control" value="b-_qAF6LHFy_GtPlsFG3iguhVXfGsj38TXm22Ke8j0k">
</form>
Angular app.js
define(['angular'], function() {
var app = angular.module("myApp", []);
app.init = function () {
angular.bootstrap(document, [app.name]);
};
return app;
});
So far I found the issue, if you do angular.bootstrap(document, [app.name]); then it is binding the form. it was not causing this issue before.
Presuming you are using a form tag around your form, Angular automatically adds those classes to each ng-model inside your form.
This allows you much more control over the elements inside your form to perform any validation or logic you want your form to capture or enforce before submitting.
Much of it is listed in the docs here
https://docs.angularjs.org/api/ng/directive/form
For this reason, Angular prevents the default action (form submission
to the server) unless the <form> element has an action attribute
specified.
New version accepts empty action="", check release version at https://github.com/angular/angular.js/pull/3776
This may be a basic question but I am not able to find a solution.
I have two drop down. I want to append the url parameter from the 2nd drop down to the first and I am not able to. Here is an example.
When I select SUB11 from dropdown1 the parameter is appended in the URL like this
http://localhost:8080/test/testing.html?par1=sub11
Now when I select SUB21 from dropdown2, this is what I get (not what I want)
http://localhost:8080/test/testing.html&par2=sub21
But I want this to be like this, appended to the already existing url paramter.
http://localhost:8080/test/testing.html?par1=sub11&par2=sub21
I think it has got to do with href in the dropdown2 and I don't know what to set it to. Please help.
<ul>
<li>
Menu 1
<ul class="dropdown">
<li>SUB11</li>
<li>SUB12</li>
<li>SUB13</li>
</ul>
</li>
<li>
Menu 2
<ul class="dropdown">
<li>SUB21</li>
<li>SUB22</li>
<li>SUB23</li>
</ul>
</li>
</ul>
Ideally you could create a HTML form and use <select> element.
<form method="get">
<select name="menu-1">
<option value="SUB11">SUB11</option>
<option value="SUB12">SUB12</option>
<option value="SUB13">SUB13</option>
</select>
<select name="menu-2">
<option value="SUB21">SUB21</option>
<option value="SUB22">SUB22</option>
<option value="SUB23">SUB23</option>
</select>
<input type="submit" value="Submit" />
click on submit and you will see they are in the URL:
http://localhost:8080/test/testing.html?menu-1=SUB11&menu-2=SUB21
Check this out https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
Use Jquery
$( '.dropdown' ).on( 'change', function( e ){
document.location.href = "localhost:8080/test/testing.html?par1=" + "&par2=" + $( this ).val() + "seconddropdownvalue";
});
Give id to second drop-down to get value using jquery.
This question already has answers here:
ul in the form not sending to the $_POST
(4 answers)
Closed 9 years ago.
Actually, I am using a list in which I am trying use my <li> element as a part of form.
I am doing something like as shown bellow :-
<form action="index.php" method="post">
<input type="hidden" name="search-type" value="commercial">
<ul>
<li name="search-option" id="buy" value="buy">inputBUY</li>
<li name="search-option" id="rent" value="rent">RENT/LEASE</li>
<li name="search-option" id="pg" value="pg">PG</li>
</ul>
<input type="submit" value="Submit" name="submit">
</form>
But when I submit this form there is no appearance of "search-option" in url means I am not getting any value for "search-option" to my php script.
Is there any way to do this without using any <input > element.
To do so, you need to add an event handler to the li or a parent container, save the item clicked and Ajax the result to the server, or build a form object in memory, or create a URL with the selections.
Here is an example that expects the search to be done on the SAME server as the page is on - I am using jQuery because it is the most convenient for what you are trying to do
I did not wire the Ajax in the live demo.
Live Demo
Suggested HTML
<ul id="search-option">
<li data-option="buy" class="sel">inputBUY</li>
<li data-option="rent">RENT/LEASE</li>
<li data-option="pg">PG</li>
</ul>
Search
<div id="result"></div>
Suggested jQuery
$(function() { // when page loads
$("#searchLink").on("click",function(e) { // when link clicked
e.preventDefault(); // stop the click from any further action
var option = $("#search-option li.sel").data("option"); // get the selected option
$.post("search.php",{"option":option},function(data) { // post the option
$("#result").html(data); // show the result
});
});
$("#search-option li").on("click",function() { // when LI is clicked
$(this)
.addClass("sel")
.siblings().removeClass("sel"); // Swap class
});
});
No, you must use form controls(inputs,select) in order to send data to the server or whatever place you want, not HTML tags
The short, direct answer is no. However....
Often with this you will find some javascript attatched to the list items. When Clicked the javasctipt will update the hidden form field with the clicked value.
Also note that value is not a standard attribute of li
Here is an example of how to do this with jQuery..
Update your html with:
<input type="hidden" id="search-type" name="search-type" value="commercial">
<ul id="selType">
<li name="search-option" id="buy" value="buy">inputBUY</li>
<li name="search-option" id="rent" value="rent">RENT/LEASE</li>
<li name="search-option" id="pg" value="pg">PG</li>
</ul>
And use the following (you will need jQuery and lean about $(document).ready
//Assign the value
$("#selType li").click(function(){
$("#search-type").val($(this).attr("value"));
});
See it in action here: http://jsfiddle.net/Xcgw4/
You can also use plain javasript but for this demo I'll use the jquery library because it makes life easy.
You would also want to do something to indicate what has been clicked etc.
You need to use proper form controls. Replace the li with a select like this:
<form action="index.php" method="post">
<select name="search-option">
<option value="buy">BUY</option>
<option value="rent">RENT/LEASE</option>
<option value="pg">PG</option>
</select>
<input type="submit" value="Submit" name="submit">
</form>
or a radio like this:
<form action="index.php" method="post">
<input type="purchaseType" name="buy" value="buy">BUY<br>
<input type="purchaseType" name="rent" value="rent">RENT/LEASE<br>
<input type="purchaseType" name="pg" value="buy">PG<br>
<input type="submit" value="Submit" name="submit">
</form>