I successfully load iframe into div #output with AJAX. This script play video for me.
jQuery( document ).ready( function( $ ) {
$( '.play_next' ).on('click', function( event ) {
event.preventDefault();
$('#output').empty();
var meta_key = $( this ).data( 'meta-key' );
var post_id = $( this ).data( 'post-id' );
$.ajax( {
url: ajaxobject.ajaxurl,
type: 'POST',
dataType: 'html',
data: {
action : 'wpse_296903_call_meta',
post_id : post_id,
meta_key : meta_key,
},
success: function( result) {
$( '#output' ).append( result );
}
});
});
});
Now no more need of #output in div, Need to submit this value with
form.
<form action="http://other-domain.com/" method="POST" target="_black">
<input type="submit" name="iframe" value="" />
</form>
This form submit iframe to other domain, which open in new tab with property target="_black.
How put #output value in Form and submit with Ajax?
Edit
You can not access the contents of an iframe from outside of one if its an iframe with a different origin.
If its the same origin
let form = document.createElement('form');
let input = document.createElement('input');
input.type = 'hidden';
input.value = encodeURIComponent(document.querySelector('iframe').contentDocument.innerHTML);
input.name = 'iframe_data';
form.action = 'myDestination.html'
form.appendChild(input);
document.body.appendChild(form);
form.submit();
Related
I have a laravel project where admin can change user data via form. I want this form to be submitted by ajax. But it doesn't get submited.
I have a form:
<form id="userData{{$loop->iteration}}" method="POST">
#csrf
<!--some inputs-->
</form>
<button id="changeUserData{{$loop->iteration}}" data-id="#userData{{$loop->iteration}}">Save</button>
JS:
$("#changeUserData{{$loop->iteration}}").click(function (e) {
var ele = $(this);
var formId = ele.attr("data-id");
console.log(formId);
$(formId).submit(function (e){
console.log("test2");
e.preventDefault();
$.ajax({
url: '{{url('changeUserData')}}',
method: "PATCH",
data: $(formId).serialize(),
success: function(){
console.log("test");
}
})
})
});
When I press the button the first console.log gets fired but nothing else. I checked if formId matches the form id and it does so I don't know what's wrong.
The problem is .submit() with handler argument does not submit the form itself. It just binds an event handler to the form's submit event.
You may just remove that bind and it should work:
$("#changeUserData{{$loop->iteration}}").click(function (e) {
var ele = $(this);
var formId = ele.attr("data-id");
console.log(formId);
$.ajax({
url: '{{url('changeUserData')}}',
method: "PATCH",
data: $(formId).serialize(),
success: function(){
console.log("test");
}
})
})
I got a simple POST call to a PHP file on my website. For some reason it's not working though. The console.log shows"undefined"
function check() {
var url = "../API/keychecker.php";
var spullen = $("keyval").val;
$.ajax({
type: "POST",
url: url,
data: {
key: spullen
},
success: function(data) {
console.log(data);
}
})
}
Here is the PHP file:
<?php
echo json_encode($_POST['key']);
?>
Your keyval call doesn't specify the type of element identifier. jQuery won't find the element you're looking for as you currently have it.
You must specify:
For classes:
$( ".keyval" ).val();
For ID
$( "#keyval" ).val();
For input name
$( "input[name=keyval]" ).val();
That should attach the value to the POST request.
var url = "API/keychecker.php";
var spullen = $( "keyval" ).val();
I created a simple text field form and a button on a webpage:
<input type="text" value="name"><button>click me</button>
and I created a short script in jquery:
<script>
$( "button" ).click(function() {
var text = $( "input" ).text();
$( "input" ).val( text );
});
</script>
What I want to achieve is to take the value written by user in the text field and after hitting the button - inserting taken value from text field to the database. I have database ready, but I've never connected with that through jquery, I only used php for that. Right now when I press the button, I get the "name" string inside the text field (instead of string typed before). How should I change the code to make it work?
Thanks!
You need to continue to use php to talk to the database and use
jQuery.ajax(), or the .post() or .get() shorthand, to send the data to php. So:
$("button").click(function() {
$.post('myphpfile.php', { mytext: $('input').val() });
});
then in your php file:
<?php
if( $_REQUEST["mytext"] )
{
$mytext = $_REQUEST['mytext'];
// insert $mytext into database
}
?>
$( "button" ).click(function() {
$.ajax({
method: "POST",
url: "save.php",
data: $("input").val()
})
.done(function( msg ) {
alert( "Data Saved" );
});
});
Use AJAX call to call you service and pass you value parameter along with that.
var val=$('#text').val();
var xhr = $.ajax({
type: "POST",
url: "some.php",
data: "value="+val,
success: function(msg){
alert( "Data Saved: " + msg );
}
});
<input type="text" value="name" id="name">
<input type="button" id="button" value="Click Me"/>
<script>
$( "#button" ).click(function() {
var text = $("#name").val();
$.ajax({
url: 'location.php',
type: "POST",
data: {
text: text
},
success: function(response)
{
alert("inserted");
}
});
});
</script>
it will just get the input value than you have to post it using ajax and using mysql you can insert the value to database
I have the following code which is supposed submit a form via Ajax without having to reload the page:
$( document ).on('submit', '.login_form', function( event ){
event.preventDefault();
var $this = $(this);
$.ajax({
data: "action=login_submit&" + $this.serialize(),
type: "POST",
url: _ajax_login_settings.ajaxurl,
success: function( msg ){
ajax_login_register_show_message( $this, msg );
}
});
});
However for some reason, despite the event.preventDefault(); function which is supposed to prevent the form from actually firing, it actually does fire.
My question is, how do I prevent the above form from reloading the page?
Thanks
don't attach a listener on document instead use a on click handler on the submit button and change the type to button.
<button id="form1SubmitBtn">Submit</button>
$('#form1SubmitBtn').click(function(){
//do ajax here
});
Happy Coding !!!
for instance you can write like this
$(".login_form").on('submit', function( event ){
var $this = $(this);
$.ajax({
data: "action=login_submit&" + $this.serialize(),
type: "POST",
url: _ajax_login_settings.ajaxurl,
success: function( msg ){
ajax_login_register_show_message( $this, msg );
}
});
event.preventDefault();
});
You can use jquery and ajax to do that. Here is a nice piece code below that doesn't refresh the page but instead on submit the form gets hidden and gets replaced by a thank you message. The form data is sent to an email address using sendmail.php script.
Assuming your form has 3 input fields - name, email and message.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery("#button").click(function() {
var name=jQuery('#name').val();
var email=jQuery('#email').val();
var message=jQuery('#message').val();
var dataString = 'name='+ name + '&email=' + email + '&message=' + message;
jQuery.ajax({
type: "POST",
url: "sendmail.php",
data: dataString,
success: function() {
jQuery('#contact_form').html("<div id='message'></div>");
jQuery('#contactForm').hide();
jQuery('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>Thank you for your submission. We will be in touch shortly.</p>").hide()
.fadeIn(1500, function() {
});
}
});
return false;
});
});
</script>
On top of your form tag just add this to display the thank you message.
<div id='message'></div>
Enjoy coding!!!!!!!
Im doing a AJAX call and once I get the response, I want to replace a submit button with a label...But this is not working. I get the alert msg ie; the response from the Ajax call but the replacewith command fails.
Can you please tell me what is the mistake Im doing..
Replacewith command
$( this ).closest( 'tr' ).find( 'input:label' ).replaceWith("<label for=\'success\'>SUCCESS</label>");
Code:
$("#table_appl,#table_enfr,#table_det01,#table_det02,#table_det03,#table_det04,#table_det05,#table_datais").on( "click", "input:submit", function( event ) {
//alert('Hi')
//event.preventDefault();
var fieldvalue = $(this).closest('tr').find('input:text').val();
var fieldname = $(this).closest('tr').find('input:text').attr('name');
alert('fieldname = ' + fieldname)
alert('fieldvalue = ' + fieldvalue)
$.ajax({
type:"GET",
url:"/validate/",
data:{'fieldvalue':fieldvalue,'fieldname':fieldname},
success:function(data){
if (data == 'Y'){
var item = $(this).closest('tr').find('input:label')
alert("Gonna be replaced" + item);
$( this ).closest( 'tr' ).find( 'input:label' );
$( this ).closest( 'tr' ).find( 'input:label' ).replaceWith("<label for=\'success\'>SUCCESS</label>");
}
alert("Response = "+ data);
}
});
return false;
})
Here's a fiddle.
And here's the code:
<form role="form" method="POST" action="/validate/" id="input_form">
<input id="myInput">
<button type="submit" id="submitButton">Click me!</button>
</form>
with the script:
$("#submitButton").click(function () {
event.preventDefault();
$.get("/validate/", function (d){
if (d == "Y"){
$("#submitButton").replaceWith("<label>SUCCESS</label>");
}
})
})
Is this about what you want? I guess you'll have to adapt the .replaceWith() part to find the correct element...