jQuery form action change - javascript

Normally to change the action attribute of a form in jQuery I would do the following:
<form id="removeLightboxForm" action="">
...
</form>
$('#removeLightboxForm').attr("action", "view/#close");
But I usually use this for when the action attribute is empty on the HTML form tag itself. I'm now trying to use this on a form where the action attribute already contains a default URL and is causing problems.
In this example, the form action is present:
<form id="removeLightboxForm" action="view/">
...
</form>
But when I do this:
$('#removeLightboxForm').attr("action", "view/#close");
I end up with the new URL/action being added to the original URL/action, for example:
<form action="view/view/#close" ...
Is this how it's supposed to work or am I doing something wrong?

I would try clearing it first:
$('#removeLightboxForm').attr("action", "").attr("action", "view/#close");
or
$('#removeLightboxForm').removeAttr("action").attr("action", "view/#close");

Related

Javascript/Jquery, callback before submit that changes attribute values

I have a several forms my webpage, they can be in any location or order...
<form id="carform" action='/form.php' js-url='http:www.domain.com/formA.php' >
...
</form>
<form id="truckform" action='/form.php' js-url='http:www.domain.com/formB.php' >
...
</form>
<form id="boatform" action='/form.php' js-url='http:www.domain.com/formC.php' >
...
</form>
I would like to add a callback that can replace the action attribute value with the js-url value. I am not sure how to reference the relevant form values. Any help appreciated.
This would be easier if I was referencing a specific form id, but in this case, the code needs to reference the submitting form, whichever it is.
document.addEventListener("DOMContentLoaded", function(event) {
$('form').submit(function() {
// Change the action attribute to the js-url attribute value if js-url attribute
return true; // submit the form
});
});
Doing this is plain Javascript is ok too.

Make Post Api Call from HTML

I want to make a post API call from a anchor HTML tag and URL will be included in the href.
How can i attach the body parameters.
<a href='http:/test_url:5002/api/GetFile'></a>
And in this I want to send the body parameters in the call as well.
I want to find a way to include this in the html tag itself, not in the javascript file.
Help will be appreciated.
Links are designed to GET a URL. You cannot make a POST request directly with them.
Use a form with a submit button instead.
Thats what forms are for. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
Just create a form with a submit button. You can also specify if you want to open the requested URL in a new tab with the target attribute.
This is a way you could do it
<form method="POST" action="/api/PostFile">
<!-- with input in between -->
<!-- and a submit button-->
</form>
there's only one way for you to POST data with a link... you would need to wrap the code in a <form> and use that link to submit the form, for example:
<form id="frm" ation="http:/test_url:5002/api/GetFile">
<input type="hidden" name="param1" value="value_for_param1" />
...
...
</form>
any input can be used to append parameters to the <form>, as an example, the hidden is used
now, remember that you shouldn't use http:/test_url:5002 just minimize to /api/getfile or you would most likely get caught into CORS issues

jquery the parameter passed in is null when set form action attribute

I am trying to set my form action to another page with a parameter in url using code below:
ui.setFormActionToTargetPage = function () {
$('form').get(0).setAttribute('action', 'myTargetPage.html?id='+id);
};
My html page is like
<form class="form-horizontal row-border" data-validate="parsley" id="validate-form" enctype="multipart/form-data">
...
<button class="btn-default" onclick="ui.setFormActionToTargetPage();">Cancel</button>
...
</form>
However, I did get forwarded to myTargetPage.html but it seems the id parameter is not passed while some form content was passed as parameter 'text'. I verified that when setFormActionToTargetPage is called the url is as expected. However, when it hit the target page, the window.location.href is not correct, which is 'myTargetPage.html?text= some form content'. Anyone know why?
Thanks.
Change the form method to post so the form data doesn't interfere with the querystring. If you have your id value somewhere and it's working already then great, otherwise you can pass it through the button onclick call like this.
<form method="post" class="form-horizontal row-border" data-validate="parsley" id="validate-form" enctype="multipart/form-data">
<button class="btn-default" onclick="ui.setFormActionToTargetPage(123);">Cancel</button>
</form>
ui.setFormActionToTargetPage = function (id) {
$('form').prop('action', 'myTargetPage.html?id='+id);
};

confusing syntax in JSP portal

JSP code in Liferay portal..
<portlet:actionURL name="addDetails" var="addDetailsURL" />
where from var gets value ?
var just exposes the action URL value through a variable named addDetailsURL. This is so that you can use it conveniently in a link as so:
Link
is used to perform any action(Action Phase) i.e user submitting form and controller(processAction) processes that request.
i.e
<form action="<%= addDetailsURL %>" method="POST" name="form">
// input fields which will get submitted to controller
</form>
from pageContext.
ActionURL.toString() is assigned to addDetailsURL and added to pageContext

passing javascript value into form action

I have the form:
<form name="form1" method="post" action="test.php?date=javascript:this.form.date2.value">
I am using a DatetimePicker for PHP like below:
$myCalendar = new tc_calendar("date2");
$myCalendar->setIcon("calendar/images/iconCalendar.gif");
$myCalendar->setDate(date('d'), date('m'), date('Y'));
$myCalendar->setPath("calendar/");
$myCalendar->setYearInterval(1970, 2020);
$myCalendar->dateAllow('2008-05-13', '2015-03-01', false);
$myCalendar->startMonday(true);
$myCalendar->autoSubmit(true, "form1", "test.php");
$myCalendar->autoSubmit(true, "form1");
$myCalendar->showWeeks(true);
$myCalendar->writeScript();
The thing is i cannot pass the date value from datetimepicker into form action where the url is "test.php?=date="
How would this be possible to pass the value of datetimepicker by just clicking on calendar, not using any extra button and using onsubmit event.
After execution the result in URL looks like this:
test.php?date=javascript:this.form.date2.value
Thanks
You should not need javascript to submit a form without ajax.
As you want to sent GET variables with ? sign, jsut use GET method in your form and set the name of the input to the name of the variable you want to get sent. (if you can replace 'date2' with 'date'):
<form name="form1" method="get" action="test.php">
<input name='date' />

Categories

Resources