How to submit clone of jQuery form with current data? - javascript

I need to dynamically create and submit HTML form.
I join many forms into one AJAX request so I clone them and send by jQuery. Code in the link shows the not working part. The problem is that jQuery is sending original HTML code instead of generated/user changes code.
What do I wrong?
http://ajax.dev.brown.sk/test1.html
Whole example:
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
// copy inputs and take it to form element
$clone = $(this).clone(true,true);
// display the code to below
$("pre:first").text($clone[0].outerHTML);
// ajax form submit
$.post("/post.php", $clone.serialize(), function(data){
// data contains output of <?php print_r($_POST) ?>
$("pre:last").text(data);
});
return false;
});
});
</script>
</head>
<body>
<form>
<select name="select">
<option value="a">aaa</option>
<option value="b" selected="selected">bbb</option>
<option value="c">ccc</option>
</select>
<input type="submit" />
</form>
<hr />
<pre></pre>
<hr />
<pre></pre>
</body>
</html>
EDIT:
I think the problem is with serialization of cloned form. Check this example:
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
// copy inputs and take it to form element
$clone = $(this).clone();
// display the serialized values below
$("pre").text($clone.serialize());
return false;
});
});
</script>
</head>
<body>
<form>
<select name="select">
<option value="a">aaa</option>
<option value="b" selected="selected">bbb</option>
<option value="c">ccc</option>
</select>
<input type="submit" />
</form>
<pre></pre>
</body>
</html>

You need to make it response to the delegate since it not with the initial DOM
$(document).ready(function(){
$("form").on('submit',function(){
// copy inputs and take it to form element
$clone = $(this).clone(true,true);
// display the code to below
$("pre:first").append($clone[0].outerHTML);
// ajax form submit
$.post("/post.php", $clone.serialize(), function(data){
$("pre:last").append(data);
});
return false;
});
});
Edit
You are only getting the outerHTML and you need everything
$(document).ready(function(){
$("form").on('submit',function(){
// copy inputs and take it to form element
$clone = $(this).clone(true,true);
// display the code to below
$("pre:first").append($clone);
// ajax form submit
$.post("/post.php", $clone.serialize(), function(data){
$("pre:last").append(data);
});
return false;
});
});
I hope this can help :)

Related

Send button value by post request via jquery

My code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
<button id="test" value="123" name="test" >ok</button>
</form>
<script>
$(document).ready(function () {
$("#test").click(function() {
var combinedData = $("#test").serialize();
$.post(
"element_submit.php",
combinedData
).done(function(data) {
//alert("Successfully submitted!");
$("#result").html(data);
}).fail(function () {
//alert("Error submitting forms!");
})
});
});
</script>
<div id="result" ></div>
The element_submit.php file
<?php
//just to test it should output in the #result div
echo $_POST['test'];
?>
What I am trying to do is submit the with the value="attribute" so the data is serialized and send the post request, it's not like a submit when user insert a value and submit,What I need is to get the value attribute and submit to the php, this code is only for To simplify and illustrate what I am trying to do, because in this page I have the following buttons with ids #follow #unfollow so I need a way to get the button value to make the user follow and unfollow.
you need to serialize the form - not the elements within it .You can also have the triggering button outside the form which will prevent hte form from submitting on the button click.
<form id="testForm">
<input type="hidden" name="testInput" value="123"/>
</form>
<button name="test" id="testButton">submit</button>
...
<script>
$(document).ready(function () {
$("#testButton").click(function() {
var combinedData = $("#testForm").serialize();...
$(document).ready(function () {
$("#testButton").click(function() {
var combinedData = $("#testForm").serialize();
console.log(combinedData);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
<input type="hidden" value="123" name="testinput"/>
</form>
<button id="testButton">Click</button>
Straight JS might help you out. Include a function that sends the id and get the value of that id. Then just send a regular post of the value without serialize... easier.
<script>
function fetchButtonValue(theId){
var p = document.getElementById(theId).value;
alert (p);
}
</script>
<button id="myFormBtn" value ="woo"
onclick="fetchButtonValue(this.id)">My Button</button>
this works...
You could also put a class on the button let's say class="followBTN" then on a click you could just snag the value by $(this).val() I'd use this method if I had more than one button per page.

How to submit form without button?

I am new here. I want my code to submit form without submit button. My code run like this:
Every time when user input data in input text and press enter, the result will be display on the same page just below input text. This code will work perfectly is I use submit button to submit data. Can anyone help me with this ? Thanks in advance.
This is my result.html
$(document).ready(function(){
$("#code").change(function(){
var st = '';
$('#Myform input[type=text]').each(function(){
st = st+ '<td>'+$(this).val()+'</td>';
$(this).val('');
});
$('#result').append('<tr>'+st+'</tr>');
});
});
html
<form id="Myform">
<table>
<tr>
<td>
<p>Code:</p>
</td>
<td><input id="code" type="text" name="code" size="40" autofocus/></td>
</tr>
</table>
</form>
<table id="result"></table>
This is my code.php
<?php if( $_REQUEST["code"] ) {$code = $_REQUEST['code'];}?>
A cursory Google search would have brought up that jQuery provides a means of doing this.
You can trigger form submission via either the submit() or trigger() methods, i.e.
$('#Myform').submit()
or
$('#Myform').trigger('submit')
The former is merely a shortcut method to the latter.
how are you?
If you need to send to another php page, you can to send AJAX, if don't want to send, you can show data directly to your js, without ajax.
https://jsfiddle.net/5L9Leso8/
UPDATE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>teste</title>
</head>
<body>
<div>
<label for="test">
<input type="text" name="test" id="test">
<p id="rest"></p>
</label>
</div>
<script>
$('#test').on('change', function(e) {
e.preventDefault();
var self = $(this);
/** if you don't need to send to your php code
$('#rest').html(self.val());
**/
if (self.val().length > 0) {
$.ajax({
url: 'yourUrlphp',
type: 'post',
data: {
yourText: self.val()
},
success: function(data) {
$('#rest').html(data);
}
});
}
});
</script>
</body>
</html>

jquery ddslick not working

Okay, this is continuing from my prior asked question:
iFrame with Variable URL in PHP Variable
I even have it set to automatically turn on when the page is ready and that still doesnt work.
Now I am using ddslick so I can show an icon next to each drop down in a form.
This is what Im doing:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ddslick.min.js"></script>
Then in the dropdown:
<select form="form1" id="MyMenu">
<option value="0" data-imagesrc="http://example.com/entry/value0.png" data-description="Description 0" >Nothing</option>
<option value="1" data-imagesrc="http://example.com/entry/value1.png" data-description="Description 1" >Value 1</option>
<option value="2" data-imagesrc="http://example.com/entry/value2.png" data-description="Description 2" >Value 2</option>
</select>
The scripts:
<script>
//Make it slick!
$('#make-it-slick').on('click', function(){
$('#MyMenu').ddslick();
});
//Restore Original
$('#restore').on('click', function(){
$('#MyMenu').ddslick('destroy');
});
$(document).ready(function(){
$('#MyMenu').ddslick(); // Turn on Slickness
});
</script>
Lastly the form
<form name="form1" id="form1">
<input type="submit" name="submit" id="submit" value="Submit Form">
<button id="make-it-slick"> Make it slick!</button>
<button id="restore"> Restore to Original</button>
</form>
Please replace the code you have written in script tag with below code
<script type="text/javascript">
//Make it slick!
$(document).ready(function(){
$('#MyMenu').ddslick(); // Turn on Slickness
$('#make-it-slick').click(function(){
$('#MyMenu').ddslick();
return false; //do not propogate click
});
$('#restore').click(function(){
$('#MyMenu').ddslick('destroy');
return false; //do not propogate click
});
});
</script>
With your code, when button is clicked, that click is followed and form is submitted. button tag in form submits the form. So now what we need to do here is when button is clicked, form should not get submit but it should only execute the javascript code. We do this by returning false in click method.
Hope this helps :)

javascript jquery carrying html form POST data

SO I have a form that look similar to
<form action="test.php" id="checksub" method="post">
<div>
<select name="mydropdown">
<option value="buy">buy</option>
<option value="sell">sell</option>
</select>
</div>
autocomplete text input that triggers "checksub"
<input type="submit" id="checksub" name="checksub" style="visibility:hidden">
<input type="submit" id="newsbutton" name="newsbutton">
</form>
<script type="text/javascript">
$('#newbutton').click(function() {
var newaction = "cantfinditems.php";
$("#checksub").prop("action", newaction);
$('#checksub').submit();
});
</script>
Now the submit button is hidden because the autocomplete triggers it anyway, but if the user cant find what they are looking for I want a button that says "cant find what your'e looking for?"
I want this button to have a different action to the form action, ie window.location = cantfinditems.php
but I also want to carry the POST data from the form ie "mydropdown".
Thank you
Ok, so you need a second button, which calls a JavaScript function. In this function, you do a number of things:
Set the action attribute of the form to your alternate action (e.g. cantfinditems.php)
var newaction = "cantfinditems.php";
$("#form_id").prop("action", newaction);
Submit the form
$('#form_id').submit();
So a full example would be:
<script type="text/javascript">
$('#yourbuttonid').click(function() {
var newaction = "cantfinditems.php";
$("#form_id").prop("action", newaction);
$('#form_id').submit();
});
</script>

Submit form to 2 different action page

I would like to have a form that can submit to two different action pages based on a select box.
Meaning if I select in the select box Products, the action would be products.html, and if I select Users, the action would be users.html
I have found many examples that have two submit buttons, but I need only one submit button.
Any ideas on how to do it?
you can use jQuery for that ...
if selected value equals something
set form attribute action to the other thing not initial action
this is pseudo code of course ..
here is a working solution :
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#selectList").change(function(){
if($('#selectList').val() == 1){
$("#yourform").attr("action","secondaryaction");
}
});
});
</script>
</head>
<body>
<select name="dummy" id="selectList">
<option value="0">foo</option>
<option value="1">bar</option>
</select>
<form id="yourform" action="primaryaction">
bla bla
</form>
</body>
</html>
Try something like this (assuming a form named "myForm"):
document.myForm.onsubmit = function() {
if (this.mySelector.value == 'products') {
this.action = 'products.html';
}
// the "else" isn't necessary: leave it at "users.html" as a default.
};
read about new attributes
Attributes for form submission that may be specified on submit buttons. The attributes are: formaction, formenctype, formmethod, formnovalidate, and formtarget
Works in IE >= 11
my example for will be demonstrated point :
<form action="1.php">
<input type="text" >
<button value="go"> GOOOOOOOOOOOO</button>
<button value="go" formaction="2.php"> DONNNNNNNNNNNNNNNNOOOO</button>
</form>
if(condition==products)
document.forms[0].action = 'products.html;
else
document.forms[0].action = 'users.html;

Categories