检索按钮值问题Jquery

Question

好吧，我试图在单击后更改按钮值，因为当它的值为“Modificar(Modify)”时，我想更改为“Guardar(Save)”，反之亦然，但由于某种原因它不是工作更改按钮的值，我试过 attr("value","....")、val("....") 和 prop，但它不工作，并使用 html(". .") 或 text("...") 它会删除我上面的​​图标。

<?php 
require ('../conexion.php');

//Conectar con la base de datos y servidor
$conexion = new Conexion();
$conexion->conectar();

$idCentro = $_POST["idCentro"];

if ($idCentro != "" ){
    $query = "SELECT * FROM centro WHERE id_centro='".$idCentro."'";
    $consult = pg_query($query);    
}

$query2 = "SELECT * FROM parroquia";
$consult2 = pg_query($query2);


if($consult){
    $row = pg_fetch_array($consult);
    ?>
    <form name="registrarCentro" id="registrarCentro" class="registroCentro" method="post" action="">
        <div class="col-lg-4">
            <label> Nombre del Centro</label>
            <input class="form-control" size="70" id="nombre" name="nombre" value=<?php echo "'".$row["nombre"]."'"; ?> readonly="readonly">
            <br/>
        </div>
        <div class="col-lg-4">
            <label> Dirección</label>
            <input class="form-control" size="70" required:"required" id="direccion" name="direccion" value=<?php echo "'".$row["direccion"]."'"; ?> readonly="readonly">
            <br/>
        </div>
        <div class="col-lg-4">
            <label> Tel&eacute;fono Principal</label>
            <input class="form-control" size="20" required:"required" id="telefono1" name="telefono1" value=<?php echo "'".$row["telefono_1"]."'"; ?> readonly="readonly">
            <br/>
        </div>
        <div class="col-lg-4">
            <label> Tel&eacute;fono  Opcional</label>
            <input class="form-control" size="20" required:"required" id="telefono2" name="telefono2" value=<?php echo "'".$row["telefono_2"]."'"; ?> readonly="readonly">
            <br/>
        </div>
        <div class="col-lg-4">
            <label> Parroquia </label>
            <select class="form-control" id="parroquia" readonly="readonly">
            <?php 
                while($row2 = pg_fetch_array($consult2)){ 
                    if($row2["id_parroquia"] == $row["fk_parroquia"]){ ?>
                        <option value=<?php echo "'".$row2["id_parroquia"]."'";?> selected><?php echo $row2["nombre"];?> </option> <?php
                    }else{ ?> 
                        <option value=<?php echo "'".$row2["id_parroquia"]."'";?>><?php echo $row2["nombre"];?></option> <?php
                    }
                }?>
            </select>
            <br/>
        </div>
        <div class="col-lg-12" align="center" >
            <button type="button" class="btn btn-default" style="background-color:#CCC" id="guardar" value="Modificar">
            <img src="img/import.ico" height="25" width="25"\> Modificar </button>
            <br/>
            <br/>
        </div>
        <div class="col-lg-12" align="center" >
            <button type="button" class="btn btn-default" style="background-color:#CCC" id="eliminar" value="Eliminar">
            <img src="img/export.ico" height="25" width="25"\> Eliminar </button>
            <br/>
            <br/>
        </div>
        <div id="errorSection">
        </div>
    </form>
<?php
}
?>
<script type="text/javascript">
function IngresarDatos(){
         $("#registrarCentro").find(':input').each(function() {
                 var elemento= $(this).val();
                 if(elemento == ""){
                    alert("   Todos los Campos son Obligatorios \n \n    Por Favor, Ingrese El campo " + $(this).attr("id"));
                    return false;
                }else{
                    var expRegCedula = new RegExp("^\\d{6,8}$");
                    var expRegNombreApellido = new RegExp("^([a-z]|[A-Z]){5,45}$");
                    var expRegCorreo = new RegExp("^([A-Z]|[a-z])([A-Z]|[a-z]|\_|\-|\.|[0-9]){4,20}\@([A-Z]|[a-z]){3,15}\.([A-Z]|[a-z]){2,5}$");
                    var expRegTelefono = new RegExp("^\\d{10,15}$");
                    var expRegUsuario = new RegExp("^([a-z]|[A-Z]|\\d)+$");

                    if(!expRegNombreApellido.test($("#nombre").val().trim())){
                        alert("El nombro solo puede tener letras con un minimo de 5 y un maximo de 45");
                        return false;
                    }else if((!expRegTelefono.test($("#telefono1").val().trim())) || (!expRegTelefono.test($("#telefono2").val().trim())) ){
                        alert("El campo telefonico solo recibe digitos y con un maximo de 15");
                        return  false;
                    }else{

                        return true;
                    }
                }
             });
        return true;
    }


    $("#guardar").click(function(){
        //alert("Entro a modificar");
        if($(this).val() == "Modificar"){
            $("#guardar").prop("value","Guardar");
            $("#registrarCentro *").each(function(){
                $(this).attr('readonly', false);
            });
        }else{
            alert("Entro a guardar");
            $("#guardar").prop("value","Guardar");
            $("#registrarCentro").each(function(){
                $(this).attr("readonly",true);
                if(IngresarDatos()){
                    //alert("entro");
                    $.post("php/IngresarCentro.php", {nombre: $("#nombre").val(), direccion: $("#direccion").val(), telefono1: $("#telefono1").val(), telefono2: $("#telefono2").val(), parroquia: $("#parroquia").val()} , function(data){
                        if (data != 1){
                            $("#errorSection").html(data);
                        }else{
                            alert ("El centro ha sido agregado Exitosamente");
                        }
                        $("#registrarCentro")[0].reset()
                    });
                }   
            });
        }
    });
</script>

Answer 1

FIDDLE

$("#value").on('click', function(){
    if ($(this).val() == "Modify") {
        $(this).val("Save");
    } else {
        $(this).val("Modify");
    }



});

Answer 2

值确实发生了变化，但您使用的是按钮，并且您还需要更改其文本。 试试这个代码（改变值而不是文本）：

$(document).on('click',"#guardar", function(){
    //alert("Entro a modificar");
    if($(this).val() == "Modificar"){
        $(this).val("Guardar"); // change into $(this) and use .val()
        $("#registrarCentro *").each(function(){
            $(this).attr('readonly', false);
        });
    }else{
        alert("Entro a guardar");
       $(this).val("Modificar"); // change into $(this) and use .val()
        $("#registrarCentro").each(function(){
            $(this).attr("readonly",true);
            if(IngresarDatos()){
                //alert("entro");
                $.post("php/IngresarCentro.php", {nombre: $("#nombre").val(), direccion: $("#direccion").val(), telefono1: $("#telefono1").val(), telefono2: $("#telefono2").val(), parroquia: $("#parroquia").val()} , function(data){
                    if (data != 1){
                        $("#errorSection").html(data);
                    }else{
                        alert ("El centro ha sido agregado Exitosamente");
                    }
                    $("#registrarCentro")[0].reset()
                });
            }   
        });
    }
});

您还想更改按钮文本，如果是，请使用以下代码？

$(document).on('click', "#guardar", function () {

if ($(this).val() == "Modificar") {
    $(this).val("Guardar"); // change into $(this) and use .val()
    $(this).contents().filter(function(i,e){
        if ( this.nodeType == 3 && i == 2 )
            this.nodeValue = "Guardar"; // change button text
    });
    // another rest of the code
} else {
    alert("Entro a guardar");
    $(this).val("Modificar"); // change into $(this) and use .val()
    $(this).contents().filter(function(i,e){
        if ( this.nodeType == 3 && i == 2 )
            this.nodeValue = "Modificar"; // change button text
    });
    // another rest of the code
}
});

DEMO