I have an HTML form to edit the details of a person in a database system I have at my place of work. Part of the form allows the user to upload a picture of the person. However, this is giving me trouble, because I'm trying to make the form more Ajax-y by letting the user upload the picture and see it successfully uploaded before they submit the person's details to be saved. The part that's giving me trouble is that it seems to necessitate a nested form (that is, the upload form inside the details form), like so:
<form name="details">
<input name="detail1">
<input name="detail2">
<form name="pictureupload">
<input type="file" name="pic">
<input type="submit" name="upload" value="Upload">
</form>
<input type="submit">
</form>
The way I'm hoping to make it work is that the user would fill out the details of the form, select a picture and hit the "Upload" button, then do an AJAX update when the file is uploaded so that they can see the picture before pressing the final "Submit" button.
Is there a good way to have the upload form be "inside" the details form (at least in appearance on the page) but not nested inside the details form in the HTML?
You aren't allowed to have forms nested inside each other in valid HTML. Also, file uploads through XMLHTTPRequest objects (the most common AJAX technique) don't work in most browsers.
All is not lost, though. For the AJAX uploads, you will need to use an IFRAME, as presented here: http://www.webtoolkit.info/ajax-file-upload.html
The approach I would suggest for the form is to split it into three form elements. You will have a form that holds the fields before the upload form, the upload form, and the form that holds the fields after the upload form. The first form will not have any submit button. The fields in the first form are duplicated in the third form, as hidden inputs. When the last form's submit button is clicked, some javascript will run that will copy the field data from the first form into the third, so it gets submitted with the last form.
For example, your HTML might look like this::
<form name="details1">
<input id="fake_detail1" name="detail1" type="text"/>
<input id="fake_detail2" name="detail2" type="text"/>
</form>
<form name="pictureupload">
<input type="file" name="pic">
<input type="submit" name="upload" value="Upload">
</form>
<form name="details2">
<input id="detail1" name="detail1" type="hidden"/>
<input id="detail2" name="detail2" type="hidden"/>
<input id="detail3" name="detail3" type="text"/>
<input type="submit">
</form>
You can place the "nested" form in another location on the page and only show it when your user clicks on a "Upload Picture..." button.
The nested form may be initially invisible. There are some very nice popups that allow you to display the nested form over the outer form and allow the user to upload the nested form independently.
<div id="nestedform">
<form name="pictureupload">
<input type="file" name="pic">
<input type="submit" name="upload" value="Upload">
</form>
</div>
<div id="mainform">
<form name="details">
<input name="detail1">
<input name="detail2">
Upload Picture...
<input type="submit">
</form>
</div>
Related
When I submit form by using below function it is submitting but values are not passed through this function. I use all functions but nothing found:
document.getElementById("postad").submit();
Form is given below.
<form action="register.php" id="postad" method="post">
<input class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
<input class="button" type="button" name="save" value="Publish" onclick="send();" />
</form>
Your form contains two form controls. Neither will be a successful control (i.e. one that appears in the submitted data), but for different reasons.
Only form controls with name attributes can be successful. Your text input doesn't have a name. (It also doesn't have a default value, so you need to type in it first).
Buttons can only be successful if they are the submit button used to submit the form. Your button isn't a submit button and you use JavaScript to submit the form.
There is no name attribute in your input text fields
<input name="post_title" class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
.........^
I want a javascript code that will take an input as Post ID and add the id to this default url (https:bemaearn.xyz/?p=) so that the submit button will load the post on WordPress. A user can access any post using the post ID
I do not think you need javascript.
<form action="/">
<input type="text" id="posts" name="p"><br>
<input type="submit" value="Submit">
</form>
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.
I was wondering how can I submit div data to MySQL. Im not used to javascript so I dont really know whats happening on the javascript part but how can I get or input the action="" part and method="" part and can I or should I add value="" to the hidden input???
Form html code:
<form onsubmit="document.getElementById('hidden_data').value=document.getElementById('showing_data').innerHTML;">
<input id="hidden_data" name="data" type="hidden"/>
<div id="showing_data" class="commenttext" contenteditable="true"></div>
<input type="submit" Value="Enter" id="submitthis">
</form>
Use the hidden field inside the form tag and use the JavaScript to put the value inside it. You can get the hidden field in the $_POST['hydName'].Put the data on the click of the submit button into the hidden field. Keep your action and method of the form same as required. After the click event is fired, it will submit the form to its action URL
<input type="submit" onclick="document.getElememtById('hidden').value = document.getElementById('div').innerHtml;" />
I have a form, which has a few different submit buttons on it all doing different things with the same post data.
Lets say for simplicity sake the form looks like this:
<form method="post">
<input type="hidden" name="ids" value="1,2,3,4" />
<input type="submit" id="picking" name="picking" value="Picking" />
<input type="submit" id="shipping" name="shipping" value="Shipping" />
<input type="submit" id="invoice" name="invoice" value="Invoice" />
</form>
At the moment the form submits to itself and I work out server side which submit button is pressed, build a URL from the POST data, then do a PHP redirect to what I need to go. This works fine.
However, I am looking for the form to post its data to a new window, but only when "invoice" is clicked. This rules out just adding target="_blank" to the form, as the other 2 buttons would submit to new pages as well.
I also can't split the form into 3 different forms as the data is a lot more complex than the above, and a lot of it is input by the user.
Is there a way to do this using JavaScript/JQuery? If so, where would I start?
Thanks
could you not add target blank to the form when invoice is clicked?:
$("#invoice").click(function(){
$('#form_id').attr('target', '_blank');
});
or:
$(document).on("click","#invoice",function(){
$('#form_id').attr('target', '_blank');
});
Try adding a click handler to the correct submit button.
$('#invoice').on('click', function(){
//doStuff
});
This will allow you to control the action of #invoice without affecting the others.