jquery - valor - validar formulario html javascript
Cambiar la acción de un formulario con JavaScript/jQuery (6)
Estoy de acuerdo con Paolo en que necesitamos ver más código. Probé este ejemplo demasiado simplificado y funcionó. Esto significa que es capaz de cambiar la acción del formulario sobre la marcha.
<script type="text/javascript">
function submitForm(){
var form_url = $("#openid_form").attr("action");
alert("Before - action=" + form_url);
//changing the action to google.com
$("#openid_form").attr("action","http://google.com");
alert("After - action = "+$("#openid_form").attr("action"));
//submit the form
$("#openid_form").submit();
}
</script>
<form id="openid_form" action="test.html">
First Name:<input type="text" name="fname" /><br/>
Last Name: <input type="text" name="lname" /><br/>
<input type="button" onclick="submitForm()" value="Submit Form" />
</form>
EDITAR: Probé el código actualizado que publicó y encontré un error de sintaxis en la declaración de providers_large . Hay una coma extra. Firefox ignora el problema, pero IE8 arroja un error.
var providers_large = {
google: {
name: ''Google'',
url: ''https://www.google.com/accounts/o8/id''
},
facebook: {
name: ''Facebook'',
form_url: ''http://wikipediamaze.rpxnow.com/facebook/start?token_url=http://www.wikipediamaze.com/Accounts/Logon''
}, //<-- Here''s the problem. Remove that comma
};
Tengo un problema que me está volviendo loco. Estoy intentando modificar el selector de apertura para admitir Facebook. Estoy usando RPXNow como mi proveedor, por lo que requiere que el formulario se envíe a una URL diferente a la estándar.
Por ejemplo. RpxNow requiere que configure mi formulario de esta manera:
<form action="https://wikipediamaze.rpxnow.com/openid/start?token_url=...">
Esto funciona para todos los proveedores a excepción de Facebook y Myspace. Esos requieren que el formulario se publique en una url diferente como esta:
<form action="https://wikipediamaze.rpxnow.com/facebook/start?token_url=...">
y
<form action="https://wikipediamaze.rpxnow.com/myspace/start?token_url=...">
El selector de id abierto tiene un grupo de botones en el formulario, cada uno representando a los proveedores de código abierto. Lo que trato de hacer es detectar cuando se hace clic en el botón de Facebook o de Myspace y se cambia la acción en el formulario antes de enviarlo. Sin embargo, no está funcionando. Aquí está mi código.
Probé varias variaciones, todas con la misma excepción "no compatible"
$("#openid_form").attr("action", form_url)
document.forms[0].action = form_url
¿Alguna sugerencia?
Actualizar
Aquí hay más detalles sobre el código. He omitido algo por brevedad. Lo único que he hecho es agregar la sección de Facebook al objeto "providers_large" (que agrega con éxito el logotipo al sitio web), y en lugar de proporcionar una url que identifica al usuario, estoy creando una propiedad llamada "form_url" que es a lo que quiero establecer la acción de mi formulario. Si mira el título de la sección "Haga clic en la imagen del proveedor", verá dónde estoy comprobando la presencia de la propiedad "form_url" y el uso de jQuery para cambiar la acción y enviar el formulario. Sin embargo, cuando paso por el JavaScript en modo de depuración, me dice que es una operación no válida.
var providers_large = {
google: {
name: ''Google'',
url: ''https://www.google.com/accounts/o8/id''
},
facebook: {
name: ''Facebook'',
form_url: ''http://wikipediamaze.rpxnow.com/facebook/start?token_url=http://www.wikipediamaze.com/Accounts/Logon''
},
};
var providers_small = {
myopenid: {
name: ''MyOpenID'',
label: ''Enter your MyOpenID username.'',
url: ''http://{username}.myopenid.com/''
},
livejournal: {
name: ''LiveJournal'',
label: ''Enter your Livejournal username.'',
url: ''http://{username}.livejournal.com/''
},
flickr: {
name: ''Flickr'',
label: ''Enter your Flickr username.'',
url: ''http://flickr.com/{username}/''
},
technorati: {
name: ''Technorati'',
label: ''Enter your Technorati username.'',
url: ''http://technorati.com/people/technorati/{username}/''
},
wordpress: {
name: ''Wordpress'',
label: ''Enter your Wordpress.com username.'',
url: ''http://{username}.wordpress.com/''
},
blogger: {
name: ''Blogger'',
label: ''Your Blogger account'',
url: ''http://{username}.blogspot.com/''
},
verisign: {
name: ''Verisign'',
label: ''Your Verisign username'',
url: ''http://{username}.pip.verisignlabs.com/''
},
vidoop: {
name: ''Vidoop'',
label: ''Your Vidoop username'',
url: ''http://{username}.myvidoop.com/''
},
verisign: {
name: ''Verisign'',
label: ''Your Verisign username'',
url: ''http://{username}.pip.verisignlabs.com/''
},
claimid: {
name: ''ClaimID'',
label: ''Your ClaimID username'',
url: ''http://claimid.com/{username}''
}
};
var providers = $.extend({}, providers_large, providers_small);
var openid = {
cookie_expires: 6*30, // 6 months.
cookie_name: ''openid_provider'',
cookie_path: ''/'',
img_path: ''images/'',
input_id: null,
provider_url: null,
init: function(input_id) {
var openid_btns = $(''#openid_btns'');
this.input_id = input_id;
$(''#openid_choice'').show();
$(''#openid_input_area'').empty();
// add box for each provider
for (id in providers_large) {
openid_btns.append(this.getBoxHTML(providers_large[id], ''large'', ''.gif''));
}
if (providers_small) {
openid_btns.append(''<br/>'');
for (id in providers_small) {
openid_btns.append(this.getBoxHTML(providers_small[id], ''small'', ''.ico''));
}
}
$(''#openid_form'').submit(this.submit);
var box_id = this.readCookie();
if (box_id) {
this.signin(box_id, true);
}
},
getBoxHTML: function(provider, box_size, image_ext) {
var box_id = provider["name"].toLowerCase();
return ''<a title="''+provider["name"]+''" href="javascript: openid.signin(/'''+ box_id +''/');"'' +
'' style="background: #FFF url('' + this.img_path + box_id + image_ext+'') no-repeat center center" '' +
''class="'' + box_id + '' openid_'' + box_size + ''_btn"></a>'';
},
/* Provider image click */
signin: function(box_id, onload) {
var provider = providers[box_id];
if (! provider) {
return;
}
this.highlight(box_id);
this.setCookie(box_id);
// prompt user for input?
if (provider[''label'']) {
this.useInputBox(provider);
this.provider_url = provider[''url''];
}
else if(provider[''form_url'']) {
$(''#openid_form'').attr("action", provider[''form_url'']);
$(''#openid_form'').submit();
}
else {
this.setOpenIdUrl(provider[''url'']);
if (! onload) {
$(''#openid_form'').submit();
}
}
},
/* Sign-in button click */
submit: function() {
var url = openid.provider_url;
if (url) {
url = url.replace(''{username}'', $(''#openid_username'').val());
openid.setOpenIdUrl(url);
}
return true;
},
setOpenIdUrl: function (url) {
var hidden = $(''#''+this.input_id);
if (hidden.length > 0) {
hidden.value = url;
} else {
$(''#openid_form'').append(''<input type="hidden" id="'' + this.input_id + ''" name="'' + this.input_id + ''" value="''+url+''"/>'');
}
},
highlight: function (box_id) {
// remove previous highlight.
var highlight = $(''#openid_highlight'');
if (highlight) {
highlight.replaceWith($(''#openid_highlight a'')[0]);
}
// add new highlight.
$(''.''+box_id).wrap(''<div id="openid_highlight"></div>'');
},
setCookie: function (value) {
var date = new Date();
date.setTime(date.getTime()+(this.cookie_expires*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
document.cookie = this.cookie_name+"="+value+expires+"; path=" + this.cookie_path;
},
readCookie: function () {
var nameEQ = this.cookie_name + "=";
var ca = document.cookie.split('';'');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)=='' '') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
},
useInputBox: function (provider) {
var input_area = $(''#openid_input_area'');
var html = '''';
var id = ''openid_username'';
var value = '''';
var label = provider[''label''];
var style = '''';
if (label) {
html = ''<p>'' + label + ''</p>'';
}
if (provider[''name''] == ''OpenID'') {
id = this.input_id;
value = ''http://'';
style = ''background:#FFF url(''+this.img_path+''openid-inputicon.gif) no-repeat scroll 0 50%; padding-left:18px;'';
}
html += ''<input id="''+id+''" type="text" style="''+style+''" name="''+id+''" value="''+value+''" />'' +
''<input id="openid_submit" type="submit" value="Sign-In"/>'';
input_area.empty();
input_area.append(html);
$(''#''+id).focus();
}
};
Puedes simplemente usar
$("#form").attr("target", "NewAction");
Por lo que yo sé, esto NO fallará en silencio.
Si la página se abre en un nuevo objetivo, es posible que deba asegurarse de que la URL sea única cada vez porque Webkit (chrome / safari) almacenará en caché el hecho de que ha visitado esa URL y no realizará la publicación.
Por ejemplo
$("form").attr("action", "/Pages/GeneratePreview?" + new Date().getMilliseconds());
Solo una actualización de esto: he tenido un problema similar al actualizar el atributo de acción de un formulario con jQuery.
Después de algunas pruebas, resulta que el comando: $ (''# myForm''). Attr (''action'', ''new_url.html'');
silenciosamente falla si el atributo de acción del formulario está vacío. Si actualizo el atributo de acción de mi formulario para que contenga algo de texto, el jquery funciona.
Usar el script Java para cambiar la URL de la acción de forma dinámica Funciona bien para mí
function chgAction( action_name )
{
{% for data in sidebar_menu_data %}
if( action_name== "ABC"){ document.forms.action = "/ABC/";
}
else if( action_name== "XYZ"){ document.forms.action = "/XYZ/";
}
}
<form name="forms" method="post" action="<put default url>" onSubmit="return checkForm(this);">{% csrf_token %}
jQuery (1.4.2) se confunde si tiene elementos de formulario llamados "acción". Puede evitar esto utilizando los métodos de atributo DOM o simplemente evitar tener elementos de formulario llamados "acción".
<form action="foo">
<button name="action" value="bar">Go</button>
</form>
<script type="text/javascript">
$(''form'').attr(''action'', ''baz''); //this fails silently
$(''form'').get(0).setAttribute(''action'', ''baz''); //this works
</script>
solo para agregar un detalle a lo que escribió Tamlyn, en lugar de
$(''form'').get(0).setAttribute(''action'', ''baz''); //this works
$(''form'')[0].setAttribute(''action'', ''baz'');
funciona igual de bien