I am working with Prototype while using the pylons framework and trying to make an Ajax call.
Here is what my html looks like:
<form method="POST" action = "javascript:void(0)" onsubmit = "new Ajax.Updater('graph','/saffron_main/click_out_display'); ">
<label for="tids">Select Relevant Tids</label>
<select id="tids" multiple="multiple" name="tids" title="Tids">
<option>1</option>
<option>2</option>
</select>
<p><input class = "button" type="submit" name="submit" value="submit" /></p>
</form>
<div id = "graph">
</div>
I can see that the my controller gets called and a http request gets made to /saffron_main/click_out_display. Everything looks like it is working properly. The only problem is the div never gets populated. I am pulling out my hair trying to figure this one out and any helps would be greatly appreciated! Thanks!
What happens if you put a return false; inside the onsubmit after you instantiate an Ajax.Updater ?
Why -
It currently would be returning true by default and the page may be getting posted back, not via Ajax
Related
Disclaimer: After some research online, I did attempt something to make sure the DOM was loaded before I queried, so please check that below, maybe I didn't get it right and that's where the problem comes from.
I know similar questions have already been asked maaaaanyyyy times but my code still doesn't work as I hoped after reading similar responses and trying to adapt my code accordingly, so please help if you can!
I am currently struggling with a form in my website. I wanted to create a form so that the admin could display a message on some of the site's pages. When I wanted to get the text that I put in the form, the returned value was NULL. I then noticed that the form I had just created was in fact nested inside another form, which doesn't work. I tried bypassing the problem by deleting the sub-form and using a formaction field but I keep having a NULL return value.
(I am using Spip for my website).
Here is the base HTML code of the admin part of the website, which contains the first form
<form method="post" action="#ENV{action}" id="form1">
<div>
#ACTION_FORMULAIRE{#ENV{action}}
[(#REM) ------------------------ Alert Message ------------------------ ]
<INCLURE{fond=formulaires/configure_alert_message}>
<script>
var msg_al = document.getElementById('alert_ortho').value;
console.log(msg_al);</script> <!-- THIS DISPLAYS THE TEXT THAT I WANT-->
<p class="buttons">
[(#ENV{choix}|=={valider_seul}|non)
<input type="submit" class="submit over" title="global_update" value="global_update" />
<input type="reset" class="submit" title="global_delete" value="global_delete" />
]
<input type="submit" class="submit" title="global_update" value="global_update" />
</p>
</div>
</form>
Then, here is configure_alert_message.html. I want the message to be sent to my page edit_article/html.
<div>
<label for="name">Alert Message :</label>
<textarea type="text" id="alert_ortho" name="alert_message">Blablabla.</textarea>
</div>
<div class="button">
<button type="submit" formaction="/edit_article.html" form="form1">Save alert message</button>
</div>
<p></p>
Lastly, here is the part of my edit_article.html file which calls for the previous code (this code is also inside a form field, I don't know if that could be a problem). I added the jQuery ready() in it in order to make sure that my query happens after DOM is loaded:
<div style="padding:10px; margin:10px; border: 3px solid #A0A0A0; text-align: center;background: #FFFF00;">
<span style="color:#FF0000;"> <strong>
<script>
$(document).ready(function() {
// do stuff when DOM is ready
var msg_al = document.getElementById('alert_ortho').value;
console.log(msg_al); <!-- THIS RETURNS "Cannot read property 'value' of null"-->
}); </script>
</strong> </span> </div>
<p class='buttons'><input type='submit' name="save" class='submit' value='save_button' /></p>
Why do I, when I try to get my message through document.getElementById('alert_ortho'), keep getting null on my page? I thought by using formaction and ready() before my query I wouldn't have this problem any more. Did I do it wrong for the DOM?
Thank you!
document.getElementById() searches the DOM of the current document for an element with a given ID.
It won't find an element in a different HTML document.
When you submit a form the data in it will be passed in the request body (for a POST form) or the query string of the URL. You need to read it from there.
Note that client-side JS has no access to the request body so this will require server-side code.
I'm working on a collection of web apps using REACT JS. For part of the current app I'm working on, I have a modal that renders on a state change and has a form to receive a name with some related data. I want the submit button in this form to submit the code to a submitNewName() function which will compare the submitted name & data to names & data from a JSON file. Unfortunately, I cannot test to see if any of my code works because the page refreshes upon submission, which refreshes the developer console.
Within my submitNewName() function, I have the following line of code:
var newName = document.getElementById("newNameForm").submit(). I read another similar question where someone suggested adding function(e) {e.preventDefault();} as an argument for .submit, but when I tried that it didn't change anything.
Here's my form:
<form id="addNameForm" className="RNGpopupTXT">
Name: <input type="text" name="name"/>
<br/><br/>
Type: <select>
<option value="fname">First Name</option>
<option value="lname">Last Name</option>
<option value="sname">Single Name (e.g. Madonna)</option>
<option value="title">Title</option>
</select>
<br/><br/>
Gender: <select>
<option value="mg">Male</option>
<option value="fg">Female</option>
<option value="ng">Non-specific</option>
</select>
<br/><br/>
Tags: <input type="text" size="40" name="tags" placeholder=" eg. 'Star Wars,Scifi,Space'"/>
<br/><br/><br/><br/>
<div align="center">
<input type="submit" value="Submit" className="mdc-button" style={{ textDecoration: 'none' }} onClick={() => this.submitNewName()}/>
</div>
</form>
and here's my function:
submitNewName() {
var newName = document.getElementById("newNameForm").submit(function(e) {
e.preventDefault();
});
}
I would like the data from the form to be given to the function in a way that would allow it to be compared to the JSON file data. I also do not want the page to refresh, as that refreshes the state of the page, closing the modal prematurely. When I run the program now, it does send an error message to the console, but I cannot read what it says because the console is refreshed with the web page.
It feels like you could use more React to make your life easier here.
You don't have to use the form's onSubmit event. You could just add an onClick handler to the button. In that function, you could do all the comparing you want and, whrn you're ready, it can do the submitting logic too.
If you wanted to compare the form's values, you might want to keep those values in state. To do so though, you would need onChange functions on each of the form elements to update the state as the user provides input.
As I didn't see much React code in your example, I took the liberty of writing some out. Hopefully it will help you:
https://codesandbox.io/s/elastic-shape-yrv0b
this bites me too, like many others I have a simple ng-form (:
cleared for bravity) in a partial:
<form ng-submit="functionName()">
<input type="text" class="postField" ng-model="model.text" required ng-maxlength=200 />
<button class="postBT" ng-click="functionName()" ng-class="BToverclass" ng-mouseover="BToverclass = 'overShadow'" ng-mouseleave="BToverclass=''">Post</button>
</div>
</form>
for some reason every form submit, we get 2 posts to the controller, with all the data doubled. I checked and the specific controller doesn't appear in the html, but only in the route. Any idea what I'm missing?
Thanks!
You have both an ng-click() calling functionName() and a call to it from ng-submit. Each results in a call to your function. You only want the submit one.
FYI, you also have a </div> with no opening <div> for it to close.
Here's working code:
<form ng-submit="functionName()">
<input type="text" class="postField" ng-model="model.text" required ng-maxlength=200 />
<button class="postBT" ng-class="BToverclass" ng-mouseover="BToverclass = 'overShadow'" ng-mouseleave="BToverclass=''">Post</button>
</form>
Why this form wont submit?
<div data-dojo-type="dijit/form/Form" id="myForm" data-dojo-id="myForm"
encType="multipart/form-data" action="Cart.php" method="post">
<input type="text" name="searchName"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true" id="searchName" />
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="sl" id="radioOne" value="full"/> <label for="radioOne">Full</label>
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="sl" id="radioTwo" value="short"/> <label for="radioTwo">Short</label>
Data Select
<select name="select1" data-dojo-type="dijit/form/Select">
<option value="2">Data1</option>
<option value="1">Data2</option>
</select>
<button data-dojo-type="dijit/form/Button" type="submit" name="submitButton" value="Submit">Submit</button>
</div>
Some javascript too:
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit/layout/AccordionContainer");
dojo.require("dijit/layout/BorderContainer");
dojo.require("dijit/layout/ContentPane");
</script>
Maybe its a stupid question, but ive been looking at it several hours and still cant figure it out.
Thanks in advance
I'm not sure what do you meet by won't submit. I moved your code into JS Bin (http://jsbin.com/iziwen/1/edit) and it works fine:
If you experience problems on the server side I suggest you change encType="multipart/form-data" to enctype="application/x-www-form-urlencoded" (or do not use it at all as it is the default value) - you do not need multipart/form-data, you are not sending files (see more here).
If this won't help, please specify won't submit more precisely.
EDIT: I do not use dijit/form/Form submit functionality, I just grab form data and send those via XHR to my web service, but I had a look at how submit functionality works and it seems so you need an <iframe> to use submit functionality. So this is what I changed:
A. Form definition - target:"formSubmitIframe" points to iframe id:
<form
id="myForm"
data-dojo-id="myForm"
data-dojo-type="dijit/form/Form"
data-dojo-props="action:'Cart.php', method:'post', target:'formSubmitIframe'"
>
B. Added iframe:
<iframe name="formSubmitIframe" src="about:blank"></iframe>
Once all works for you add style="display:none;" to iframe to hide it.
See it in action in JS Bin: http://jsbin.com/iziwen/7/edit
N.B.: I do not recommend submitting a form this way. If you do not need to go cross-domain or sending files, simply get form data via var data = dijit.byId("myForm").get("value"), so you will have form data in JSON and then send them up via dojo/xhr or dojo/request (for dojo 1.8+).
Also dojo/xhr is capable to send form just by providing a form id to it - here is a nice example: http://livedocs.dojotoolkit.org/dojo/xhr
So I have a really simple form on a website that's entirely AJAX based for loading its pages. The only way for this form to work would be for it to do some AJAX magic as well, so I set about doing it. I had the form tested so I knew it all worked.
Here's the javascript for my form.
The variable "fullpath" just tells me what page is loaded at the moment, all of the pages are stored in the local "pages" directory.
It serializes the form and sends it to the server, with some debugging alerts.
$(document).ready(function() {
$("#regForm").submit(function(event) {
alert($(this).serialize());
$.post("pages/" + fullpath, $(this).serialize(), function(data){
alert(data);
});
return false;
});
});
Here's the form itself
<form name="input" id="regForm">
<div class="form-field"><label>Username</label> <input type="text" name="username"/></div>
<div class="form-field"><label>Password</label> <input type="password" name="password"/></div>
<div class="form-field"><label>Confirm Password</label> <input type="password" name="password2"/></div>
<div class="form-field"><label>Screen Name</label> <input type="text" name="screenname"/></div>
<div class="form-field"><label>Email Address</label> <input type="text" name="address"/></div>
<div class="form-field"><label>Group</label> <select name="usergroup">
<option value="0">Superuser</option>
<option value="1">Admin</option>
<option value="2">Moderator</option>
<option value="3">Advmember</option>
<option value="4">Member</option>
<option value="5">Guest</option>
</select> <br />
<label>Submit: </label><input type="submit" value="Submit" />
</div>
</form>
And here's some PHP I put at the beginning of the page
print_r($_POST);
So I fill the form with some bogus info, and I press submit. All of the data is displayed with the
alert($(this).serialize());
And then the call is successful and I see the loaded form with my
alert(data);
But, where I ask to print the $_POST array in PHP, this is all I get
Array ()
So jQuery is sending the data, it's getting the page back, but for some reason the POST variables aren't going through. Anyone care to lend a hand?
This works in a Fiddle.
Are you sure that fullpath is defined globally ? I don't see any other possible source of errors in your code.
Edit: I can see the actual problem from your comments: 301 redirects don't work through POST:
If the 301 status code is received in response to a request other than GET or HEAD, the user agent MUST NOT automatically redirect the request unless it can be confirmed by the user, since this might change the conditions under which the request was issued.
You need remove this redirect thing, so "pages/" + fullpath directly points to the PHP script. This could also be a problem with your server configuration.
In case of Apache, you might also want to have a look at this SO question.
I packed your snippets together in an html-file and it worked for me so the problem has to be somewhere else in your code. (source: http://pastebin.com/y4Dfsepv)
You have not specified method="post" in your form. If you do not specify, it becomes method="get" by default. So there is no values in the $_POST, you can print_R($_GET) and you will see values there.
Change the below line from:
<form name="input" id="regForm">
to:
<form name="input" id="regForm" method="post">
Update:
Updating the answer as per the comment. The "pages/" + fullpath in $.post might be pointing to the wrong page, try alerting it and check server response in firebug. Make sure it is pointing to the page you want else use the full path to the php script like below:
$.post("http://localhost/pages/" + fullpath, $(this).serialize(), function(data)
you need to chance your direct link."pages/" + fullpath. That is a problem, ajax can't recognize your link when you post
** Editing because we've learned that there is a 301 Redirect code being returned by the server **
See this: https://mdk.fr/blog/post-data-lost-on-301-moved-permanently.html
301 Redirects lose contents of the POST. So jQuery is sending it along, but the server redirects it to the right location of the script without the POST data. You need to figure out where the right location of the script is and specify that in your jquery call to avoid the redirect.
You don't have method="POST" in your form.