Develop Reference

How to return a url to form action using a javascript function

I want to return a url to form action using javascript function.
I am calling the function like this:
<form action="javascript:getUrl()">
And my function is returning strings of url like this:
function getUrl(){
if(condition)
return "this string url";
else
return "this string url";
}
When I am doing this, the resultant page simply shows the urls in text format on browser instead of loading them.
I am pretty new to these scripting and web designing stuffs.

javascript:getUrl() is not going to be interpreted as JS code, it's just a literally string.
Instead select form element and set its action property:
function getUrl() {
// ...
}
document.querySelector('form').action = getUrl()
Naturally, use more specific selector for your form, id or class.

You can use the id of your form to know the action url.
Javascript :
<script type="text/javascript">
function form_action() {
if (document.getElementById("myFormId").action == "url1.html"){
// do something
}
if (document.getElementById("myFormId").action == "url1.html"){
// do something else
}
// ...
}
</script>
The html form :
<form action="yourUrl" onsubmit="this.action=form_action();" id="myFormId">
...
</form>

Ajax call goes only one time ASP.Net MVC5

I am writing an AJAX function in ASP.Net MVC5 and I am getting a problem that the form AJAX request goes only one time. It is a search page. After I choose the filter I press search I get the correct result. However if I changed the filter and click the search submit again, nothing will happen.
var ajaxFormSubmit = function() {
var $form = $(this);
var options = {
url: $form.attr("action"),
type: $form.attr("method"),
data: $form.serialize()
};
$.ajax(options).done(function (data) {
var target = $($form.attr("data-enbw-target"));
target.replaceWith(data);
debugger;
});
return false;
};
$("form[data-enbw-ajax='true']").submit(ajaxFormSubmit);
<form method="get" id="documentForm" action="#Url.Action("Index", "DocumentSearch")" def data-enbw-ajax="true" data-enbw-target="#documentSearchResult">
<button type="submit" id="submitbtn" name="submitbtn" tabindex="100" class="k-button">
<img src="~/Content/search_small_icon.png" />
#WebResources.DocumentSearchButton
</button>
</form>
#Html.Partial("Results", #Model)
public ActionResult Index(DocumentSearchInput model)
{
if (Request.IsAjaxRequest())
{
return PartialView("Results", result);
}
return View(result);
}
I do not get any error. and when I get a debugger; in javascript. the new data is correct. can you please help me.

You are replacing the form in your ajax success. As such, the new form will not have the submit binding on it. If you truely want to do this you will have to rebind to the new form, or possibly use a delegate instead.
$('parentSelector').on('event', 'childSelector', function(){});
parentSelector - A parent element of the child that pre-exists the child element and should typically not be removed/created during the page lifespan.
childSelector - A selector for the element that will be created/changed/removed at some point in the lifespan of the page.

I found the answer.
the problem wasn't with the submit. the problem was with re-writing the data.
$.ajax(options).done(function (data) {
$("#documentSearchResult").empty();
$("#documentSearchResult").html(data);
});
simply, I empty the div then write inside.

Add a dynamic form field after pressing a button

I have a form with a simple button $builder->add('language_switcher', ButtonType::class); which should simply, if pressed, add another field. To do that, I used Symfony's cookbook http://symfony.com/doc/current/form/dynamic_form_modification.html
$builder
->get('language_switcher')
->addEventListener(
FormEvents::POST_SUBMIT,
function () use ($builder, $options) {
$preparedOptions = $this->prepareOptions($options['data']['productCustomizations']);
$builder->add('lang_switcher'), ChoiceType::class, $preparedOptions);
}
);
When now submitting it via AJAX
<script>
var $button = $('#xyz');
$button.click(function() {
var $form = $(this).closest('form');
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
success: function(html) {
console.log(html);
$('#xyz').replaceWith($(html).find('#lang_switcher'));
}
});
});
</script>
I'm getting the error Buttons do not support event listeners. So I tried it out with a hidden field. I added the hidden field to the Form, set the EventListener to it, and added this data to my AJAX request
data[$('#id_of_hidden_field').attr('name')] = 1;
However this did nothing. The example in the cockbook is after submitting a choice field so I don't know how to adapt it to my needs. I couldn't use a SubmitType, because then it would submit the form, right? I just want to have it with a simple button.
The problem is, that, when I do a console.log(html) I don't see the new html element, so it seems like I'm not getting to the EventListener which is weird, because if I dump contents inside the listener I'm getting some data. It just seems like I'm not getting it inside the response

Ok, got it. The problem was that I used the builder inside the POST_SUBMIT event but I had to use a FormInterface. Since I couldn't add it AFTER submit I had to buy the same callback function as in Symfony's cookbook
$formModifier = function (FormInterface $form, $preparedOptions) {
$form->add($this->childIdentifier, ChoiceType::class, $preparedOptions);
};
And then the listener is built like this
$builder
->get('lang_switcher')
->addEventListener(
FormEvents::POST_SUBMIT,
function (FormEvent $event) use ($formModifier, $options) {
$preparedOptions = $this->prepareOptions($options);
$formModifier($event->getForm()->getParent(), $preparedOptions);
}
);

<script type="text/javascript">
function inputBtn(){
var input=document.createElement('input');
input.type="file";
input.name="img[]";
input.multiple="multiple";
//without this next line, you'll get nuthin' on the display
document.getElementById('target_div').appendChild(input);
}
</script>
<button id="ifile" onclick="inputBtn();">create</button>
<form action="test.php" method="post" enctype="multipart/form-data">
<div id="target_div"></div>
<input type="submit">
</form>

A potentially dangerous Request.Form value was detected from the client (ctl00$cphMain$txCourseDescription="...ace="'MS Sans Serif&#...")

My screen has a Telrik rad popup which populate on a button click(btnCourseDescription). I have taken a label to show html formated data and a textbox to work with code behind file. when I click on btnCourseDescription; Telrik's popup opens and and after submit it shows data on label and assign value to textbox using Javascript ... Here is my Javascript code...
<script type="text/javascript">
function clientShow(sender, eventArgs)
{
//$find();
var txtInput = document.getElementById("<%=lbCourseDescription.ClientID%>");
sender.argument = txtInput.innerHTML;
}
function clientClose(sender, args)
{
if (args.get_argument() != null)
{
var lbInput = document.getElementById("<%=lbCourseDescription.ClientID%>");
var txtInput = document.getElementById("<%=txCourseDescription.ClientID%>");
lbInput.innerHTML = args.get_argument();
txtInput.value = args.get_argument.htmlEncode();
}
}
</script>
Now when I click on btnCourseDescription and and assign value using popup data submits successfully but when I want to update any other field means I am not updating HTML formatted data, HARDERROR occurs:
A potentially dangerous Request.Form value was detected from the client (ctl00$cphMain$txCourseDescription="...ace="'MS Sans Serif&#...").
Please suggest me what should I do?

GET variables disappear, after changing action on form by jQuery.

I trying to change action url on form, by jQuery. I have this code.
<form id='form_a' action='browse.php' method='get'>
<input type="submit" value="Filter" id='but_a'>
</form>
<script>
var def = [];
$('.attr_color').change(function () {
if ($(this).attr('checked')) {
def.push($(this).val());
} else {
def.splice($.inArray($(this).val(), def), 1);
}
color = "&attr_color=" + def.join(",");
if (def.length === 0) {
color = "";
}
$('#form_a').get(0).setAttribute('action', "browse.php?" + color);
});
</script>
When I inspect code by Chrome inspect, form action, is changing, but after the form is send, everything after "browse.php?" disappear.

When you use method="get", all the URL parameters come from the form fields, you can't put URL parameters in the action.
If you want to send additional parameters, you should add hidden input fields to the form, not modify the URL.

That's the GET behavior, see http://www.w3schools.com/tags/att_form_method.asp for more information.
What you want is to redirect your page and append the color variable in your query string.
You can do this in javascript:
window.location.replace("/browse.php?" + color);