Dynamically read GET string of a form using javascript - javascript

tl;dr: I want an easy way to retrieve the GET-string that is created by a form to dynamically load the according data without refreshing.
Normally, pressing submit on this form:
<form action = "action.php" method="get">
<p>
<input type="text" name="foo" value="bar" />
<input type="checkbox" name="check" value="true" checked="checked" />
<input type="submit" />
</p>
</form>
would create and access this string: action.php?foo=bar&check=true
I would like to access this string without reloading and without having to fiddle it together by iterating form elements (which is what I'm doing at the moment). The aim is to put the string into an XMLHttpRequest if something in the form changes so I can update my data on the webpage accordingly.

var string = $("form").serialize();
http://api.jquery.com/serialize/

Related

HTML post form not worked when migrated to Angular

I am doing a POST request using an HTML form, I copied the same form content to a new blank Angular project and it didn't work and throws an error. Does Angular process forms in a different way?
Actually, what the HTML/JS file is doing is to post form content to a URL (by sending a unique generated hash and some other information), upon success it will redirect to the correct page, otherwise, it will throw an error.
Unfortunately, the backend doesn't support sending a JSON request to it, but only a form.
The code snippet for the HTML form:
<form name="formpaiement" Id="formpaiement" action="https://testpayment.cmi.co.ma/fim/est3Dgate" method="post">
<input type="hidden" name="hashAlgorithm" value="ver3">
<input type="hidden" name="encoding" value="UTF-8">
<input type="hidden" name="TranType" value="PreAuth">
<input type="hidden" name="currency" value="504">
<input type="hidden" name="amount" value="1">
<input type="hidden" name="CallbackResponse" value="true">
<input type="hidden" name="BillToCountry" value="MA">
<input type="hidden" name="storetype" value="3D_PAY_HOSTING">
<input type="hidden" name="failUrl" value="https://testpayment.cmi.co.ma/fim/est3dteststoreutf8?pagelang=en">
<input type="hidden" name="clientid" value="80000xxxx">
<input type="hidden" name="okUrl" value="http://cmiecom.dx.am/ok.php">
<input type="hidden" name="lang" value="en">
<input type="hidden" name="MERCHANTSAFE" value="MERCHANTSAFE" />
Token : <input type="Text" name="MERCHANTSAFEKEY" value="ABC123">
<input type="hidden" name="MERCHANTSAFEAUTHTYPE" value="3DPAYAUTH">
<input type="hidden" name="MERCHANTSAFEACQUIRER" value="60">
<input type="hidden" name="MERCHANTGROUPID" value="60029">
<input type="hidden" name="hash" value="hash">
</form>
<input type="submit" value="valider" onclick="document.formpaiement.submit()">
Link to the working HTML file
Link to the Angular project (you may notice that's not the best way to submit form content, but, just for demo purposes, it will look similar to the above HTML file).
I'm guessing the problem is how you've defined the hash field in you form. In the plunker that generates the error, you're sending undefined as the value for the hash field. In the stackblitz example that works there's an actual value.
Here's what your form data looks like in the plunker:
And here's what the stackblitz sends:
In your working example, you have an onclick event that appears to compute the value for "hash", append it to the form and then submit it. Snippet taken from the stackblitz:
function submitformpaiement() {
hashval = "";
// compute value for "hashval" (removed for brevity)
$('<input />').attr('type', 'hidden').attr('name', "hash").attr('value', hash).appendTo('#formpaiement');
document.formpaiement.submit();
}
<input type="submit" value="valider" onclick="submitformpaiement();">
In your Angular version, you've added the hash field and bound the value to something that doesn't exist (hence undefined). Your onclick event also doesn't execute any function, it just submits the form.
<form name="formpaiement" Id="formpaiement" action="https://testpayment.cmi.co.ma/fim/est3Dgate" method="post">
<!--lots of inputs (removed for brevity) -->
<!-- "hashCMI" doesn't exist!! -->
<input type="hidden" name="hash" [value]="hashCMI">
</form>
I suspect you need to make sure you generate a value for hash before actually submitting.
Angular has a very specific way of working with forms (https://angular.io/guide/forms-overview), and a very specific way of working with web services (https://angular.io/guide/http). Unfortunately, just having the form in the template is not going to work - you might as well not use Angular at all if that's your intention.
But that is not the only problem.
Looking at your two examples, what you have on Stackblitz describing as the "HTML example" vs. on Plunkr with Angular are not doing the same thing, so you can't compare one to the other.
In your Stackblitz example, there is a whole bunch of javascript that's executed prior to the form being submitted. If I change your example to do the same thing that your Angular example is doing, you get the same exact result as the Angular error. Here's the comparable "just HTML" example: https://stackblitz.com/edit/web-platform-2gvw46
So the solution is to make sure your Angular application is doing the same exact logic as your original Stackblitz example, and does it in an Angular way (you can't copy/paste the JavaScript from the other example and expect it to work).

How to reset the form data in html using jquery/javascript && and also how to send the form data to an email using jquery?

I'm new to jquery
I'm working on a form data html,
now i need to reset the data on click on the reset button and also need to transfer the form data to email on click on submit button.
Can anyone help me in solving this??
Before Posting the question I have gone through the link which Pierre C. has updated and my question is different from that question and even how to add /can we add "type" attribute in anchor tag.??
here is the html:
<form id="form" method="post">
<fieldset>
<label>
<input type="text" value="Name">
</label>
<label>
<input type="text" value="Email">
</label>
<label>
<input type="text" value="Phone">
</label>
<label>
<textarea>Message</textarea>
</label>
<div class="btns">
Clear
Send
</div>
</fieldset>
</form>
To clear all the data within a form, all you have to do is add an
<input type="reset" name="reset" value="Reset"></input>
However, reset buttons are annoying and no one ever uses them, so I suggest you just leave that. With regards to sending the form, the way I would do it is write this app in ASP.NET MVC and just put the mail logic in the controller, or create an API for your app, then create an Ajax POST on the button click using the form data as API parameters.

Can POST and GET be combined within a single input type?

I have a form running a shopping cart style application on my site. To add items, I POST values to a form using a submit button. To remove items, I have to use a GET command.
What I want to do is to limit the selection possibilities - as you select one option, others are removed. For instance, if I have three options: Apples, Oranges, Bananas you are only able to select one.
Apples
Oranges
Bananas
If you select Apples, I want to post the value "Apples" whilst using a GET command to remove "Bananas" and "Oranges".
Currently I am doing this to post the values:
<form method="post">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="id" value="Apples" />
<input type="hidden" name="name" value="Apples" />
<input type="hidden" name="color" value="red" />
<input type="hidden" name="shape" value="round" />
<div id="apples" >
<input type="submit" name="my-add-button" class="add" value="&nbsp"/>&nbsp Apples
</div>
</fieldset>
</form>
And to remove the items I do this:
remove Bananas and Oranges
Is there a way to do both at the same time? I have tried doing an onclick event like this:
<div id="Apples" >
<input type="submit" name="my-add-button" class="add" value="&nbsp" onclick="location.href='index.php?jcartRemove[]=Bananas&jcartRemove[]=Oranges';" />&nbsp Apples
</div>
and I have also tried to use an action at the start of the form
But neither of these work - they will still submit the new item, but will not remove the item. Any idea of a good way to do both together?
Technically, yes, but it's a hack:
<form method="post" action="foo.php?x=y">
<input type="text" name="a" value="b" />
</form>
If the form is set to POST, then any <input> and <textarea> within the form will go as POST data, but any query strings you place into the action's url will show up at the server as GET data:
$_GET['x'] -> 'y'
$_POST['a'] => 'b'
$_POST['x'] => undefined index
But note that clicking a link that's inside a <form> does NOT submit the form. it's like clicking any other link and will just go to the new address.
You can use $_REQUEST. As per the php documentation, quoted as follows:
An associative array that by default contains the contents of $_GET, $_POST and $_COOKIE
As above, you can then use the following hack:
<form method="post" action="foo.php?x=y">
<input type="text" name="a" value="b" />
</form>
EDIT: If both of the GET and POST requests work individually, it is possible that your PHP is where the problem lies - You haven't posted it, so I can't see where the issue could be. You could just put together some javascript to fire the remove request then fire the add request when clicked:
jQuery("input[name|='my-add-button']").click(function() {
var addform = jQuery(this);
event.preventDefault();
$.get("index.php?jcartRemove[]=Bananas&jcartRemove[]=Oranges", function(data) {
addform.submit();
});
});

JQuery - Submit array of data along with a form

I have form on the page, in the background I gather make an array of data that I want to pass to a back end controller. I can $post but I don't want the request to be ajax. I want to submit the array along with form, when the user presses the submit button. Does Javascript allow this anyway?
You can use iframe if you donot want to use ajax.
To POST to an iframe you must use form target.
Sample code :
<form
id="moodleform" target="iframe"
method="post" action="http://www.example.com/login/index.php"
>
<input type="hidden" name="username" value="guest"/>
<input type="hidden" name="password" value="guest"/>
<input type="hidden" name="testcookies" value="1"/>
</form>
<iframe name="iframe"></iframe>
<script type="text/javascript">
document.getElementById('moodleform').submit();
</script>
Why not have a hidden field that you populate with a serialized version of the data?
Alternatively, you could have multiple hidden input form elements with the same name, which (back-end application dependant) should give you the POST variable as an array of values.
Building on that, you could add the hidden input elements dynamically to the form.

How can I call a new page and add in the value of a form variable

I would like to link to a new page in the format:
/topic/create&qty=4
Right now I have the value (which is the number 4) stored in an field in a form. I tried to put everything in the form with a post but then realized this isn't what I want to do. I just need clicking on a button to go to link to a new page and send the input field value. The reason I want just a link is that later on I will have posts from that form and they will be handled completely differently.
Is this possible? All I know is that
<form action="/adminTopics" method="post">
isn't what I need.
you can not use POST to send data via url, but you can use GET like this: /topic/create?qty=4
EDIT: Clarification
Writing red in the text field and pressing submit on this form...
<form action="/handler.php" method="GET">
<input type="text" name="color" />
<input type="submit" />
</form>
will produce identical results on the server side to clicking this link
<a href='/handler.php?color=red'>rum</a>
If the url is
/topic/create?qty=4
and it has to be posted, then you can use
<form action="/topic/create" method="post">
<input type="hidden" name="qty" value="4" />
</form>
Send
or
<script>
window.onload=function() {
document.forms[0].submit();
}
</script>
If you do NOT need POST, then just call the URL which is the same as a GET
<input id="qty" type="hidden" name="qty" value="4" />
<a href="/topic/create"
onclick="location=this.href+'?qty='+document.getElementById('qty').value;
return false">Go</a>

Categories