Getting data from generated form in jquery - javascript

I have the following code setup:
http://jsfiddle.net/bABHU/2/
Had to change it a little bit to get it all on jsfiddle but the problem i'm having is the data from the first from gets put into the query string to send off to the ajax call, but the form elements generated after that (which comes from a JSON call) don't get submitted when clicking the next button again.
So when you get to the second question how can I submit the 'answer' input that was generated. - see the console for the outputs.
Hope that makes sense.
Any help is appreciated.
Thanks.

This is happening because you are replacing your entire <form> element with the new HTML content from question 2. Replace $('.FinderOptionsInner').html with $('#formStep').html
See http://jsfiddle.net/M3eZp/1/

When you replace the markup for findOptionsInner, you obliterate the form itself. Hence it not serializing. Also, you have no close tag for your form.
<form action="" method="post" name="formStep" id="formStep">
<div class="FinderOptionsInner">
<p>
<label class="label_check">
<input type="radio" name="answer" value="1" id="answer_0" />
Answer 1</label>
<br />
<label class="label_check">
<input type="radio" name="answer" value="2" id="answer_1" />
Answer 2</label>
<br />
</p>
</div>
</form>
<div class="nextButton-step1 nextButton">Next
</div>
Works just fine (notice that I've also fixed the close tags for form and the div at the bottom).

Related

How to edit a table cell using a form

Hello I would really love to use some help here, I have this homework where i need to click on add,edit, delete buttons on a table: I GOT THE ADD AND DELETE ONES FIGURED OUT.But i'm stuck on the edit one, so I have to click on the edit button in the last cell the edit button would display a form in that form the cell information should appear and i need to be able to mofidy them. here is the html code of the form:
<!--edit form-->
<form id="editform" style="display: none;">
<fieldset>
<legend>Informations du joueur</legend>
<label>Nom: <input name="Name" /></label>
<label>
Palmares :
<textarea name="address" cols="30" rows="3"></textarea>
</label>
<input type="button" value="Soumettre" onclick="Soumettre2()">
<input type="button" value="Annuler" onclick="Cancel()" >
</fieldset>
</form>
the first button ( Soumetter2 () function ) is where i have the problem, i didnt share the table html because it has a lot of information in it but its just a basic html table. Thanks for any help in advance
I tried some google ressources but nothing like I want. i shouldnt use jquery

Auto Login html for live.com account

Good Evening Everyone. I need some help with an auto login procedure.
Specific Question = How can I get initiate a 2nd form action within the same html page? I also need to create a 5 second delay so the 1st action can complete
The Result I'm looking for = I want to double click on saved .html file and then get automatically logged into my email
The Website =
HTML Code:
https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1489346474&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fauthRedirect%3dtrue%26nlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015
How did I get this URL? = msn.com>clicked on outlook>clicked on sign in
The problem =
I have created a javascript function within a saved html page and I can get past the login in page. The issue is that I cannot get my password to be correctly placed in the password field and the submit button to work. For my live.com account it is a 2 page authentication. The first page is where you place your username and click next and then the 2 page is where you enter your password and click sign in.
What I have tried =
(1)Because there is a placeholder text, I've tried a POST method, but
I can't get it to work. POST would be best, but I can't figure it
out.
(2) I've tried get element by id and that does not work because
my password is just written on top of the placeholder text and does
not get replaced
(3) CURRENT STATE. What I have written now is 2 form
actions. The 1st form action (logonForm) enters my username and the
2nd form action (passForm) is supposed to enter my password and then
log me in. Is 2 form actions the best way to accomplish this?
WHAT I HAVE SO FAR =
<html>
<body style="display: none">
<form action="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1485483982&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015" method="POST" name="logonForm" ENCTYPE="application/x-www-form-urlencoded"
id="loginForm">
<input type="hidden" name="destination" value="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1485483982&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015">
<input type="hidden" name="username" value="this is my username#live.com" >
<input type="hidden" name="passwd" value="this is my password">
<input type="hidden" name="flags" value="4">
<input type="hidden" name="forcedownlevel" value="0">
<input type="radio" name="trusted" value="4" class="rdo" checked>
<input type="hidden" name="isUtf8" value="1">
</form>
<form action="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1485483982&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015" method="POST" name="passForm" ENCTYPE="application/x-www-form-urlencoded"
id="passwordForm">
<input type="hidden" name="destination" value="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1485483982&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015">
<input type="hidden" name="username" value="This is my username#live.com" >
<input type="hidden" name="passwd" value="this is my password">
<input type="hidden" name="flags" value="4">
<input type="hidden" name="forcedownlevel" value="0">
<input type="radio" name="trusted" value="4" class="rdo" checked>
<input type="hidden" name="isUtf8" value="1">
<input type="hidden" name="data-bind" value="this is my password">
</form>
<script type="text/javascript">
document.forms["logonForm"].submit();
document.forms["passForm"].submit();
</script>
</body>
</html>
I am a new student to java and I'm ambitious about coding, developing, and learning. I just can't seem to get this figured out. I'm sure my html/java looks like a jumbled mess but that's because I've been trying all types of things to see if anything would work and I got excited when i was able to get past the login page.
I do apologize for the long post, I just wanted to get as much info as I have out. I'm trying to be as specific as I can be. This is my first post in stack overflow and I couldn't be more excited to be part of this community.
Thanks in advance for your help!
TechStudent01
You cannot do this.
Once a <form> is sent (either as GET or POST), which is a synchronous action, your script basically stops executing, and unless the targeted webpage fails to load (and the browser doesn't display an error page, which can happen with severe network issues), .submit() is a no-return function : if it executed properly, you're not on the same page any more.
Letting you run scripts from a webpage onto a newly loaded other would be the open door to loads of security issues, so this, by design, is not allowed. As such, you can't get your password to be typed in automatically into the log-in form.
In addition, Microsoft account forms are subject to CSRF verification, preventing you from logging in from a page not sent by Microsoft, i.e. your HTML file.
Also, what you are trying to achieve is exactly the purpose of password managers that provide some sort of browser integration.

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.

ng-model not updating for radio button

So I have a radio button whose model is needed by the function that is called when I hit the button below it:
<form class="form-inline" role="form">
<div class="form-group">
<div>
<input type="radio" ng-model="display" value="true">True <input type="radio" ng-model="display" value="false">False
</div>
<button>
....
</button>
</div>
</form>
However, the results never come back right. If I go in and debug the code, within the javascript every single time the damn value of $scope.display is "true". It doesn't have to do with me not using ng-value, based on what I have read about it, right? Previously, this element worked correctly and was not in a form/form-inline/form-group, but a simple div. Does that have something to do with it?
it does work here is a pluncker: pluncker
<form name="myForm" ng-controller="ExampleController">
<input type="radio" ng-model="display" value="true">true
<input type="radio" ng-model="display" value="false">
false
<br>
display = {{display}}

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();
});
});

Categories