Action parameter of form wrong when changing it via jquery - javascript

I am encountering this strange behaviour with jquery and I can't seem to fix it.
Basically what is happening is I am trying to set the action parameter of a form to a specific URL before submitting it.
When I submit the form, for some reason the URL I set it to just gets appended to a different URL, which I guess is the URL that was in there before.
This is the code I am using to set the action parameter.
//clear action parameter
jQuery("form[name='form1']").attr('action','');
alert(forwardUrl);
//set the action parameter
jQuery("form[name='form1']").attr('action',forwardUrl);
//action parameter output
alert('action parameter attribute: ' + jQuery("form[name='form1']").attr('action'));
//submit form
jQuery("form[name='form1']").submit();
So for example for using the forwardUrl = "test.php"
the output of both alerts is test.php.
However when I run the code and the form is submitting it is POSTING the values to https://www.test.com/test.php.
I realize that it could be the standard behaviour to append to the url it is posted from. If that is the case how can I POST to a different URL that happens to be forwardUrl?
I also tried to use .prop() instead of .attr().
Thank you very much in advance!

Use absolute path, as mentioned by Rory:
baseUrl = "https://www.test2.com/"; // Domain you need to send the form to
forwardUrl = baseUrl + "test.php";

You can simply set the action when you click on the submit button with the help of onclick attribute
<input type='submit' value='Submit' onclick='this.form.action="forwardUrl";' />
or change your code to something like this, first provide a id to the form and use that id to set the action attribute
document.getElementById('formID').action = 'forwardUrl';
or by using form name as
document.getElementsByName("form1")[0].action = 'forwardUrl';

I managed to fix the problem by using decodeURIComponent(forwardUrl) on the forwardUrl.

Related

Submit GET form in the url instead in the paramaters

I have a get method form which goes to
mysite.com/?p=search&q=QUERY
but I want to let the form send me to
mysite.com/search/QUERY.
I have rewritten URL turned on in .htaccess.
Any help? How do I do this?
Just remove the names of all these elements inside the form and take the values with js or jquery and set them to action attribute like
$('#formid).attr('action','/url/search/'+query);
You would do this in onsubmit event and return true so that form gets submitted.

Wanted to hide the parameters on javascript form submit?

My URL looks like the below format:
http://hostname:8080/search/?N=4294967292&Ntt=abcdef&add=1&Nr=AND(OR(a:abc,a:def,a:ghi),OR(b:abc,b:def,b:ghi));
I am submitting a form through javascript submit. I wanted to hide the Nr parameter value while submit the form.
My piece of code below:
$(".apply-btn").click(function(){
var nr=loadQuery();
var submitUrl = window.location.href;
submitUrl=submitUrl+nr;
$('#myForm').attr('action',submitUrl);
$('#myForm').submit();
});
any help on this..?
You can't.
You are asking the user's browser to send data to a server. The user can inspect that data.
The closest you could come would be to make a POST request instead (by submitting the form with the data in actual form fields instead of generating a custom action via JS). The information would still be visible in the Net tab of the developer tools that come as standard in most browsers these days.
create a hidden field in the form with the name Nr
set the value of the hidden field to the value of nr (instead of appending nr to the URL)
set the method attribute of the form to POST
set the action attribute of the form to the value of window.location.href
submit the form
Well you could use a POST request plus SSL to encryp your requests. As Quentin said, this also would not stop the user from seeing your request with the developers tool bar, but during the submission it is encrypted.

Two ways to process jQuery submitted form

I have a form with button A and button B. It's sent by a jQuery function called clicking on one of the buttons. At the end of this long function which is checking prerequisites, the form is sent using this line:
$('#wlform').submit();
I want to adjust this code to send something to be able to distinguish which button was pressed. Something in JavaScript similar to <input type="submit" name="submitbutton1"/>
Provide us with some code?
I think you're talking about two buttons that both should have their own ID's. You could try and catch the ID attributes after you click them;
$(this).attr('id');
Or change 'id' into 'name' if you want to get that value.
I suppose you use a javascrit click event to execute your javascript functions.
In javascript, you can add a hidden input to your form :
$(...).click(function() {
... // Your code
var clicked_button = $(this);
$('#wlform').append($('<input type="hidden" name="clicked-button"/>').val(clicked_button.attr('id'));
$('#wlform').submit();
});
With that, the id of the clicked_button will be sent with the form.
Just give to the hidden input the value of the button id attribute. You could do something similar to this (before the submit statement):
$('input[type=hidden]').val($(this).attr('id'));
Where $(this) is the button clicked.
None of the answers worked, so I've put something together from these on my own. I've added a hidden input field, clicked-button as you suggested. Then when calling my precheck_submit function, I pass another parameter (c) for storing which has been clicked. In the precheck_submit function I added $('#clicked-button').val(c);. It works. Anyways, thanks for your efforts.

Simple form that redirects with query string from field

I am brushing up on my HTML while in the process of learning django and am wanting to create a form (single field and button). The button, when pushed should redirect to a page with the value in the form as a query string. For example, if the user types in "test", then pushes the button, they should be redirected to "webpage.com?test".
Am I correct in thinking the best way to do this is with javascript? If so, would anyone mind providing an example?
Thanks!
document.forms[0].addEventListener('submit', function() {
window.location.href = 'webpage.com?fieldname='
+ document.getElementById('yourfieldid').value;
}, false);
since you haven't posted any code i just took the first form on the page and found a fictitious field to use as the query string parameter.
You can do the redirection directly with javascript:
location.href = "webpage.com?" + your_variable
Or make a form that is targeted at webpage.com which has an input area named test. in this way, when it is submitted the test value will automatically be added to the url.
When you click on the button change that value and submit the form:
$('#button').click(function() {
$('#your_test_field').val(your_variable);
$('#your_form').submit();
}
window.location.href="mypage.php?arg="+variable

<html: image directly calling struts action class

I want to call submitformFinal(this.form); which is a client side validation.But the problem is that html:image property directly calls struts, so the server side validation takes place before calling the submitformFinal(this.form).
If submitformFinal fails , server side validations should not take place ,but in this case html:image directly calls the struts action classs.... any suggestions?
Right now my code is:-<html:image
src='<%=contextPath + "/img/save_orange.gif"%>'
onclick="javascript:submitformFinal(this.form); "/>
What about returning the value from submitformFinal():
<html:image src='<%=contextPath + "/img/save_orange.gif"%>'
onclick="return submitformFinal(this.form);"/>
Now if submitformFinal() returns false it wont submit, if it returns true then it will be submitted.
Update :
After seeing your next problem, here is my thoughts.
1) You should not use <html:image> for submitting the form. <html:submit> is the correct submit button tag. I will recommend to change the <html:image> to <html:submit>. U can add the image to the button by styleId, styleClass attributes. No need to call onClick on the button. It will just submit your form when you click it.
2) Now add onSubmit on the <html:form> tag like this:
<html:form action="someAction.do" onSubmit="return submitformFinal();">
This will work like as desired I guess.

Categories