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;" />
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 have a form on a Website, and then another form inside of a Bootstrap modal.
The main form has certain fields e.g "Neck, Chest, Waist" while the form inside of the modal has only one e-mail field.
I'm planning to add some "hidden" inputs into the secondary form named "chest, waist" etc and I would like the main form field's value to be passed into the secondary form's hidden inputs as that's the one which is actually going to be submitted.
Is it possible without javascript? If not, I'd prefer some jQuery solution as it must be something pretty minor but I just can't figure it out.
Just copy the values of the form to the form with hidden inputs when it is submitted. Copying on keyup is unnecessary.
<form id="form1">
Input
<input type="text" id="input"/>
<button type="submit">Submit</button>
</form>
<form id="form2">
<input type="text" id="input2"/>
</form>
<script>
document.getElementById("form1").addEventListener("submit", (e)=>{
e.preventDefault();
document.getElementById("input2").value = document.getElementById("input").value;
document.getElementById("form2").submit();
});
</script>
I've a problem with my form. I want to make standard PHP form but AngularJS is blocking the "Submit" button.
When I click the "Submit" button, it returns some errors in console. And remember I don't want to dynamically submit.
The error is:
An invalid form control with name='' is not focusable.
This example
<body ng-app="mainApp">
<form action="post.php" method="post">
<div ng-controller="MainCtrl">
<label for="titlex">Title</label>
<input id="titlex" class="form-control" type="text" maxlength="75" min="10" name="titlex" required>
</div>
<input type="submit" value="Send">
</form>
</body>
This issue pops up in different cases:
You have a hidden form element that has a required attribute for validation.
You hide an form element before send your data.
Some required form elements does not have a name attribute.
Your submit input does not have a name attribute.
You can try to add a name attribute to your submit input:
<input type="submit" value="Send" name="send">
or you can setup your form to be not validated by the browser mechanics by using
<form name="myform" novalidate>
Try adding name attribute in input tag.
Only form elements with a name attribute will have their values passed when submitting a form.
<input type="submit" value="Send" name="send">
Hope this solves your problem.
I have a form which I want to submit upon button click which is outside the form, here is my HTML :
<form id="checkin" name="checkin" id="checkin" action="#" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
Here is my jQuery :
$("button").live('click', function() {
$("#checkin").submit();
});
$("#checkin").live('submit', function() {
});
When I click submit button inside the form its submitting ok, but its not submitting when I click on the button which is outside the form tags, why? how can I fix this ?
You are selecting all the <button> elements but you are trying to select an <input>.
It works when it is inside the form because the the normal submit functionality runs.
Change the selector to match the element you actually have: input[type=submit]
Better yet, forget about the JS and just structure your HTML better so that the submit button is inside the form.
If you're handling the form processing using JavaScript, then you'll want to return false in your button and form processing code.
I was able to achieve identical results using the JavaScript below, and the two HTML examples (with the button inside and outside of the form element).
JavaScript/jQuery
$("button").live('click', function() {
$("#checkin").submit();
return false;
});
$("#checkin").live('submit', function(){
alert("Hello world!");
return false;
});
HTML Example 1
Button inside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
<button>test</button>
</form>
HTML Example 2
Button outside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
<button>test</button>
As I said, both examples performed as expected. You may want to double-check your button listening code to ensure that you are in fact using the button element. If you're using an element with the id attribute set to button, then you'll want to ensure you are using the proper jQuery selector:
$("#button").live('click', function() { // ...
you can have a simple hyperlink outside of your form like this
click to submit and that's all you need
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>